The Scenario

A startup company wishes to build a website for their online dating business. They have employed a designer who has produced the following design using graphics software. The software used by the designer only produces an image and does not produce HTML.

The company has now contracted you to implement the design, i.e. build the web page. The specifications include a working form component. The company thinks the designer has done a great job and wants you to implement the design without modifications.

Here is a mockup of the page that the client wants you to build:

Technical Overview

From a technical point of view, the webpage is constructed using HTML and CSS. Most of the HTML content are form elements. Some JavaScript will be required, but you will not have to write it, only follow the instructions to include it where needed.

Interactive Features

The client’s specifications require you to have two interactive features in the web page. 

1. When the mouse is moved over any form control or its associated label, the label text will turn blue. When the mouse moves off it, it will return to its normal color. This will be accomplished using CSS. 
2. Immediately after the user selects the image of his/her face, the image is to be shown in the web page. A small piece of JavaScript will be provided for you to use for this. However, you are not expected to understand the JavaScript code at this stage, nor should you create any other JavaScript for this assignment.

Assignment Tasks

• There are 3 tasks in this assessment.
  • For Task 1: You will use HTML to create the webpage structure and add content, without any CSS.
  • For Task 2: Apply visual styles to the webpage using CSS.
  • For Task 3: Add the interactive features to the webpage.
• Each task has been further separated into smaller parts to help organize your approach. 
• Detailed requirements and instructions are given below. 

Special Notes:

• You will complete this assignment during the workshop using the Paired Coding method, which your instructor will explain to you before you begin. Paired Coding is a very common collaborative coding method that many teams use, especially with junior developers. Practicing the paired coding method in your workshops will give you experience with this type of collaboration, as well as make the workshop experience more interesting and productive.
• As this is a mock client-contractor scenario, you will be graded for accuracy. It is important that you carefully check your work against the design specifications provided to ensure that your finished product exactly matches the design. You should especially check things like spelling, capitalization, and punctuation, as these are commonly overlooked. This exercise will help you fine-tune your attentiveness to small details, which is a critical skill for developers.

TASK 1: Use HTML to create the webpage structure and add content

Part 1: Set up the document

• Create a basic valid HTML5 document as you learned to do in Week 1. Be sure to set the DOCTYPE and an appropriate title and meta charset.

Part 2: Set up the form element

• In the body of your HTML document, create a level 1 heading with the text Enter Your Details For Our Dating Website.
• Beneath this, create a form element with three attributes:
  1. Set the action attribute to “https://us-central1-nucamp-production.cloudfunctions.net/post/formdata“.
  2. Set the method attribute to “post”.
  3. Set the enctype attribute to “multipart/form-data”.

Part 3: First Fieldset – Your Face

• Create a fieldset inside the form element. All the following elements in this part will go inside this fieldset.
• Add a legend with the text Your Face.
• Below the legend, add a div element. Inside the div, add the following elements:
  • label attribute: for=”avatar” and text: “Upload Your Image: “
  • input with attributes: type=“file“, id=“avatar“, name=“avatar“, required
• Following the div element, add a p element (paragraph). 
• Inside this p element, type the text “Image Preview: ” (without the quotes), followed by an img element with these attributes: id=“preview“, width=”500“.

Part 4: Second Fieldset – Your Details

• Create a second fieldset inside the form element. All the following elements in this part will go inside this fieldset.
• Add a legend with the text Your Details.
• Below the legend, add a div element. Inside the div, add the following elements:
  • label with attribute: for=”name” and text: “Name: ”
  • input with attributes: type= “text”, id=”name”, name=”name”,placeholder=”Your full name”, required
• Add a second div below the previous one. Inside this div, add the following elements:
  • label with text: “Gender: “
  • input with attributes: type=”radio”, id=”woman”, name=“gender”, value=”woman”, required
  • label with attribute: for=”woman” and text: “Woman“
  • input with attributes: type=”radio”, id=”man”, name=“gender”, value=”man”
  • label with attribute: for=”man” and text: “Man“
  • You are welcome to add other radio inputs here, such as for “nonbinary” and/or “other“. While the id and value should be different for each, be sure to use the same name of “gender” so that it is included in the same group of radio inputs. 
• Add a third div below the previous one. Inside this div, add the following elements:
  • label with attribute: for=”age” and text “Age: ” 
  • input with attributes: type=”number”, id=”age”, name=“age”
• Add a fourth div below the previous one. Inside this div, add the following elements:
  • label with attribute: for=”dob” and text: “Date of Birth: “
  • input with attributes: type=”date”, id=”dob”, name=“dob”
