WDD 131: Dynamic Web Fundamentals

W05 Assignment: Product Review Form

Overview

Create product review form page using good form design given specific field requirements and submission confirmation with a counter. Ensure that the form is user friendly on both mobile and desktop screens.

Task

Build an HTML form with a confirmation page. The form must meet the given specifications listed in the instructions. The design is up to you but must meet good form design principles. Here is an example screenshot of what you will be building.

Activity Instructions

File and Folder Setup

1. Create a new file named "form.html".
2. Add supporting CSS files and JavaScript files as needed and place them into their appropriate folders.

HTML

1. Include the standard HTML head and body components required in this class and include the common footer content used on assignments.
2. The HTML form must have the following fields, attributes, and functionality:
   • Form
     • The form itself should use a method of "get" in order to be supported on GitHub
     • The action should reference a form submission, confirmation page named "review.html".
   • Product Name
     • Use a select element with an appropriate id attribute, name attribute, and set it to be required.
     • The first option in the select element is an instructional placeholder that says "Select a Product ..." and is disabled and selected so that it displays by default but cannot be clicked by the user.
     • The remaining options are created dynamically using a provided product array.
       Each option must have a value attribute that is the product name.

       A product array of objects is provided below to help you understand how to build a select field with the dynamic options. Normally the data would come from an external source.

   • Overall Rating
     • The overall product rating should have five levels (1 to 5) or stars.

       The example form uses star entities ☆ (☆) to display the level. You are free to employ a design of your choice. For example, here is another example of using stars that fill up on selection: Form Input Radio Star+ - CodePen.

     • Use a input of type radio for each of the levels.
     • The required attributes are an id, name (each of the radio buttons should have the same name value), and required

       Why should each of the radio buttons that are part of this rating have the same name value?

   • Date of Installation
     • Use a input of type date to allow the user to select the date the product was installed.
     • The required attributes are an id, name, and required
   • Useful Features
     • This field allows the user to select all the listed features that they found useful.
       This is a check all that apply field.
     • Use a input of type checkbox
     • Each checkbox should have an id, name, and value attribute.
   • Written Review
     • Use a textarea element to allow the user to write a review.
     • The required attributes are an id and name
     • The written review is not required by the user.
   • User Name
     • Use a input of type text for the user to enter their name.
     • Add the id and name attributes.
     • The user name entry is optional.
   • Form Submission Button
     • Use a input of type submit with an appropriate value that indicates the form action purpose.
3. Each form field must have an associated label.
4. Check that the keyboard tab order is correct.
5. Include the common footer content found on all assignments.

CSS

1. Use your own color schema and typography choices.
   You are responsible to practice good design principles of alignment, color contrast, proximity, repetition, and usability in all of your work.
2. Practice good design by laying out the form according to the principles you were taught in the HTML forms learning activity. You are responsible to create a visually appealing design that adheres to design principles that support usability and an overall positive user experience.

JavaScript

1. Use JavaScript to populate the Product Name options where the array's name field is used for the select option display and the array's id is used for the value field.
   Copy the following array of product objects into your JavaScript file to use as the data source.
   Product Array

   const products = [
     {
       id: "fc-1888",
       name: "flux capacitor",
       averagerating: 4.5
     },
     {
       id: "fc-2050",
       name: "power laces",
       averagerating: 4.7
     },
     {
       id: "fs-1987",
       name: "time circuits",
       averagerating: 3.5
     },
     {
       id: "ac-2000",
       name: "low voltage reactor",
       averagerating: 3.9
     },
     {
       id: "jj-1969",
       name: "warp equalizer",
       averagerating: 5.0
     }
   ];

2. Use localStorage to keep track of the number of reviews completed by the user client by adding a counter to the form submission review.html page. Every time that page is loaded successfully upon form submission, add one to the counter.

Testing

1. Continuously check your work by rendering the page locally using Live Server in VS Code.
2. Use the browser's DevTools to check for JavaScript runtime errors in the console or click the red, error icon in the upper right corner of DevTools.
3. Use DevTools CSS Overview to check your color contrast.
4. Generate the DevTools Lighthouse report and run diagnostics for Accessibility, Best Practices, and SEO in both the mobile and Desktop views.
   It is best to test your page in a Private or Incognito browser window.

Submission and Audit

1. Commit your local repository and push or upload your work to your GitHub Pages enabled wdd 131 repository on GitHub.
2. Use this ☑️ audit tool to self-check your work for some of the required HTML elements and CSS content. This audit tool is also used by the assessment team.
3. Share your work by posting your URL in the course's Microsoft Teams weekly forum and comment on your peers' work by providing constructive feedback.
4. Return to I-Learn and submit your the correct GitHub Pages enabled URL.

   https://your-github-username.github.io/wdd131/form.html