JavaScript Challenges

From Wikiversity

Web Design → JavaScript Challenges This page is part of the Web Design project.

Are you ready for the Javascript challenges? These challenges aim to build your Javascript skills with practical activities that can be immediately useful for your own websites!

Please make sure you are familiar with the window and document objects in Javascript before taking on these challenges (see the activities Getting to know your Window and Getting to know your Document)

Contents 1 Challenge 1: Peekaboo Elements 2 Challenge 2: 'Same as above' Postal Address boxes 3 Challenge 3: Radio Buttons and Check Boxes 4 Challenge 4: Better input validation 5 Challenge 5: Making sure a number is entered 6 Time for a re-cap 7 Challenge 6: Checking for a Valid Email 8 Challenge 7: Unobtrusive Javascript 9 Challenge 8: Application - GoogleMaps 10 Challenge 9: An intro to YUI - A Calendar Control 11 Challenge 10: An intro to jQuery - Peekaboo revisited

[edit] Challenge 1: Peekaboo Elements

Add the following fieldset to a form of your own and preview it in your browser:

<fieldset>

  <legend>Email subscriptions</legend>

  <p id="subscribepara">
    <input type="checkbox" name="subscribe" id="subscribe" />
    <label for="subscribe">Yes! I would like to receive the occasional newsletter via email</label>
  </p>

  <p id="emailpara">
    <label for="email">Email Address:</label> 
    <input type="text" name="email" id="email" />
  </p>

</fieldset>

The aim of this challenge is to only display the email paragraph when the checkbox is checked, but we'll break that down into smaller tasks!

Step 1: Hiding the email fields by default

Add some plain old CSS style so that the "emailpara" paragraph isn't displayed when the page first loads (using the CSS 'display' property). Test to make sure this works.

Step 2: Adding a function template

Create a new function called toggleEmail() that simply displays an alert, ie. window.alert("Yep, my function is being called");

Add an event so that when the checkbox is clicked your function is called and test that it works!

Step 3: Display the email fields

Now we'll add some code so that our function actually does something useful! Using JavaScript, we can change the style of any element on our page using the style object. Every element has a style object and we can access it like this:

  document.getElementById("subscribepara").style.backgroundColor = "blue";

In plain English, the above JavaScript statement says:

1. Get the element on my document that has the id of "subscribepara",
2. Grab it's style object,
3. and set the backgroundColor of this style to "blue".

Try copy-n-pasting the above statement into your function and see what it does! Notice that the style property names are slightly different to those that we use in CSS (backgroundColor vs. background-color). W3Schools has a great reference for the HTML DOM Style object that outlines all the property names and values.

Now see if you can modify your function so that it unhides your "emailpara" paragraph when the it runs.

Step 4: Making the email field toggle

When you test your form at the moment, you'll notice that you can click on the checkbox and the email field displays, but when you un-check the checkbox the extra paragraph doesn't hide itself again!

Our challenge is to add an if-statement to our toggleEmail() function that checks to see if the checkbox is currently checked. If it is, we want to display our "emailpara" paragraph, otherwise we want to hide it!

To do this, we need to know how we can find out if a checkbox is currently checked... luckily for us, W3Schools's HTML DOM Checkbox reference tells us that a checkbox element has a property called 'checked' that is either true or false (ie. we can use, document.getElementById("idofinputelement").checked to find out the value of a checkbox, either true or false).

Step 5: When Javascript is disabled

At the moment if a user views the page with CSS enabled but Javascript disabled they will never see the email field. Remove the CSS that hides the email field and replace it with Javascript to hide the field when the page's onload event is fired.

You may want to take a look at your earlier if-statements from your input validation to see how you might complete this challenge! When you get it working, yell out "JavaScript is way cool" and stand up and point to yourself (and take a break!)

[edit] Challenge 2: 'Same as above' Postal Address boxes

Add the following fieldset to a form of your own and preview it in your browser:

<fieldset>

  <legend>Billing Information</legend>

  <p>Postal Address:  <br />
    <textarea name="postaladdress" id="postaladdress"></textarea>
  </p>
  
  <p>Home Address: 
    <input type="checkbox" name="homepostalcheck" id="homepostalcheck" />
    <label for="homepostalcheck">Same as above</label><br />
    <textarea name="homeaddress" id="homeaddress"></textarea>
  </p>