• Add a fifth div below the previous one. Inside this div, add the following elements:
  • label with attribute: for=”color” and text “Favorite Color: ” 
  • input with attributes: type=”color”, id=”color”, name=“color”
• Add a sixth div below the previous one. Inside this div, add the following elements:
  • label with attribute: for=”country” and text: “Country: “
  • select with attributes: id=”country”, name=”country” and the following options:
    • option with text “Choose a country“
    • option with attribute: value=”brazil” and text: “Brazil“
    • option with attribute: value=”france” and text: “France“
    • option with attribute: value=”japan” and text: “Japan“
    • option with attribute: value=”libya” and text: “Libya“
    • option with attribute: value=”usa” and text: “U.S.A.“
• Add a seventh div below the previous one. Inside this div, add the following elements:
  • label with attribute: for=”salary” and text: “Salary: “
  • span with attribute: class=”range-caption” and text “Poor”
  • input with attributes: type=”range”, id=”salary”, name=“salary”, min=”0″, max=”100″, value=”50″
  • span with attribute: class=”range-caption” and text: “Rich”

Part 5: Third Fieldset – Your Contact Information

• Create a third fieldset inside the form element. All the following elements in this part will go inside this fieldset.
• Add a legend with the text Your Contact Information.
• Below the legend, add a div element. Inside the div, add the following elements:
  • label with attribute: for=”email” and text: “Email: ” 
  • input with attributes: type=”email”, id=”email”, name=”email”, required
• Add a second div below the previous one. Inside this div, add the following elements:
  • label with attribute: for=”phone” and text: “Phone: “
  • input with attributes: type=”tel”, id=”phone”, name=”phone” 
• Add a third div below the previous one. Inside this div, add the following elements:
  • label with attribute: for=”address” and text: “Address: ” 
  • textarea with attributes: cols=”40″, id=”address”, name=”address” 
• Add a fourth div below the previous one. Inside this div, add the following elements:
  • label with text: “Contact method(s): ” 
  • input with attributes: type=”checkbox”, name=”contact”, id=”emailCheckbox”, value=”email”
  • label with attribute: for=”emailCheckbox” and text: “Email” 
  • input with attributes: type=”checkbox”, name=”contact”, id=”phoneCheckbox”, value=”phone”
  • label with attribute: for=”phoneCheckbox” and text: “Phone“

Part 6: Submit Input

• After the previous fieldset, add a div element. This div element should be a sibling element to the previous fieldsets, not inside any fieldset.
• Inside this div, add an input with attribute: type=”submit”
• After the closing tag for this div should be the closing tag of the entire form element.

At the end of Task 1, your assignment should look like this in the Chrome browser:

TASK 2: Apply visual styles using CSS

Now you will need to apply CSS to make the webpage look like the design given to you by the company. Below are important notes from the designer passed to you by the company. You must use this information in your work. 

Use an internal stylesheet – add your CSS rulesets inside a style element in the head of your document. Do not use inline styles.

• For the body element, set font-family to Verdana, Arial, sans-serif
• For all p elements, set margin to 0.
• For all legend elements, set background to purple, set border-radius to 10px, set color to white, set padding to 12px
• For all fieldset elements, set background to lavender, border to 10px solid darkblue, border-radius to 20px, margin-bottom to 10px, and width to 720px
• For all div elements, set margin to 10px
• For all label elements, set display to inline-block, text-align to right, vertical-align to top, width to 200px
• Create a ruleset with this selector:

input[type="radio"]+label, input[type="checkbox"]+label

• This selector targets all labels that are neighboring siblings of inputs with a type of radio or checkbox. While the code has been provided for you, please try to understand it before you continue.
• For all elements matching this selector, set width to auto. 
• For all elements with a .range-caption class, set background to darkcyan, color to white, padding to 6px, text-align to center
• For all input elements with a type of “submit” (hint: use an attribute selector), set background to darkcyan, border-radius to 10px, color to white, font-size to 20px, and padding to 12px.

At the end of Task 2, your assignment should look like this in the Chrome browser (note that the slider may look a little different on Windows and Mac machines, and that is acceptable):

TASK 3: Add interactive features

For this task, two types of interactive behavior need to be added. These interactive behaviors are demonstrated in the accompanying video.

• In the internal stylesheet, add a ruleset with this selector: use a pseudoclass of hover on all div elements. Add a declaration of color: blue.
• Add the following script element before the closing </body> tag. It is a link to a file containing JavaScript code. After this is added, the “Your Face” image will be immediately shown in the web page after the user uploads a file. The JavaScript code shows the selected image in the img element with id=”preview” that you added in Task 1 under the file input.  

<script src="https://url.nucamp.co/datingjs"></script>

• Test both the interactive features.