Web Design

This is an informal assessment. You will complete it individually or with a partner. You have 60 minutes to complete as much as you can.

Before we start, create a new folder on your computer. Name it Informal-2. We will upload this to the cloud later.

Part A - Follow these instructions:

  1. Save the Santa image above in your Informal-2 project folder.
  2. Create an html file called christmas.html and save it in your folder.
  3. Open the webpage with a text editor eg Notepad++. Include a head seaction with a style section in it and a body section with a script section in it
  4. Create a class in the style section and name it redBorder. Add the following styles to the class:
    • border:red dashed 3px;
    • border-radius:50%;
  5. Apply the class to the image.
  6. Create an <h1> element under the image and give it an id of gift
  7. In the <script> section create a function called request. This function will ask the user What do you want for Christmas? and push the answer into the element with the id of gift as part of a sentence eg You ordered a hairbrush!
  8. Use the onclick attribute inside the <img/> tag to call the function when the user clicks the image.
  9. Test your design!

Part B - Adapt your program

To complete Part B, you should understand if-else statements in Javascript.

  1. Adapt your program so that if the user enters iPhone 9 then a message Not available yet appears. Otherwise, the You ordered a ... appears as before.

Part C - Final Adaptation

To complete Part C, will be asked to use your current knowledge to solve a little problem!

  1. Adapt your program so that when the user orders an acceptable gift (ie not an iPhone 9), the user is then asked to enter a delivery date. This data is used to create a new String in the following format: You ordered a hairbrush and it will be delivered on December 23. This message should be dsplayed in a <h2> element beneath the <h1> element.