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: GitHub repository
• Live Site URL: Live site from GitHub

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• @media screen for breakpoints
• JS DOM

What I learned

Using shadow inside of a button to give the user a feeling when it's activated.

.btn-submit:active {
  box-shadow: inset 0 0 5px var(--dark-blue);
}

To use min or max-width/height in different ways to define a tile with it's content, but also make sure that the tiles look the same, without content loss.

.content-tiles {
  display: grid;
  place-content: center;
  padding: 2rem 1rem;
  gap: 1.5rem;

  max-width: min-content;
  min-height: 25rem;
}

p {
  min-width: 31ch;
}

.rating-response {
  min-width: fit-content;
}

Creating an array from a selected html element with css selector like structure(like here with input elements in the wrapper-rating), to then work with it.

const inputList = Array.from(
  document.querySelectorAll(".wrapper-rating input")
);

Continued development

I want to focus more on placement of the html content with css. And also want to increase the html semantic knowledge about forms and its respective elements. In addition working more with input and label elements witht the help of the CSS Tricks article (See Useful resources).

Useful resources

• CSS Tricks: HTML Inputs and Labels: A Love Story - This helped me a lot to understand the interaction between input and label elements and gave me the push to overthink my html structure.

Author

• GitHub Page - Daniel Kull
• Frontend Mentor - @danielkull

Acknowledgments

My thanks goes again to the Coding-bootcamps-eu, it's teachers and fellow students. Also a special thanks to Amber Wilson's article, about Inputs and Labels on CSS Tricks, which gave me a deeper understanding.