Rate Anything

Rate Anything

body { font-family: sans-serif; margin: 20px; } .input-area { margin-bottom: 20px; } .input-area input { padding: 8px; margin-right: 10px; } .input-area button { padding: 8px 15px; } .item { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding: 10px; border: 1px solid #ccc; } .item-name { flex-grow: 1; } .rating-area { display: flex; align-items: center; } .rating { display: flex; gap: 5px; margin-right: 10px; } .star { cursor: pointer; font-size: 20px; color: lightgray; } .star.rated { color: gold; } .overall-rating { margin-left: 10px; font-weight: bold; } document.addEventListener('DOMContentLoaded', function () { const itemInput = document.getElementById('itemInput'); const addItemBtn = document.getElementById('addItemBtn'); const itemsList = document.getElementById('itemsList'); let items = loadItems(); renderItems(); addItemBtn.addEventListener('click', addItem); function addItem() { const itemName = itemInput.value.trim(); if (itemName) { items.push({ name: itemName, rating: 0, ratings: [], overallRating: 0 }); saveItems(); renderItems(); itemInput.value = ''; } } function renderItems() { itemsList.innerHTML = ''; items.forEach((item, index) => { const itemDiv = document.createElement('div'); itemDiv.classList.add('item'); const itemNameSpan = document.createElement('span'); itemNameSpan.classList.add('item-name'); itemNameSpan.textContent = item.name; const ratingAreaDiv = document.createElement('div'); ratingAreaDiv.classList.add('rating-area'); const ratingDiv = document.createElement('div'); ratingDiv.classList.add('rating'); let currentRating = 0; for (let i = 1; i <= 5; i++) { const starSpan = document.createElement('span'); starSpan.classList.add('star'); starSpan.textContent = '★'; if (i <= item.rating) { starSpan.classList.add('rated'); } starSpan.addEventListener('click', () => { currentRating = i; resetStars(ratingDiv); for (let j = 1; j <= currentRating; j++) { ratingDiv.children[j - 1].classList.add('rated'); } }); ratingDiv.appendChild(starSpan); } const submitButton = document.createElement('button'); submitButton.textContent = 'Submit'; submitButton.addEventListener('click', () => rateItem(index, currentRating)); const overallRatingSpan = document.createElement('span'); overallRatingSpan.classList.add('overall-rating'); overallRatingSpan.textContent = `Overall: ${item.overallRating.toFixed(1)} (${item.ratings.length} ratings)`; ratingAreaDiv.appendChild(ratingDiv); ratingAreaDiv.appendChild(submitButton); ratingAreaDiv.appendChild(overallRatingSpan); itemDiv.appendChild(itemNameSpan); itemDiv.appendChild(ratingAreaDiv); itemsList.appendChild(itemDiv); }); } function resetStars(ratingDiv) { for (let star of ratingDiv.children) { star.classList.remove('rated'); } } function rateItem(index, rating) { if (rating > 0) { items[index].ratings.push(rating); items[index].overallRating = calculateOverallRating(items[index].ratings); items[index].rating = rating; // Keep the last given rating for visual feedback saveItems(); renderItems(); } } function calculateOverallRating(ratings) { if (ratings.length === 0) return 0; const sum = ratings.reduce((a, b) => a + b, 0); return sum / ratings.length; } function saveItems() { localStorage.setItem('ratedItems', JSON.stringify(items)); } function loadItems() { const storedItems = localStorage.getItem('ratedItems'); return storedItems ? JSON.parse(storedItems) : []; } });