This is a solution to the Interactive rating component challenge on Frontend Mentor.
This challenge is to design and build an interactive rating component for web desktop & mobile. It will be my first time using JS for a project after spending a few months gaining confidence in front-end styling skills.
My focus here is to write good and functioning JS that is clear, concise and uncomplicated.
🧩 Live Site URL
✏️ Solution URL
⚙️ Semantic HTML5 markup
⚙️ CSS
⚙️ Desktop-first workflow
⚙️ Sass
⚙️ JavaScript
- HTML
- Import resets Sass
- I originally had the rating buttons in an
<ul>until I learnt about Forms with Input type Buttons. - Learnt about HTML forms and JS Event Listeners
- Learnt about how to listen for an event and trigger a function upon Submit.
- Added more JS with variables to get the You chose X to work
- Had duplicate text, so edited See below
- Could add a Please choose a rating if Submit is hit on its own but can't figure this out right now...
Estimation: 8-10hrs
⏰ Desktop: ⏰ Mobile:
.querySelectorvs..getElementByID.- Event Listeners vs. Event Handlers.
- Callback functions as functions that take place within/after another.
event.preventDefault()- In JS, we refer to class names with a dot.
- Link to JS in
<head>section of HTML, using<script>tag andsrc=attribute. - Application of Scope -
"Scope: By declaring selectedRating within the function, we make sure that it is scoped to that function and gets updated each time the event listener runs. If it were declared outside the function, it might not correctly reflect the user's current selection on subsequent submissions... Declaring selectedRating inside the function ensures that we always work with the most up-to-date selection made by the user."
- Setting Text Content: You can also use .textContent to replace the existing text within an element. for
.textContentmethod. You selected ${selectedRating.value} out of 5;`
How to create a Horizontal List in HTML ? HTML Forms Pure CSS Custom Styled Radio Buttons READ! Introduction to the DOM READ! JavaScript Forms
TO DO
/ Style the default state to completion / Style the thank-you state to completion