- This is a simple interactive rating interface.
- Solution URL: Frontend Mentor
- Live Site URL: Interactive Rating
- I wanted to try Sass and see how it is different from SCSS so I looked up the formatting and basic Sass functions.
- I began adding HTML components and styling them right away with Sass.
- After figuring out how to switch between the input and result menus, I worked with the buttons using JavaScript.
- The first challenge was how to keep the result of the rating buttons in order to display it on the result menu. I was thinking of using JavaScript to listen for
onClick
event and label the button with selected while unselecting the previously selected button. I figured out a better way is to use radio buttons of HTML, which is more convenient since I don't have to use JavaScript to unselect the other buttons. - The second challenge is how to deploy the result menu. I was thinking of creating a new HTML file for the result menu which was quite tedious but I figured out another way is to use Sass and label the result menu with
display: none
.
- HTML
- Sass
- JavaScript