Final C Products Page
Overview
For this module, you will build out the Products page of your site to meet the following criteria.
Objectives
At the end of this module, you should be able to...
- Implement dynamic dialogues [unit9]
- Use tailwindcss to style the background behind a modal dialogue [unit9]
AI Assist
Use AI to generate copy
PROMPT: Can you give me a JSON file with information for a restaurant serving hamburgers, French fries, shakes, and salads? Include an item number, title, description, image URL, serving size in ounces, Carbohydrates in grams, calories in grams and cost in US dollars
Tasks
- Try AI generated food images
- Reference Dialog Modal for additional information
- Reference for styling the modal background
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 small screen with opened modal dialogue
- View the medium screen version
- View the medium screen with opened modal dialogue
- View the large screen version
- View the large screen with opened modal dialogue
Assignment Checklist
Final C Products Page (10 pts)
Main
The main tag should contain the following
- Build a JSON file that contains at least 6 products
- Use JS to add these as cards on your products page
- Add a learn more button to each card that opens a dynamic dialog popup
- Build and style a generic dialog in your html
- When clicked, automatically populate the dialog with information from the JSON file
- Style everything with Tailwind
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