JavaScript Assignment

Dynamic Car Selector

Learning Objectives:

• Use DOM manipulation and event handling in JavaScript.
• Dynamically populate HTML elements based on user input.
• Apply conditional logic to update content in real time.

Task Overview:

Create a web page that allows users to select a car make and model using dropdown menus. When both are selected, the page displays the full car choice.

Instructions:

1. Set up your HTML structure with two <select> elements and an output area.
2. Style the page using CSS for layout and accessibility.
3. Write JavaScript functions:
   • populateModel() to update the model dropdown based on the selected make.
   • output() to display the selected make and model.
4. Test your page with different selections.

Extension Challenges (Optional):

• Add images of selected car models.
• Include a third dropdown for year or trim.
• Add a reset button to clear selections.

Assessment Rubric (10 points total):

Criteria	Points
HTML structure and accessibility	2
CSS styling and layout	2
JavaScript functionality	4
Output accuracy and clarity	1
Code readability and comments	1

Example Output