Create a star rating component that is fully interactive and dynamic using JavaScript. ```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">✭</li> <li class="star">✭</li> <li class="star">✭</li> <li class="star">✭</li> <li class="star">✭</li> </ul> <div class="output"></div> <script src="stars.js"></script> </body> ``` ```js 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.classListRemove("orange"); } }); } ) ``` test the code and let me know in the comments what the results were, as I'm curious to know 😉