Interactive Rating

The 5-star rating system allows respondents to rank their feedback on a 5-point scale from 1 to 5 star. This project made with HTML, CSS and JavaScript.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
• Front End Style
• Colors
• Typography

Overview

The challenge

Users should be able to:

• View the optimal layout for the app depending on their device's screen size
• See hover states for all interactive elements on the page
• Select and submit a number rating
• See the "Thank you" card state after submitting a rating

Screenshot

Links

• Solution URL: Add solution URL here
• Live Site URL: Add live site URL here

My process

Built with

• Semantic HTML5 markup
• CSS, Sass
• Flexbox
• Desktop First Workflow
• JavaScript Array forEach()
• HTML DOM Element addEventListener()
• If else Statement

Front-end Style Guide

Layout

The designs were created to the following widths:

• Mobile: 375px
• Desktop: 1440px

Colors

Primary

• Orange: hsl(25, 97%, 53%)

Neutral

• White: hsl(0, 0%, 100%)
• Light Grey: hsl(217, 12%, 63%)
• Medium Grey: hsl(216, 12%, 54%)
• Dark Blue: hsl(213, 19%, 18%)
• Very Dark Blue: hsl(216, 12%, 8%)

Typography

Body Copy

• Font size (paragraph): 15px

Font

• Family: Overpass
• Weights: 400, 700