This is a solution to the Interactive rating component challenge on Frontend Mentor. I have been using Frontend Mentor challenges to help improving my coding, especially design 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" state after submitting a rating
- Semantic and accessible HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
While working through this project, I preferred manipulating the DOM with editing the relevant HTML class attribute and CSS property as hidden/visible with Javascript code rather than removing the DOM nodes and replacing them with the new ones. I learned doing so is a useful approach to have a lightweight workflow when it comes to extensive applications (i.e. websites)
Here are some useful code snippets from my work:
<div class="second-container hidden">
.hidden {
display: none;
}
submitButton.addEventListener("click", () => {
secondContainer.classList.remove("hidden");
firstContainer.style.display = "none";
});
- MDN Javascript Pathway - MDN's frontend developer pathway really helped me about understanding what the DOM is and how to manipulate it properly.
- css-tricks.com - This comprehensive site is an amaizing guide for getting better insight about CSS3. It enlightened me about the way how Flexbox layout concept is used.