How does the star rating JavaScript project work?

The star rating uses five span elements each with a data-value attribute (1–5). document.querySelectorAll('.star') selects all five as a NodeList. Each span gets a click event listener via forEach(). When clicked, getAttribute('data-value') reads the star's value and stores it in a rating variable. The updateStars() function loops all stars, removes the 'active' CSS class from each, then adds it back to any star with data-value ≤ the current rating — filling all stars up to the clicked one gold. An emojis array ['Sad', 'Frowning', 'Neutral', 'Smile', 'Grinning'] maps rating 1–5 to feedback text via emojis[rating - 1], updated with textContent. The reset button sets rating to 0 and calls updateStars(), removing all active classes since no data-value is ≤ 0.

How do you use data attributes in JavaScript?

HTML data attributes store custom information using the data-* naming convention: ★ . In JavaScript, read them with element.getAttribute('data-value') which returns the string '3'. Alternatively use the dataset API: element.dataset.value — automatically strips 'data-' prefix and converts kebab-case to camelCase. To set: element.setAttribute('data-value', '5') or element.dataset.value = '5'. Data attributes are ideal for storing extra values on DOM elements without non-standard attributes — commonly used in rating systems, carousel indices, filter values, and modal targets.

How does classList.add() and classList.remove() work in JavaScript?

classList is a DOM property returning a DOMTokenList of CSS classes on an element. Key methods: element.classList.add('active') adds the class if absent. element.classList.remove('active') removes it if present — no error if missing. element.classList.toggle('active') adds if absent, removes if present. element.classList.contains('active') returns true or false. In the star rating, updateStars() first calls classList.remove('active') on every star (reset all to grey), then classList.add('active') on stars with data-value ≤ current rating (fill gold). This two-step reset-then-set pattern is standard for any exclusive selection UI: tabs, nav items, step indicators, radio buttons.

How do you create a glowing CSS effect with text-shadow?

CSS text-shadow creates a glow when the blur radius is large and the color matches the text. Syntax: text-shadow: offsetX offsetY blurRadius color. For a glow, use 0 for both offsets: text-shadow: 0 0 15px gold. The zero offsets create a perfectly centered halo with no directional shadow; the 15px blur spreads gold in all directions. Multiple layered shadows increase intensity: text-shadow: 0 0 5px gold, 0 0 15px gold, 0 0 30px rgba(255,215,0,0.7). In the star rating: .star.active { color: gold; text-shadow: 0 0 15px gold; } makes the ★ character glow. The same technique works for neon sign effects, fire text, and ice text.

How do you use querySelectorAll() and forEach() on a NodeList?

document.querySelectorAll(selector) returns a NodeList of all matching elements — always a collection, never null. NodeList supports forEach() directly: const stars = document.querySelectorAll('.star'); stars.forEach(star => { star.addEventListener('click', handler); }). Important: NodeList is NOT an Array — it lacks map(), filter(), reduce(). Convert with Array.from(stars) or [...stars] to use those methods. Common patterns: querySelectorAll('.card').forEach(card => card.classList.add('visible')) — add class to all matching elements. querySelectorAll('input').forEach(input => input.value = '') — reset all inputs. The forEach callback receives (element, index, nodeList).

How do you map array values to display text in JavaScript?

Mapping integer values to display text with an array avoids switch/case chains. Create an array where the index corresponds to the value: const emojis = ['Sad', 'Frowning', 'Neutral', 'Smile', 'Grinning']. Arrays are zero-indexed, so rating 1 maps to emojis[0] = 'Sad', rating 5 maps to emojis[4] = 'Grinning' — hence emojis[rating - 1]. For non-consecutive values use an object: const labels = { 1: 'Very Bad', 3: 'Okay', 5: 'Excellent' }. Array lookup is O(1) and most readable for small consecutive ranges — standard in rating systems, difficulty selectors, and progress step labels.

How do you reset a JavaScript UI component to its initial state?

Resetting a UI component uses a reset button event listener that restores all state variables and re-renders. Pattern: (1) Store initial values. (2) Create a reset function that sets all mutable state back to initial values. (3) Call the render/update function to reflect the reset in the DOM. (4) Attach to button click. In the star rating: resetBtn.addEventListener('click', () => { rating = 0; updateStars(); emoji.textContent = 'Neutral'; }). updateStars() removes 'active' from all stars when rating is 0 because no data-value is ≤ 0 — all stars revert to grey automatically. A reset function should reuse the same render logic used for normal state changes — never special-case DOM manipulation.

What is the difference between textContent and innerHTML in JavaScript?

