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.
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
- Solution URL: [https://github.com/Mridul07garg/Interactive_rating_component]
- Live Site URL: [https://mridul07garg.github.io/Interactive_rating_component/]
- Semantic HTML5 markup
- Flexbox
- JavaScript
- React - JS library
learned about Javascript querySelector and diffrent to get & put text;
<div class="container selection" >
<button class ="top" disabled><img src="./images/icon-star.svg" alt="Star"></button>
<h2>How did we do?</h2>
<p>Please let us know how we did with your support request. All feedback is appreciated
to help us improve our offering!</p>
<div class="set">
<button class ="noOf" name="1">1</button>
<button class ="noOf" name="2">2</button>
<button class ="noOf" name="3">3</button>
<button class ="noOf" name="4">4</button>
<button class ="noOf" name="5">5</button>
</div>
.set{
margin-top: 22px;
padding: 0px;
display: flex;
justify-content: space-between;
}
.noOf:active{
background-color: var(--orange);
color: var(--white);
}
for (var j = 0; j < ratings.length; j++)
{
if(ratings[j].classList.contains('selected'))
{
ratings[j].classList.remove('selected');
}
}
this.classList.add('selected');
button.addEventListener("click",function()
{
selection.style.display = 'none';
thankYou.style.display = 'flex';
span.innerHTML = btn;
});
JavaScript enabled projects
- [https://stackoverflow.com/questions/4838351/how-to-modify-a-css-display-property-from-javascript] - This helped me in manipulating display properties in java script.
- Website - [Mridul Garg]
- Frontend Mentor - @Mridul07garg
- Twitter - @MridulG27253526
- LinkenIn - @mridul-garg-072004