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: Frontendmentor.io
- Live Site URL: fsuropaty.github.io
- Tailwind CSS
- Vanilla JS
- Mobile-first workflow
I learned about get the value of radio button and change the content using innerHTML
function getValue() {
var getSelectedValue = $('input[name="rating"]:checked');
return getSelectedValue.value;
}
function renderDOM() {
$("#rating-card").innerHTML = `
<div id="thank-you" class="grid gap-8 text-center ">
<div class="flex items-center justify-center">
<img src="./images/illustration-thank-you.svg" alt="" />
</div>
<div>
<label class="text-orange rounded-full bg-Dark-Blue p-2 px-4 text-Orange my-8">
You selected ${getValue()} out of 5
</label>
</div>
<h1>Thank you!</h1>
<p>
We appreciate you taking the time to give a rating. If you ever need
more support, don't hesitate to get in touch!
</p>
</div>`;
}
- Website - fsuropaty
- Frontend Mentor - @fsuropaty