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: Frontend Mentor
- Live Site URL: Github Pages
I've been using the same approach of building the outer container before diving up the smaller components of the design. The main thing I want to point out in the HTML/CSS front at least is how amazing flexbox is! I had used the display: table previously, and there was still some issues. The second I had switched to flexbox and had read up on resources, it was just so much easier to position things.
Another thing I want to point out is using display: none and display: block to toggle between the landing page and the submission page! I couldn't figure out how I was supposed to maintain the container size for both the landing and submission states, but I was able to use that as a way to move to another state.
After figuring out the HTML/CSS, I moved onto the JavaScript which was admittedly a lot harder as a lot of my programming knowledge is in Python for scripting and data science purposes. After browsing through some documentation and tutoritals though, I was able to configure an active state that lasted after the button press for the rating buttons and submissions to transfer the active button value to the submission page. Additionally, I added an alert to make sure the user selects some rating before being able to have a successful submission!
This was fun to learn! I'm excited for more JavaScript in my Full-Stack adventure!
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- JavaScript (jQuery specifically)
Main thing I want to highlight is the JavaSript I coded into the page. Here's the snippet:
$(document).ready(function()
{
$(".rating-scale button").click(function() {
$(".rating-scale button").removeClass('selected-button');
$(this).addClass('selected-button');
});
$(".submit-button").click(function() {
output = $(".rating-scale").find('.selected-button').val();
if (output === undefined)
{
alert("Please submit a value before you submit!");
return false;
}
$(".selected-value").text(output);
$(".landing-page").css("display", "none");
$(".submitted-page").css("display", "block");
});
});
I'm also proud that I finally have the design centered in the middle of the website regardless of the window size! Big win!
I couldn't figure out how to toggle the active state of the rating button after initially selecting it, so that's something I want to improve on afterwards.
- jQuery Examples from W3 - This helped me see how jQuery was typically used! A great reference for a quick learn.
- Frontend Mentor - @ilyemm
Big ups to Abdul Khalid for the tip about using flexbox to center the design on the website! He was the one that mentioned using the min-height: 100vh and flexbox combination to be able to center it properly.