Skip to content

Commit

Permalink
Revert "updated ui of stars rate me buttons"
Browse files Browse the repository at this point in the history
PriyaGhosal authored Oct 9, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent ce74cc7 commit 797683d
Showing 4 changed files with 26 additions and 54 deletions.
23 changes: 9 additions & 14 deletions index.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
@@ -712,22 +712,17 @@ <h2>Rate your experience</h2>
<label for="destination">Destination/Service:</label>
<input type="text" id="destination" name="destination" required />

<label>Rating:</label>
<div class="rating-container">
<div class="star-buttons">
<button type="button" class="star-btn" data-rating="5"></button>
<button type="button" class="star-btn" data-rating="4"></button>
<button type="button" class="star-btn" data-rating="3"></button>
<button type="button" class="star-btn" data-rating="2"></button>
<button type="button" class="star-btn" data-rating="1"></button>
</div>
<input type="hidden" id="rating" name="rating" required>
<div id="rating-value">0</div>
</div>
<label for="rating">Rating:</label>
<select id="rating" name="rating">
<option value="5">⭐⭐⭐⭐⭐</option>
<option value="4">⭐⭐⭐⭐</option>
<option value="3">⭐⭐⭐</option>
<option value="2">⭐⭐</option>
<option value="1"></option>
</select>

<label for="review">Your Review:</label>
<textarea id="review" name="review" rows="4" required></textarea>

<label for="complaint">Complaint (if any):</label>
<textarea id="complaint" name="complaint" rows="3"
placeholder="Describe any issue with the staff here. Please explain every single detail ex:location,name of the person"></textarea>
8 changes: 5 additions & 3 deletions project-structure.md
Original file line number Diff line number Diff line change
@@ -3,9 +3,6 @@
├── Code_of_Conduct.md
├── README.md
├── RatingStyle.css
├── auth.css
├── auth.html
├── auth.js
├── book.html
├── boy.png
├── chatbot.gif
@@ -29,9 +26,14 @@
│ ├── 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
```
8 changes: 5 additions & 3 deletions project_structure.txt
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
├── Code_of_Conduct.md
├── README.md
├── RatingStyle.css
├── auth.css
├── auth.html
├── auth.js
├── book.html
├── boy.png
├── chatbot.gif
@@ -27,8 +24,13 @@
│ ├── 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
41 changes: 7 additions & 34 deletions star-rating.js
Original file line number Diff line number Diff line change
@@ -1,36 +1,9 @@
document.addEventListener('DOMContentLoaded', () => {
const starContainer = document.querySelector('.star-rating');
const stars = document.querySelectorAll('.star');
const showValue = document.querySelector('#rating-value');
let star = document.querySelectorAll('input');
let showValue = document.querySelector('#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;
});
}
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
});

console.log('Star rating initialization complete');
});
}

0 comments on commit 797683d

Please sign in to comment.