diff --git a/index.html b/index.html index f363d00c..6515de21 100644 --- a/index.html +++ b/index.html @@ -1,6 +1,6 @@ - + Rate your experience - - + +
+
+ + + + + +
+ +
0
+
+ diff --git a/project-structure.md b/project-structure.md index 0c09d9a3..1badf4af 100644 --- a/project-structure.md +++ b/project-structure.md @@ -3,6 +3,9 @@ ├── Code_of_Conduct.md ├── README.md ├── RatingStyle.css +├── auth.css +├── auth.html +├── auth.js ├── book.html ├── boy.png ├── chatbot.gif @@ -26,14 +29,9 @@ │ ├── logo2.png │ └── new-york-page.png ├── index.html -├── login.css -├── login.html -├── login.js ├── project-structure.md ├── project_structure.txt ├── script.js -├── signUp.css -├── signUp.html ├── star-rating.js └── style.css ``` diff --git a/project_structure.txt b/project_structure.txt index aa4aa30d..b57663cf 100644 --- a/project_structure.txt +++ b/project_structure.txt @@ -1,6 +1,9 @@ ├── Code_of_Conduct.md ├── README.md ├── RatingStyle.css +├── auth.css +├── auth.html +├── auth.js ├── book.html ├── boy.png ├── chatbot.gif @@ -24,13 +27,8 @@ │ ├── logo2.png │ └── new-york-page.png ├── index.html -├── login.css -├── login.html -├── login.js ├── project-structure.md ├── project_structure.txt ├── script.js -├── signUp.css -├── signUp.html ├── star-rating.js └── style.css \ No newline at end of file diff --git a/star-rating.js b/star-rating.js index 2f613711..e3d87750 100644 --- a/star-rating.js +++ b/star-rating.js @@ -1,9 +1,36 @@ -let star = document.querySelectorAll('input'); -let showValue = document.querySelector('#rating-value'); +document.addEventListener('DOMContentLoaded', () => { + const starContainer = document.querySelector('.star-rating'); + const stars = document.querySelectorAll('.star'); + const showValue = document.querySelector('#rating-value'); -for(let i = 0; i < star.length; i++) { - star[i].addEventListener('click', function() { - let selectedRating = this.value; - showValue.innerHTML = selectedRating; // Only show the rating value + if (!starContainer) { + console.error('Star rating container not found'); + return; + } + + if (!stars.length) { + console.error('No star rating inputs found'); + return; + } + + if (!showValue) { + console.error('Rating value display element not found'); + return; + } + + starContainer.addEventListener('change', (event) => { + if (event.target.matches('input')) { + const selectedRating = event.target.value; + console.log('Selected rating:', selectedRating); + + showValue.textContent = `You rated this ${selectedRating} star${selectedRating !== '1' ? 's' : ''}`; + + // Update visual state of stars + stars.forEach((star) => { + star.checked = star.value <= selectedRating; + }); + } }); -} \ No newline at end of file + + console.log('Star rating initialization complete'); +});