/interactive-rating-component

Primary LanguageCSS

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

Screenshot

Links

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox

What I learned

<div class="rating">
  <button class="rate" id="one">1</button>
  <button class="rate" id="two">2</button>
  <button class="rate" id="three">3</button>
  <button class="rate" id="four">4</button>
  <button class="rate" id="five">5</button>
</div>
<button class="submit">submit</button>
.container, .rating, .icon ,.ratingMessage {
  display: flex;
}

.container, .containerThank {
  gap: 1.3125rem;
  flex-direction: column;
  background-color: var(--clr-Dark-Blue); 
  width: 25rem;
  padding: 2rem;
  border-radius: 1.875rem;
}

.submit, .rate {
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
$('.rate').click( (el) => {
    let options = document.getElementsByClassName('rating')[0].children;

    for (let i = 0; i < options.length; i++)
    {
        if (options[i] == el.target)
        {
            rate = i + 1;
        }
        $(options[i]).css("background-color","var(--clr-Light-Blue)");
    }
    // el.target.style.background = 'var(--clr-Light-grey)';
    $(el.target).css("background-color","var(--clr-Light-grey)");
});

Continued development

responsive web design, layout [focal point, white space and hierarchy] and advance javacript

Author

Acknowledgments

Thanks to Frontend Mentor my skill will improve