Last active
June 11, 2024 17:48
-
-
Save slim-python/11a69ec56314cad5466c0e5c00017ad2 to your computer and use it in GitHub Desktop.
Star rating system in html css javascript
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body> | |
| <script type="module" src="/main.js"></script> | |
| <div> | |
| Toatal Rating: | |
| <span id="totalCount"> 0/5</span> | |
| </div> | |
| <section id="ratings"> | |
| <div class="star">⭐</div> | |
| <div class="star">⭐</div> | |
| <div class="star">⭐</div> | |
| <div class="star">⭐</div> | |
| <div class="star">⭐</div> | |
| </section> | |
| </body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import './style.css'; | |
| let totalRatings = 0; | |
| const stars = document.querySelectorAll('.star'); | |
| stars.forEach((item, index) => | |
| item.addEventListener('click', () => { | |
| totalRatings = index + 1; | |
| updateRating(); | |
| }) | |
| ); | |
| function updateRating() { | |
| stars.forEach((star, index) => { | |
| index < totalRatings | |
| ? star.classList.add('active') | |
| : star.classList.remove('active'); | |
| }); | |
| document.querySelector('#totalCount').textContent = `${totalRatings}/5`; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :root { | |
| font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; | |
| line-height: 1.5; | |
| font-weight: 400; | |
| color-scheme: light dark; | |
| color: rgba(255, 255, 255, 0.87); | |
| background-color: #242424; | |
| font-synthesis: none; | |
| text-rendering: optimizeLegibility; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| #ratings { | |
| display: flex; | |
| margin-top: 1rem; | |
| } | |
| .star { | |
| filter: grayscale(1); | |
| } | |
| .star.active { | |
| filter: grayscale(0); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment