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.

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.
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:
Set the action attribute to "https://us-central1-nucamp-production.cloudfunctions.net/post/formdata".
Set the method attribute to "post".
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: