Unit08 Customer Reviews

Overview

In this module, you will build customer reviews and use JS ternary operator to style the stars.

Objectives

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

Use Adobe Illustrator to build a star shape
Use VS Code to simplify the SVG
Use a ternary operator to display one of two stars
Use AI to generate 10 customer reviews
Style the page with tailwind classes
Display the reviews in multiple columns

AI Assist

Use AI to built customer reviews

PROMPT: Please give me a JSON formatted file of 10 Gym reviews including reviewer's name, rating out of 5 stars and comment

Tasks

Reference for Conditional (ternary) operator

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

Unit08 Customer Reviews (10 pts)

html head tag

The head tag should contain the following

Link to a favorite icon
Link to a stylesheet
Include a viewport meta tag
Include a page title

Data

Build a JS file with JSON data for the reviews
Data shoull contan name, rating and comment
Dynamically add these reviews to the page using JS append
Dynamically display the stars based on the rating

Main

The main tag should contain the following

Styling done using only Tailwind classes
Display ten customer reviews on a topic of your choice
Dynamically display stars of different colors based on the JSON data
Use Tailwind responsive classes to display reviews in various numbers of columns

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