</fieldset>

The aim of this challenge is to automatically copy the postal address to the home address field if a user checks the "Same as above" checkbox. In addition to this, we'll disable the home address field when the checkbox is checked.

Step 1: Adding a function template

Add a javascript function to your page called setHomeAddress() that simply displays an alert, ie. window.alert("Yep, my function is being called");

Add an event so that when the checkbox is clicked your function is called and test that it works!

Step 2: Setting the value for the Home Address

We already know how to find the value of any element in our document... the trick here is to set our "homeaddress" element's value equal to the value of our "postaladdress" element. To set the homeaddress we could do something like:

 document.getElementById("homeaddress").value = "Hi there";

Test and see if it works! You should find that when you click on your checkbox, the homeaddress is set to the text "Hi there".

Now see if you can modify the above line so that instead of placing "Hi there" in the box, it puts the value of the postal address field.

Step 3: Disabling the Home Address field

Use the W3Schools page about the HTML DOM TextArea object and see if you can find a property that will allow us to disable our textarea.

Try setting this property for your "homeaddress" element in your setHomeAddress() function. Make sure you test it out!

Step 4: Toggling the Home Address

Now when you test your form, you'll notice that when you un-check your checkbox, the home address field isn't enabled.

Have a go at adding an if-statement to your setHomeAddress() function so that when the checkbox is un-checked the Home address field is re-enabled (you may want to review your solution to Challenge 1!)

[edit] Challenge 3: Radio Buttons and Check Boxes

Radio buttons and check boxes behave a little differently to a normal <input> elements, just by their nature. For example, so far we've been using code like:

  if (document.getElementById("firstname").value == "")
  {
     window.alert("....");
     return false;
  }

to check if a certain input box on our form is empty. But how do we do this for radio buttons? They don't take a value that our user types in... a radio button or check box is either checked or not checked!

Take a copy of the following form and save it in a file of your own:

<form action="mailto:me@fakeemail.com">
  <fieldset>
    <legend>Radio buttons and Check Boxes</legend>
    <p>What's your favourite berry?: 
       <input type="radio" value="male" name="favfruit" id="optstraw" />
       <label for="optstraw">Strawberries</label> or 
       <input type="radio" value="female" name="favfruit" id="optblue" />
       <label for="optblue">Blueberries</label>
    </p>
  </fieldset>

  <input type="submit" value="Check it out!" />
</form>

Step 1: Setting up your input validation

First, if you don't have one already, create a blank checkForm() function for your form and make sure that your function is being called when the form is submitted (using a simple window.alert ). Hopefully we're starting to see why we always do this!

Step 2: Finding out if a radio button has been checked

Once you're convinced that your checkForm function is being called, fill out your checkForm function so that it looks like this:

function checkForm()
{
  // First, create our own variable so we don't have to keep typing
  // all that document.getElementById crap
  var optStrawberry = document.getElementById("optstraw");

  if (optStrawberry.[you need to find the property] == false)
  {
    window.alert("Please select your favourite berry!");
    return false;
  }
       
  return true;
}

Note that this function is not complete. We need to find out what the radio button's property is that will tell us whether the radio button has been checked or not. Take a look at W3Schools HTML DOM Radio Object and see if you can find out what that property is. When you find it, replace the [you need to find the property] in the code above accordingly!

Test out your code and see if it does what you expect.

Step 3: Getting it to work properly!

You might have noticed that our code is not really doing what we want, even though it's doing exactly what we've asked it to! It's currently forces the user to select the strawberry option.

We need to modify our code so that it alerts the user only if the strawberry option is false and the blueberry option is false (ie. neither option has been checked). Looking at the logical operators on W3Schools Javascript Operators page, see if you can find out how to make sure that both radio buttons are unchecked before alerting the user.

If you get this working, now's a great time to go back to any forms you've designed in the past and add input validatin for your radio buttons!

[edit] Challenge 4: Better input validation

So far our form input validation has consisted of some annoying window.alert() boxes when users enter in the wrong information, but surely there's a more user-friendly way?!

This challenge will help you create in-line error messages that only appear when they need to! Create a new page with the following form:

