Final D Order Page

Overview

For this module, you will build out the order page of your site to meet the following criteria.

Objectives

At the end of this module, you should be able to...

• Display tags based on a class assigned to a parent element [new]
• Add event listeners to a dynamically built buttons [previous class]

Tasks

• Reference for changing SVG stroke color
• Reference for Hero icons from Tailwind
• Site for cleaning up existing svg icons

Watch

• Building the Assignment
• Watch 2620_01a Video
• Watch 2620_01b Video
• Watch 2620_01c Video

Assignment Example

• View the small screen version
• View the medium screen version
• View the large screen version

Assignment Checklist

Final D Order Page (10 pts)

Main

The main tag should contain the following

• Dynamically display all the items from the products page
• Add a button that allows them to be added to the order
• Adding to the order dis-lays a checkmark on the card
• Cards are displayed in multiple columns
• A Checkout button with a hover color change is displayed (does not need to work)

Design Principle Requirements

Your page needs to meet these requirements

• Passes the HTML W3C HTML validator
• Passes the WAVE Accessibility test with no contrast errors
• Does not contain any Visual Tangent errors (items touching the screen edge)
• Page is responsive from 320px to 1600px
• Page does not have horizontal scrolling at any page width

Grade

In order to receive a grade for this assignment you must earn 90% of the points listed above.

• Pass
• Fail