UI for Insurance Policy Updates

[alang-dev]

The goal of this exercise is to create an HTML form that allows users to input policy changes (base salary, regional minimum wage, and start month) and store these values in local storage.

The exercise will help students practice HTML, CSS, JavaScript, and JSON.

1. HTML: Create Input Form

   • Create a form in index.html with the following fields:
     • Base Salary (input type: number)
     • Region (dropdown with options: Region I, Region II, Region III, Region IV)
     • Minimum Wage (input type: number)
     • Start Month (input type: month)
     • Submit Button
   • Ensure the form includes appropriate labels for each input field.

2. CSS: Style the Form

   • Add styling to styles.css to make the form user-friendly and visually appealing.
   • Ensure the form is responsive and looks good on different devices.

3. JavaScript: Handle Form Submission

   • Write JavaScript in script.js to handle form submission.
   • On submission, validate the inputs (ensure all fields are filled and values are positive numbers).
   • Create a JSON object to store the policy data.
   • Store the JSON object in local storage.

4. JavaScript: Retrieve and Display Stored Data

   • Write a function to retrieve stored policy data from local storage.
   • Display the stored data below the form in a readable format.

5. Testing: Add unit test and e2e testing for the form

   • Coverage is expected to be 100%

Resources:

• HTML Forms
• CSS Flexbox
• JavaScript Local Storage
• JSON