Unit09 Modal Dialogues

Overview

In this module, you will.

Objectives

In this module we will build a dynamic modal dialogue box that gets populated by data from a JSON formatted file.

• Dynamically build cards with a button that activates a modal dialogue.
• Style the background of a dialobue box.
• Build the cards using JS from a JSON formatted file.
• Populate a modal using data attached to an element

AI Assist

Use AI to built customer reviews

PROMPT: Please give me a JSON formatted document of 10 best noir films from 1940, including the production studio, primary actors, year released, budget, description and image path. Tasks

Tasks

• Reference for The Dialog element
• Reference for Background Blur
• Reference for Background Brightness
• Reference for Background Contrast
• Reference for Background Grayscale
• Reference for Background Invert
• Reference for Background Saturate
• Reference for Background Sepia

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

Unit09 Modal Dialogues (10 pts)

html head tag

The head tag should contain the following

• A link to a stylesheet

Data

• Build a JSON formatted file containing at least 8 items with an image reference and 5 additional information elements

Main

The main tag should contain the following

• A section with an id to dymanically display the cards from the JSON file
• A reusable dialogue modal that is populated with dynamic JS and styled using tailwind.
• The modal has a close button with a hover class appled.
• Cards are displayed in variousnumbers of columns depending on the screen width.
• A background effect is used when the modal is displayed.

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