This is a solution to the Interactive rating component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
- Solution URL: Interactive Rating Component (SASS + JS + Mobile-first + BEM) | Frontend Mentor
- Live Site URL: https://interactive-rating-component-melvinhdz.vercel.app/
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
- Semantic HTML5 markup
- Mobile-first approach
- Vanilla JavaScript
- Flex Layout
- BEM naming convention
- SASS - Sass modules
- Frontend Mentor - @melvinaguilar
When using sass
in order to build this solution
- Install
sass
if not yet installed:
npm install -g sass
- Run build command from command line:
sass assets/sass/main.scss assets/css/style.css
- If you want to edit the code and test, in the root folder of this repository, run this command from the command line:
sass --watch assets/sass/main.scss assets/css/style.css
.
├── assets
│ ├── css
│ │ ├── style.css
│ │ └── style.css.map
│ ├── images
│ │ ├── bg-pattern-quotation.svg
│ │ ├── favicon-32x32.png
│ │ ├── icon-star.svg
│ │ └── illustration-thank-you.svg
│ ├── js
│ │ └── main.js
│ └── sass
│ ├── abstracts
│ │ ├── _animations.scss
│ │ ├── _mixins.scss
│ │ └── _variables.scss
│ ├── base
│ │ ├── _page.scss
│ │ └── _reset.scss
│ ├── component
│ │ ├── _attribution.scss
│ │ ├── _buttons.scss
│ │ ├── _headings.scss
│ │ ├── _rating-form.scss
│ │ └── _screen-reader.scss
│ ├── layout
│ │ └── _card.scss
│ └── main.scss
├── design
│ ├── active-states.jpg
│ ├── desktop-design.jpg
│ ├── desktop-preview.jpg
│ ├── desktop-thank-you-state.jpg
│ ├── mobile-design.jpg
│ ├── mobile-thank-you-state.jpg
│ └── screenshot.png
├── index.html
└── README.md