Star Rating With HTML CSS & JS

[@1989filip1]

Great Work.Thank you so much from Germany😃😃

[@CodingDesign]

Thanks for watching! keep l❤ving & supporting.

[@nirajnarkhede7552]

Beautiful ! love it

[@CodingDesign]

Thank you! 😊

[@nightsofartsandhearts1320]

so simple and clean. Love it!

[@CodingDesign]

Thank you! 😊 Keep l❤ving & supporting.

[@dannyprodig6256]

thank you

[@CodingDesign]

You're welcome. I do hope you'll show same l❤ve & support in the future too.

[@shashiwanniarachchi5055]

Can i put transform to them when i click the star i will rotate can i add it to this

[@CodingDesign]

Yes you can 👍.

[@lianlopez2680]

I need to create a page where there are different images and there will be a system of stars, how and what must I do in order to achieve that system of stars

[@CodingDesign]

Suppose you have "MULTIPLE DIV" with class name "product-card" For 📝CSS code, you can give your own style. 📝HTML Code ☆ ☆ ☆ ☆ ☆ ☆ ☆ ☆ ☆ ☆ 📝JS Code const product_cards = document.querySelectorAll('.product-card'); for(const product_card of product_cards){ const Stars = product_card.querySelectorAll('.star_rating .star'); Stars.forEach((star, i) => { star.onclick = function () { let current_star_level = i + 1; // You can send "current_star_level" variable to DATABASE as a "rating value". allStars.forEach((star, j) => { if (current_star_level >= j + 1) { star.innerHTML = '&#9733'; } else { star.innerHTML = '&#9734'; } }) } }) }

[@klaasjanssen644]

thx nice video

[@CodingDesign]

Glad you liked it!

[@princessdaiane]

Hi, could you teach me how to make one with vote counting? Congratulations on the work. you teach very well 😊

[@CodingDesign]

Thank you 🙏. I might create separate video on "Vote Counting".

[@princessdaiane]

@@CodingDesign I will wait anxiously. Thank you!

[@kennethkim1221]

Hi :) I'm new to web development and currently doing Lightning Web Component development. I'm trying to implement this but whenever i load the page it says "allStars is not defined"

[@CodingDesign]

Please check variable name's spelling carefully. If you've used "allStars" as variable name then check whether you have use "allStars" or not. That "capital S" might cause this ⚠ error. 📢 So, you can "Change ALL" "allStars" variable name (word) into "all_stars" (you can give anything that is relivant).

[@mattuskovac]

i have a question.. what if i wanna use this code under multiple let´s say product cards? is it going to work if i copy-paste it under each individual html card section? will always work only on first product card. is there any solution to make it work on every product card? thx

[@CodingDesign]

☆ ☆ ☆ ☆ ☆ ☆ ☆ ☆ ☆ ☆ //Suppose you have divs with class name "product-card" const product_cards = document.querySelectorAll('.product-card'); for(product_card of product_cards){ const allStars = product_card.querySelectorAll('.star_rating .star'); allStars.forEach((star, i) => { star.onclick = function () { let current_star_level = i + 1; // You can send "current_star_level" variable to database as a rating value. allStars.forEach((star, j) => { if (current_star_level >= j + 1) { star.innerHTML = '&#9733'; } else { star.innerHTML = '&#9734'; } }) } }) }

[@omkarsatav2626]

Thank you

[@CodingDesign]

You're most Welcome!

[@Pat3kz]

@CodingDesign Could you share the actual code you got in the video for us to use. Thank you

[@Pat3kz]

How to redirect to a form or website upon click??

[@CodingDesign]

You can create anchor tag button.

[@EAGLE_KSA]

How can I make evaluation rate?

[@CodingDesign]

I've create dedicated video on this topic. ✅ kzbin.info/www/bejne/pWLMhKyQaradesk

[@ErrorFrag]

❤❤❤

[@CodingDesign]

Thank you!

[@DynamicshopFr]

Hello, Sorry for bothering you, I have an issue when I click on a star, there is border, how can I do to remove this border? I am not good at java script. Thnaks

[@CodingDesign]

In 📝 CSS code, for class star if you give Outline 'none', you won't face that problem. Something like this 🔗 .star { outline : none; }

[@rubygreen1249]

.star:focus{ outline: none; } for anyone else that comes along this issue

[@paivank8823]

@@rubygreen1249 hey man, can u help me build a star rating for a project im working on for college?

[@rubygreen1249]

@@paivank8823 I am just barely getting to server side scripting myself. I needed this tutorial to build a reviews page for a client who is a family member. That being said I don't mind making friends in the profession 🙂

[@chiragbhanderi]

I am getting error of "cannot set properties of null" i am placing script properly even thought plz help

[@CodingDesign]

I'm sure you've misspell your "class_name" or "id_name". Please check your spelling.

[@chiragbhanderi]

@@CodingDesign Does it works if we used same javascript for 2 html pages and transfer the results to next page ??

[@CodingDesign]

@@chiragbhanderi Yes it'll work. But what do you mean transfer results to next page, I didn't get you😟. What kind of project are you currently working on?

[@ashrafusama3663]

Hi, I need to connect this with database by php How??

[@CodingDesign]

If you've knowledge about AJAX or JavaScript Fetch API, you can easily interact with database and the data generated with JS code. Something like : let data = { data : current_star_level } 1️⃣ For IE8+ var request = new XMLHttpRequest(); request.open('POST', '/custom/url', true); request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); request.send(data); 'OR' 2️⃣For modern browsers 🌎 fetch('custom/url', { method : 'POST', data, 'content-type' : 'application/x-www-form-urlencoded; charset=UTF-8' })

[@ekeminigodwin1739]

Mine flashes when i click it. Why?

[@CodingDesign]

What do you mean flashes?

[@classicalrahul7489]

source code please

[@CodingDesign]

Sorry I'm unable to provide that.

[@saulomesquita1]

When I click on the stars nothing happens on my INSPECTION(F12) it shows that: index.html:27 Uncaught TypeError: Cannot set properties of null (setting 'innerText') at star.onclick (index.html:27:42) star.onclick @ index.html:27 in VSCODE 5 star rating How was your experience? &#9734 &#9734 &#9734 &#9734 &#9734 0 of 5 const allStars = document.querySelectorAll('.star'); let current_rating = document.querySelector('.current-rating'); allStars.forEach((star, i) =>{ star.onclick = function(){ let current_star_level = i + 1; current_rating.innerText = `${current_star_level}of 5`; allStars.forEach((star,j)=>{ if( current_star_level >= j+1) { star.innerHTML = '&#9733'; }else{ star.innerHTML = '&#9734'; } 5 >= 1,2,3,4,5 }) } }) when i delete the line: current_rating.innerText = `${current_star_level}of 5`; back to normal but without the star count.

[@CodingDesign]

When you're selecting class .."current rating".. let current_rating = document.querySelector('.current-rating'); REMOVE ❌ '.current-rating' ADD ➕ '.current_rating' Did you get the difference❓ " - " vs " _ " And also REMOVE ❌ 5 >= 1,2,3,4,5 that was just for understanding.

[@daliaanghel9093]

Hello, I have the below code, but is not working. Please help me, because I tried many things, but I can't find where is the problem . I have *{user-select: none;} for the entire page. Demos They help you to understand how to use certain concepts in making decisions ☆ ☆ ☆ ☆ ☆ 0 of 5 What if? Scenarios that help you understand what differences in results you get with different inputs ☆ ☆ ☆ ☆ ☆ 0 of 5 Did you know? Facts and particularities about businesses ☆ ☆ ☆ ☆ ☆ 0 of 5 Oddities in business Strange facts and practices in companies ☆ ☆ ☆ ☆ ☆ 0 of 5 Inquisitive minds Things you can only discover when you dig deeper into the data ☆ ☆ ☆ ☆ ☆ 0 of 5 Tips & Trick They are not exactly shortcuts to improve your activity, but they are helpful ☆ ☆ ☆ ☆ ☆ 0 of 5 const allStars = document.querySelectorAll('.star_rating'); for(const allStars of allhold) { const Stars = allhold.querySelectorAll('.star'); let current_rating = document.querySelector('.current_rating'); Stars.forEach((star, i)=>{ star.onclick = function () { let current_star_level = i+1; current_rating.innerText ='$(current_star_level)' of 5; allStars.forEach((star, j) =>{ if (current_star_level >= j+1){ star.innerHTML= '&#9733'; }else{ star.innerHTML='&#9734'; } }) } }) } Thank you.

[@CodingDesign]

I think you didn't check comments of this 🎬video. One of my 👁‍🗨viewer raised similar ❓question and I've given answer. But anyway, I've found some ⚠mistakes in your code. 🙏Please check out with this code. const star_ratings = document.querySelectorAll('.star_rating'); for(const star_rating of star_ratings) { const stars = star_rating.querySelectorAll('.star'); stars.forEach((star, i) => { star.onclick = function () { let current_star_level = i + 1; // You can send "current_star_level" variable to database as a rating value. star.querySelector('.current_rating').innerText =`${current_star_level} of 5`; stars.forEach((star, j) => { if (current_star_level >= j + 1) { star.innerHTML = '&#9733'; } else { star.innerHTML = '&#9734'; } }) } }) }

[@daliaanghel9093]

@@CodingDesignThank you, but it still doesn't work and I copied the code and pasted it directly in the htm file.

[@CodingDesign]

@@daliaanghel9093 If you haven't create separate file for JavaScript then Replace all your previous with the that I've given. And be sure to Paste code inside tag. If there is any ⚠Error in Browser's console let me know.

[@daliaanghel9093]

Hello, I found out which the problem was. I have on the same page multiple star rating systems and it was necessary to create different set of variables for each rating system (It's not allowed to redeclare the same variable) . Also I had to use current_rating.innerText = current_star_level.toString() + " of 5"; insead of current_rating.innerText =`${current_star_level} of 5`; Thanks anyway for the answer @@CodingDesign

[@romaoasis123]

The allStars.forEach doest work for me: 1 2 3 4 5 const allStars = document.querySelectorAll('.star'); allStars.forEach((star, i) => { star.onClick = function () { console.log(star); console.log(i); } })

[@romaoasis123]

with this code works: const allStars = document.querySelectorAll('.star'); allStars.forEach((star, i) => { star.addEventListener('click', () => { console.log(star); console.log(i); }); });

[@CodingDesign]

❌star.onClick ✅ star.onclick When you're adding 🖱"Click" event handler, Did you notice the difference❓

[@voquoctrong5304]

ty so much

[@CodingDesign]

You're welcome. Keep l❤ving & supporting.