Assignment 4: JavaScript, Forms, and Validation

Overview

Create an interactive webpage that displays a collection of predefined information, and then allows users to input more information of that type. The input from the user should first be validated, and then the page should be dynamically updated.

Folder Structure

Requirement Details

1. HTML Structure

• A <form> with at least three different types of input elements (for example: text, email, number, radio, checkbox, date, color, select).
• A submit button.
• An empty <div> or <ul> that will serve as an area for dynamically added content.

2. CSS

• At least 3 CSS rules (for example: style the labels, inputs, and dynamically added content).
• Must use an external stylesheet named style.css.

3. JavaScript

• Use an external javascript file. Remember to use the defer keyword to avoid trying to access the DOM before it has been created.
• Use document.querySelector and/or document.querySelectorAll to access form elements and read their value property to get what the user entered.
• Validation: On form submission:
  • Validate at least two aspects of the input manually:
    1. Make sure all fields have been given input
    2. Some other requirement (such as numbers being less than 10, or names having at least three characters, etc.).
  • If validation fails, display an error message in the DOM.
  • If validation passes, insert new DOM elements representing that information to the results area.
• Data representation: All data (including newly entered data) should be stored as an object in an array.

4. Theme

• A “guestbook” where visitors add their name, favorite color, and a short message.
• A “mini poll” that lets users input various bits of information and displays the results.
• A “task list" where users add tasks that appear in a list.

Example

See this complete example from class as an example. I have annotated the javascript with a ton of comments. You should definitely read them!

Submission

Your project must be accessible via this link:

https://your-username.github.io/csc336-fall2025/04-js-forms/