cleanup

2021-11-25 19:55:16 +05:30
parent 1db7080e34
commit 534252fbfa
1 changed files with 0 additions and 55 deletions
@@ -1,55 +0,0 @@
 <!DOCTYPE html>
 <html>
 <head>
    <title>Star Rater</title>
    <style>
        .stars ul {
            list-style-type: none;
            padding: 0;
        }
        .star {
            font-size: 2em;
            color: #ddd;
            display: inline-block;
        }
        .orange {
            color: orange;
        }
        .output {
            background-color: #ddd;
        }
    </style>
 </head>
 <body>
    <ul class="stars">
        <li class="star">&#10029;</li>
        <li class="star">&#10029;</li>
        <li class="star">&#10029;</li>
        <li class="star">&#10029;</li>
        <li class="star">&#10029;</li>
    </ul>
    <div class="output"></div>
    <script>
        const starsUL = document.querySelector('.stars');
        const output = document.querySelector('.output');
        const stars = document.querySelectorAll('.star');
        stars.forEach((star, index) => {
            star.starValue = (index + 1);
            star.addEventListener('click', starRate);
        })
        function starRate(e) {
                output.innerHTML = `You Rated this ${e.target.starValue} stars`;
                stars.forEach((star, index) => {
                if (index < e.target.starValue) {
                    star.classList.add('orange');
                } else {
                    star.classList.remove('orange');
                }
            })
        }
    </script>
 </body>
 </html>