<form action="mailto:me@fakeemail.com" onsubmit="return checkForm();">
  <fieldset>
    <legend>Personal details</legend>
      <p>Full name: <input type="text" name="fullname" id="fullname" /></p>
      <p class="errormsg" id="nameerrormsg">Please enter your name above</p>

      <p>Street Address: <input type="text" name="streetaddr" id="streetaddr" /></p>
      <p class="errormsg" id="addrerrormsg">Please enter your street address</p>

  </fieldset>
  <input type="submit" value="Submit it!" /> 
</form>

Step 1: Some plain old styling

First, just some plain old CSS! Add some style so that the error messages use red text, and make them bold! Note, the error messages have been given a class="errormsg".

Once you've checked that they look the way you want them, use your CSS knowledge to make sure that they are not displayed by default when the form first loads.

Step 2: Setting up your checkForm() function Just a blank function that simply displays a window.alert so that you know it's connected ok! You'll need to add an event and call your function from your form.

Step 3: Displaying your error messages This step will be similar to the Peekabo challenge above (Challenge 1). When the form is submitted, our checkForm() function is called. If the "fullname" field is empty, then we want to display the "nameerrormsg" paragraph.

Step4: Changing our programs logic You might notice at the moment two issues that are not ideal:

1. When you submit the form with blank data, only the first input's error message appears.
2. When you add text to one field and re-submit, the error message doesn't go away!

To fix this, you'll need to change the logic of your function... this can be tricky (so ask for help!), but here's some hints:

• You'll need a variable, such as "is_valid" that be set to true or false, depending on the outcome of your checks. You'll then return this variable at the end of your function, rather than returning true or false as soon as you find an error.

[edit] Challenge 5: Making sure a number is entered

So far we've worked out how we can check to see if a field is empty or not. Now we want to take this one step further and verify that whatever was entered is actually a number. Imagine you've got a Quantity field where the visitor specifies how many of a certain product they want to buy. You don't want them to enter 'a' or 'Hi there'.

Step 1: Updating your form Add an input field to your form that has the name "quantity" and modify your checkForm() function so that the value can't be empty.

Step 2: Checking for a number Javascript has a special function called isNaN(), short for "is Not a Number", that can be used to test a value to see if it could be understood as a number. For example, isNaN(1.5) will return false (as it *is* a number), whereas isNaN("hi there") will return true (as it is not a number).

Take a few minutes to experiment with the W3Schools demo of isNaN() until you are comfortable that you understand what it does.

In your checkForm() function, right after you've made sure that the quantity field isn't empty, add another if-statement as follows:

  // you only need the following line if you don't already
  // have a variable for your quantity field.
  var quantity = document.getElementById("quantity");

  // Now check if the value of the quantity field is 
  // a number or not?!
  if (isNaN(quantity.value))
  {
    // if quantity wasn't a number, then we want to let the
    // user know that they need to correct the error!
    // Add your code below: 


    // Lastly, return false so that the form won't be submitted.
    return false;
  }

Step 3: Adding a postcode field Now add a further field to your form with the name postcode.

• Update your checkForm() function so that the postcode cannot be left blank.
• Now update your checkForm() function again so that the postcode field must contain numbers only (see step 2 above).

Step 4: Checking the length of the postcode field

Everything in Javascript that can have a length has a special length property. This helps us to find out how many characters a user has typed in, for example, the following JavaScript code gets the "fullname" input element from the document and then displays an alert message telling the user how many characters were entered into the "fullname" input element:

  var fullname = document.getElementById("fullname");
  window.alert("The length of the fullname field is: " + fullname.length);

Take a few minutes to see how the length field is used in this W3Schools Example.

• Modify the W3Schools example so that the field can have up to 8 characters.

Now applying this to your own form:

• modify your checkForm function so that the postcode field can only contain 4 characters.

[edit] Time for a re-cap

So far, you've managed to:

1. Check whether a field is empty
2. Check whether the entered text in a field is a number using the isNaN() function.
3. Check the length the entered text in a field (ie, how many characters have been entered) using the length property.
4. Improve your input validation so that it displays error messages within the page (rather than the rather ugly window.alert() message box), by hiding and showing your own error messages with the style object.

Not bad! If you feel that you need more practise with the above, you might want to try going over the previous 5 challenges by creating a new form.

To be completed.

[edit] Challenge 6: Checking for a Valid Email

Checking to see if a postcode is valid required us to check that:

1. the entered postcode was a number
2. the entered postcode had exactly 4 digits (depending on your country!)

What can we check to make sure that an entered email address is actually a valid email address? Take a piece of paper and see if you can come up with two or three things that email addresses always need to contain before they can be processed.

Step 1: Making sure that the '@' symbol is present

Every email address contains one, and only one, "at" symbol (@). The email address entered into your form is just a bunch of characters strung together inside quotes, such as "Hi there". All programming languages refer to this bunch of characters as a String.

The great thing about Javascript is that every string has a whole bunch of built-in properties and methods that we can use. In fact, we've already used the length property back in Challenge 5 to work out how many characters our postcode contained.

Take a few minutes to read through the W3School overview of the String object. You may also want to look at some of the examples.

One of the methods that you should have seen there is the indexOf() method. We can use the indexOf() method to find out where the "@" symbol appears in our email address,if at all! Note that the indexOf() method returns a number corresponding to the index or position where the thing you are looking for is (or -1 if it isn't there at all!). For example:

  var myString = "Hi there!";

  window.alert("Position of H is: " + myString.indexOf("H")); // position will be 0

  window.alert("Position of i is: " + myString.indexOf("i")); // position will be 1

  window.alert("Position of the is: " + myString.indexOf("the")); // position will be 3

  window.alert("Position of ! is: " + myString.indexOf("!")); // position will be 8

  window.alert("Position of Z is: " + myString.indexOf("Z")); // position will be -1

If you want to test the above, try the example of indexOf() at W3Schools.

Now, assuming your form has an input element with the id="email", you should be able to add the following code to your checkForm() function before having a go at modifying it to get it to work.

  // you only need the following line if you don't already
  // have a variable for your quantity field.
  var email = document.getElementById("email");

  // First, create a variable to remember the position of the "@" symbol
  var atPos = email.value.indexOf("@");

  if (atPos == ??) // you need to replace the question marks with 
  {
    // Then there wasn't any @ symbol within the email address!
    // Let the user know that they need to correct the error!
    // Add your code below: 


    // Lastly, return false so that the form won't be submitted.
    return false;
  }

Step 2: Making sure that there is at least one character before the @

Step 3: Making sure that there is a dot (.) after the @

Step 4: Making sure that there is at least 2 characters after the dot

Advanced: doing it all with a regular expression

[edit] Challenge 7: Unobtrusive Javascript

So far, we've been mixing our JavaScript throughout our HTML... and this is the way Javascript has been done for years because it's a bit simpler (just as using <font> tags in HTML is a little simpler than using CSS!) But it's not the best way!

Just like we separate our HTML content and our CSS presentation of our webpage, it's also worthwhile separating our Javascript behaviour our of the document. Why? You can find out more in the Digital Web Magazine article separating behaviour and structure, but if you think about how separating our CSS means that we can re-use the same stylesheet very easily on other pages, it's the same with Javascript! By separating our Javascript from the actual page, we can apply the same Javascript code to lots of pages (usually) without having to modify the page itself.

Here's how it works: Normally we connect our Javascript code (like our checkForm function) to an event of a specific HTML element on our page with something like:

  <form method="post" onsubmit="checkForm()" id="userfeedbackform">
    ...
  </form>  

And it does the job. Now what we want to do is remove our 'onsubmit="checkForm()"' event completely. Do it! Delete it from your own page!

How then are we going to link our form to our checkForm function? Well we can actually set events for our HTML elements using Javascript itself like this:

  document.getElementById("userfeedbackform").onsubmit = checkForm;

This piece of Javascript code will replace the 'onsubmit="checkForm()"' that we've included in our HTML up until this point! We've probably got two questions now:

1. Why does our checkForm() function here not have the brackets after it??
2. Where do I put this code?

The easiest answer to the first question is just "it doesn't" - it's an exception where you'll see a function without the () after it! (still curious? When you omit the brackets you're passing a pointer to the function, rather than a call to that function) As for the second question, let's try putting it inside our script at the start of our document as follows:

    <script type="text/javascript">
      function checkForm()
      {
        window.alert("Example Input Validation");
        // Your normal form validation code is here
      }

      document.getElementById("userfeedbackform").onsubmit = checkform;
    </script>

Reload your page and see what happens. You should see an error message, telling you something along the lines of it not being able to find an element with the id="emailform" - even though you may definitely have one! (If not, add the id to your form now!)

The problem now is that our Javascript is in the head of our HTML document and is executed before the rest of the document that has not even been read by the browser!

So, we need a way to make sure our new bit of code is only run after the document has been loaded... any ideas? Hopefully you're thinking something along the lines of:

  <body onload="our code would go here">

and you're half right! We do want to use the onload event, but not in that way or we're back at square one! Instead we'll pack our new line of JavaScript into it's own function:

  //
  // This function sets all the events used by my Javascript
  //
  function initMyEvents()
  {
    document.getElementById("userfeedbackform").onsubmit = checkForm;
  }

and then link this function with the onload event with the special line of code:

  window.onload = initMyEvents;

So our final Javascript code will look something like:

<script type="text/javascript">
  //
  // checkForm()
  // Checks all the required fields on my form.
  //
  function checkForm()
  {
    window.alert("Example Input Validation");
    // Your normal form validation code is here
  }

  //
  // This function sets all the events used by my Javascript
  //
  function initMyEvents()
  {
    document.getElementById("userfeedbackform").onsubmit = checkform;
    // Any other events you use can be added here in the same form.
  }

  window.onload = initMyEvents;
</script>

Try it out with your own form now!

The last step to separate our Javascript is to remove the whole shebang to a separate file, so that our script tag will looks simply as follows:

  <script type="text/javascript" src="my_javascript_file.js" />

Voila! Now you're on your way to learning Javascript the Unobtrusive way! Take some time to read the Digital Web Magazine article Separating Behaviour and Structure, as it might explain things with more clarity than you found here!

[edit] Challenge 8: Application - GoogleMaps

Google has provided a tool that enables you to include their rich Map functionality on your own website - all you need is a little bit of Javascript! (OK, to do some of the more useful things you'll need to learn a bit more Javascript, but that's a good thing!) See Put Google Maps on your site for an overview.

After browsing that page, the first thing you'll see is that you need to sign up for a GoogleMaps API key (don't let the acronyms scare you!) for the address that you'll be using. For example, if you're uploading your file to myname.learningspace.com then you'll need to tell Google that address when you sign up for your key.

Next, take a look at the Hello World example of Google Maps. As you read through the example Javascript code, you'll notice that some will look familiar (if-statements, functions, events etc), but other bits will be new (GMap).

1. The first part of this challenge is to get the map working on your own page. You'll need to copy-n-paste the code provided, put your own key in the right spot, then upload your file onto your hosting. Then test it!
2. Modify the code so that it displays a map of your local area instead of the default California map. To do this, you'll need to find the latitude/longitude coordinates for your area... (Katoomba is: -33.41,150.19).
3. Modify your code so that the basic controls are displayed as part of your map.

That's just scratching the surface, but has hopefully started you thinking about the possibilities!

[edit] Challenge 9: An intro to YUI - A Calendar Control

Imagine that you've got an HTML form that requires the user to enter a date. There are a number of different formats that could be used by the user, some which are ambiguous, such as 08/06/2007 (is that the 8th of June 2007 or the 6th of August 2007? Depends where you live!)

These days, there's lots of Javascript solutions that allow your users to click on a calendar control to choose the date instead of typing it, which is a much safer way to get user input! We're going to get started using the Yahoo! User Interface libraries Calendar control.

Now the YUI library is very extensive, and very extensively documented. For the moment we'll just use the Calender control without going into too much YUI detail, but if you want to know more, there's documentation galore (with lots of cheat sheets too!) and videos such as YUI Basics and DOM hacking.

To get started:

• Create a new blank HTML file with your doctype, html, head, title, body tags, as well as an appropriate h1 header and intro paragraph (such as, "A test of the YUI calendar control").
• Add a small form with one field, including a label "Enter the name of your event:" followed by a text input field and a submit button.
• Read through the introduction at YUI Calendar control and follow the Getting Started instructions point-by-point. If you get stuck and are unsure of a certain step, check the code below to find out what to do, but resist the urge to cut-n-paste!

Once you have your calendar control displaying on your page:

• Add a new function to your Javascript, called showDate(), link it to your forms onsubmit event and verify that the link works (ie. add an alert that says "Yep, this was called").
• Have a quick read of the "Obtaining selected dates" section of the YUI documentation, but note that we know that only one date can be selected, so we can grab our date into a variable like this:
  • var selected_date = cal1.getSelectedDates()[0]
• Use the above code in your showDate function to display the date using window.alert. You might need to use the getDate(), getMonth() and getFullYear() methods of the date object (ie. selected_date.getMonth() to get the month). See the W3Schools reference for the date object for more details.

Only if you're really keen:

• Add a new text field to your form with the label "Selected Date", and see if you can use the Calendar's own selectEvent to transfer the selected date to your new field (note: quite a lot of new learning if you've not used YUI events before!)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>YUI Calendar control</title>

    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.0/build/calendar/assets/skins/sam/calendar.css"> 
         
    <!-- Dependencies --> 
    <script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/yahoo-dom-event/yahoo-dom-event.js"></script> 
         
    <!-- Source file --> 
    <script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/calendar/calendar-min.js"></script>

    <script type="text/javascript">

    var cal1;
    function initMyEvents(){
      cal1 = new YAHOO.widget.Calendar("cal1","cal1Container"); 
      cal1.render(); 

    }

    window.onload = initMyEvents;

    </script>
  </head>
  <body class="yui-skin-sam">
   <h1>Yahoo! User Interface - Calendar control</h1>
   <p>This is an activity to test out the YUI calendar control</p>

   <form>
     <p>This form would have lots of other fields</p>
       <p><label for="eventtitle">Enter the title of your event:</label></p>
       <p><input type="text" name="eventtitle" id="eventtitle" /></p>
       <p><label for="eventdate">Select the event date:</label></p>
       <input id="eventdate" type="text" />
       <div id="cal1Container"></div>
       <input type="submit" value="Submit event" />
   </form>
  </body>
