Frontend Mentor - Interactive rating component solution

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.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

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

• Plain Javascript with DOM manipulation
• CSS
• Flexbox

What I learned

Recap again the DOM manipulation, thinking about the simple way to make this done without overthink. Learned about whitespace in HTML, letter-spacing in CSS, not to use a:active for to change a colour of a my rating buttons and yes use focus. Training my eyes to copy a Design without the design guide.

a:focus {
  color: orange;
}

function submitRating() {
  if (clicked) {
    ratingCard.style.display = "none";
    thanksCard.style.display = "block";
    userRating.textContent = valueRating;

Continued development

Useful resources

• resource 1 - Where I understand more about style.display propriety in DOM manipulation
• resource 2 - Where I got hot to get a user rating value for DOM;
• Resource 3 - Where I got the information about link focus
• Resource 4 - about whitespace in HTML

Author

• Website - Cintia Siqueira
• Frontend Mentor - @ciisiq
• Twitter - @cii_siq

Acknowledgments

creating simple things is also important, keep going!