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

• Author

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

• Live Site URL: Live Demo

My process

Built with

• Semantic HTML5 markup

• CSS custom properties

• Flexbox

• CSS Grid

• Mobile-first workflow

• JavaScript and DOM manipulation

What I learned

The main most challenging part of this challenge was to hide the radio input inside the label tag in a way that didn't afected the positioning of the number, after some test I could finally get the result using the opacity.

This is an example of this:

Function to create dynamically the labels

const  createRatings = (amount = 5) => {

	for (let  index = 1; index <= amount; index++) {

		const  label = document.createElement('label');

		label.classList.add('form__rating');

		label.for = `rating-${index}`;

		label.innerHTML = `
		<span class="form__rating__text">${index}</span>
		<input type="radio" name="form__rating__input" id="rating-${index}" class="form__rating__radio" value="${index}">
		`
		formBody.append(label);
	}
}

This is how the labels look on HTML

<label  class="form__rating">
	<span  class="form__rating__text">4</span>
	<input  type="radio"  name="form__rating__input"  id="rating-4"  class="form__rating__radio"  value="4">
</label>

The CSS class to hide the radio input

.form__rating__radio {
	opacity: 0;
}

Author

• Frontend Mentor - @cacosted

• Twitter - @cacosted