</html>

[edit] Challenge 10: An intro to jQuery - Peekaboo revisited

The Yahoo! User Interface library that was used in the previous challenge is has an incredible number of useful features, but this can also create a higher barrier to entry for some of us who just want to do a few simple things, like hide/unhide a form input!

Enter jQuery:

jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript.

So, let's get started! A good place to start is the tutorial Getting started with jQuery. It includes a downloadable starter kit and will work you through a hello-world example. After completing the first two sections (Setup and Hello jQuery), you're ready to start the first challenge, Peekaboo revisited!

• Copy and paste the following HTML page into a new file - notice that it's the same form from Challenge 1 - Peekaboo elements (and we're aiming for the same functionality too).
• Make sure that you've got the latest version of jQuery saved in the same folder as your file, with the filename jquery.js
• Read through the Javascript code to check that you know what it's intending to do,
• Test it out! Does it work as expected? What doesn't it do properly yet (think: "Oops, I didn't mean to check that")
• Now for the challenge, take a look at the jQuery Event documentation, and see if you can fix the problem you identified in the previous step.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Javascript challenge 10</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
      // Set up some code to be run when the document is ready:
      $(document).ready(function(){

        // First, hide the whole email para straight away:
        $("p#emailpara").hide();

        // Then add a function that should be run each time the subscribe
        // checkbox is clicked:
        $("input#subscribe").click(function(){
          $("p#emailpara").show("slow");
        });
      });
    </script>

  </head>
  <body>
    <h1>Testing jQuery</h1>
    <form action="mailto:me@example.com" method="post">
      <fieldset>
        <legend>Email subscriptions</legend>

        <p id="subscribepara">
          <input type="checkbox" name="subscribe" id="subscribe" />
          <label for="subscribe">Yes! I would like to receive the occasional newsletter via email</label>
        </p>

        <p id="emailpara">
          <label for="email">Email Address:</label> 
          <input type="text" name="email" id="email" />
        </p>

      </fieldset>
    </form>
  </body>
</html>

Once you're done, take a look at the Javascript code that you've used in this challenge and compare it to your code for Challenge1... which would you prefer to write?

Finally, revisit Challenge 4 above (better input validation), and have a go at rewriting your solution using jQuery!