textContent reads and writes plain text only — HTML tags are treated as literal characters, not parsed. element.textContent = ' Hi ' renders the literal string Hi as visible text. innerHTML reads and writes HTML markup — tags are parsed and rendered. element.innerHTML = ' Hi ' renders bold Hi. Performance: textContent is faster. Safety: textContent is safe against XSS — user input cannot inject scripts through it. innerHTML can execute injected scripts if used with untrusted input. Use textContent for plain text values (numbers, labels, emoji names). Use innerHTML only when inserting HTML markup from a trusted source. In the star rating, emoji.textContent = emojis[rating - 1] is correct — values come from a trusted internal array.

How do you add hover preview to a star rating in JavaScript?

Adding hover preview (stars highlight up to the hovered star) uses mouseover and mouseleave events: stars.forEach(star => { star.addEventListener('mouseover', () => { const hoverVal = star.getAttribute('data-value'); stars.forEach(s => { s.classList.toggle('hover', s.getAttribute('data-value') { stars.forEach(s => s.classList.remove('hover')); }); }); Style .star.hover the same as .star.active for visual consistency. On click, the permanent rating is set and updateStars() applies the 'active' class independently of hover state. The Coodeverse star rating omits hover preview for simplicity — adding it is the natural first extension exercise.

What JavaScript skills does the star rating project teach?

The star rating project teaches seven core vanilla JavaScript skills: (1) document.querySelectorAll() — selecting multiple DOM elements as a NodeList. (2) NodeList.forEach() — iterating elements to attach event listeners or modify classes. (3) element.addEventListener('click', callback) — click handlers on interactive elements. (4) element.getAttribute('data-value') — reading HTML data attributes. (5) element.classList.add() and classList.remove() — dynamically applying and removing CSS classes. (6) Array indexing with computed offset — emojis[rating - 1] for mapping integers to display text. (7) element.textContent — updating displayed text from JavaScript. These seven skills are the foundation of all vanilla JavaScript UI component development — every interactive widget (tabs, accordions, carousels, modals, form validators) uses this exact combination.

Star Rating JavaScript | Interactive Gold Glow Stars Emoji Feedback Free HTML CSS JS 2025

Star Rating with Emoji Feedback — Free Interactive Gold Glow Stars, Vanilla JavaScript HTML CSS, querySelectorAll, classList, data-value Attribute, forEach, addEventListener, Array Indexing, textContent, CSS text-shadow Glow — Best Beginner JavaScript UI Component Project 2025 — Coodeverse Free Projects

The Coodeverse star rating project is the ideal first JavaScript UI component for beginners. It is compact enough to understand in a single reading (under 20 lines of JavaScript), practical enough to integrate directly into real projects (product reviews, feedback forms, surveys), and dense enough with foundational DOM skills to serve as the basis for every interactive component you build afterward. Star ratings appear on Amazon, Google Maps, Yelp, Airbnb, and virtually every review platform on the internet — building one from scratch makes the technology behind these everyday interactions transparent and understandable.

The component demonstrates the universal pattern for all vanilla JavaScript UI components: select elements with querySelectorAll, attach events with addEventListener via forEach, store state in a variable, update the DOM in a dedicated render function. The declarative render pattern used in updateStars() — always rebuild the full visual state from the state variable, never patch individual elements — is the same principle behind React's virtual DOM and Vue's reactivity system. Understanding it through 20 lines of vanilla JavaScript is more illuminating than any framework documentation.

The CSS gold glow uses text-shadow: 0 0 15px gold — zero offsets create a centered halo with no directional component, and the 15px blur spreads the gold color in all directions to simulate luminescence. This is the same technique used for neon sign effects, fire text, and glowing UI elements throughout modern web design. The transition on the emoji (transition: all 0.3s ease-in-out) adds polish — smooth changes feel responsive and alive rather than instant and mechanical.

From a skills perspective, the star rating is the entry point of the Coodeverse JavaScript project progression. It introduces seven core DOM manipulation skills: querySelectorAll, NodeList.forEach, addEventListener, getAttribute, classList.add/remove, array indexing, and textContent. Every project above it in the Coodeverse library — the RGB color game, the Facebook login clone, the dominoes game, the cursor dragon — builds directly on this same foundation. Mastering the star rating means every subsequent project feels like an extension of familiar patterns rather than a new set of APIs.

Frequently Asked Questions — Star Rating JavaScript Project

How does a star rating component work in JavaScript? Five span elements with data-value attributes 1–5 receive click listeners via querySelectorAll and forEach. On click, getAttribute reads the value, a state variable is updated, and updateStars() re-renders by removing and re-adding the 'active' class. The active class applies gold color and text-shadow glow.

What JS skills does the star rating teach? querySelectorAll, NodeList.forEach, addEventListener, getAttribute (data attributes), classList.add and remove, array indexing with computed offset, and textContent — the seven foundational skills of all vanilla JavaScript UI components.

How does CSS text-shadow create a glow? Using offsetX: 0 and offsetY: 0 eliminates the directional shadow; a large blur radius (15px+) spreads the color in all directions: text-shadow: 0 0 15px gold.

Is Coodeverse free? Yes — all projects, courses, compilers, and articles are completely free with no paywall, no subscription, and no login required, forever.

HTML

CSS

JavaScript

<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Star Rating with Emoji Feedback - Coodeverse</title> <style> body { font-family: Arial, sans-serif; background: #111; color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; } .stars { display: flex; cursor: pointer; font-size: 2.5rem; color: #444; margin-bottom: 20px; } .stars .star.active { color: gold; text-shadow: 0 0 15px gold; } .emoji { font-size: 5rem; margin: 20px 0; transition: all 0.3s ease-in-out; text-shadow: 0 0 15px #fff; } button { padding: 10px 20px; border: none; border-radius: 25px; background: #ff4747; color: white; cursor: pointer; font-size: 1rem; font-weight: bold; letter-spacing: 1px; transition: 0.3s ease-in-out; } button:hover { background: #ff2222; transform: scale(1.05); } </style>
</head>
<body> <div class="stars"> <span class="star" data-value="1">★</span> <span class="star" data-value="2">★</span> <span class="star" data-value="3">★</span> <span class="star" data-value="4">★</span> <span class="star" data-value="5">★</span> </div> <div class="emoji" id="emoji">Neutral</div> <button id="reset">RESET</button> <script> const stars = document.querySelectorAll(".star"); const emoji = document.getElementById("emoji"); const resetBtn = document.getElementById("reset"); let rating = 0; const emojis = ["Sad", "Frowning", "Neutral", "Smile", "Grinning"]; stars.forEach(star => { star.addEventListener("click", () => { rating = star.getAttribute("data-value"); updateStars(); emoji.textContent = emojis[rating - 1]; }); }); function updateStars() { stars.forEach(star => { star.classList.remove("active"); if (star.getAttribute("data-value") <= rating) { star.classList.add("active"); } }); } resetBtn.addEventListener("click", () => { rating = 0; updateStars(); emoji.textContent = "Neutral"; }); </script>
</body>
</html>

body { font-family: Arial, sans-serif; background: #111; color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0;
} .stars { display: flex; cursor: pointer; font-size: 2.5rem; color: #444; margin-bottom: 20px;
} .stars .star.active { color: gold; text-shadow: 0 0 15px gold;
} .emoji { font-size: 5rem; margin: 20px 0; transition: all 0.3s ease-in-out; text-shadow: 0 0 15px #fff;
} button { padding: 10px 20px; border: none; border-radius: 25px; background: #ff4747; color: white; cursor: pointer; font-size: 1rem; font-weight: bold; letter-spacing: 1px; transition: 0.3s ease-in-out;
} button:hover { background: #ff2222; transform: scale(1.05);
}

// ── DOM REFERENCES ──────────────────────────────────────────
// querySelectorAll returns ALL matching elements as a NodeList
// (querySelector returns only the first match)
const stars    = document.querySelectorAll(".star");
const emoji    = document.getElementById("emoji");
const resetBtn = document.getElementById("reset");

// ── STATE ────────────────────────────────────────────────────
// Tracks the selected rating. 0 = nothing selected.
let rating = 0;

// ── FEEDBACK TEXT MAP ────────────────────────────────────────
// Array indexed 0–4; accessed as emojis[rating - 1]
// rating 1 → emojis[0] = "Sad"  |  rating 5 → emojis[4] = "Grinning"
const emojis = ["Sad", "Frowning", "Neutral", "Smile", "Grinning"];

// ── ATTACH CLICK LISTENER TO EACH STAR ──────────────────────
// NodeList.forEach gives each star its own independent click handler
stars.forEach(star => {
  star.addEventListener("click", () => {
    // getAttribute reads the data-value HTML attribute (returns a string)
    rating = star.getAttribute("data-value");
    updateStars();                           // Re-render visual state
    emoji.textContent = emojis[rating - 1]; // Update feedback text
  });
});

// ── RENDER FUNCTION ──────────────────────────────────────────
// Called after every state change to sync the DOM with state.
// Two-pass pattern: (1) remove 'active' from all, (2) re-add to selected.
function updateStars() {
  stars.forEach(star => {
    star.classList.remove("active");         // Step 1: reset all to grey
    if (star.getAttribute("data-value") <= rating) {
      star.classList.add("active");          // Step 2: fill gold up to rating
    }
  });
}

// ── RESET ────────────────────────────────────────────────────
// rating = 0 → no star has data-value ≤ 0 → all stars lose 'active'
resetBtn.addEventListener("click", () => {
  rating = 0;
  updateStars();
  emoji.textContent = "Neutral";
});

Frequently Asked Questions — Star Rating JavaScript Project

All Free Projects — Coodeverse

Related Free Courses

Star Rating with Emoji Feedback

Full Source Code — Star Rating with Emoji Feedback