Star Rating System in HTML CSS & JavaScript | CodingNepal

Star Rating System in HTML CSS & JavaScript | CodingNepal

Related Videos You Might Like:
Password Strength Check [HTML] [CSS]

Windows Preloader [HTML] [CSS]

Music Credit:
Track: Diviners - Savannah (feat. Philly K) [NCS Release]
Music provided by NoCopyrightSounds.

Track: Rival x Cadmium - Seasons (feat. Harley Bird) [NCS Release
Music provided by NoCopyrightSounds.

ROY KNOX - Blue Eyed Demon [NCS Release]
Music provided by NoCopyrightSounds.

Keywords :
five star rating system html css, html css star rating, star rating in html css, css star rating, star rating widget html css, html css star rating system, rating system in html css, css star, star rating in css, star rating in javascript, javascript star rating widget, star rating using html css

[youssefmuhammad]

first thanks so much codeNepal for your help and amazing inspiring really i appreciate your help,
second something different happened to me i will share it for everyone had the same problem
when i use <label> tag and put class="fas fa-star" into it every time i clicked on the label it wasn't working and it like not related to the radio input, also the css wasn't working of the label tag and i did everything to fix it and according to my understanding of <label> tag it should be contain a text to work on click, so i tried to add <a class="fas fa-star"> inside label tag instead of put class="fas fa-star" within label tag and indeed it finally works.
and this some of my code
"HTML CODE"
<div class="review_stars">
<input type="radio" name="rate" id="rate-5" />
<label for="rate-5">
<a class="fas fa-star"></a>
</label>
<input type="radio" name="rate" id="rate-4" />
<label for="rate-4">
<a class="fas fa-star"></a>
</label>
<input type="radio" name="rate" id="rate-3" />
<label for="rate-3">
<a class="fas fa-star"></a>
</label>
<input type="radio" name="rate" id="rate-2" />
<label for="rate-2">
<a class="fas fa-star"></a>
</label>
<input type="radio" name="rate" id="rate-1" />
<label for="rate-1">
<a class="fas fa-star"></a>
</label>
</div>
"CSS CODE" - SCSS
.review_stars {
width: 100%;
float: left;
height: 90px;
display: flex;
align-items: center;
align-content: center;
justify-content: center;
input {
display: none;
}
label {
float: right;
font-size: 13px;
color: #727272;
transition: all 0.3s ease;
cursor: pointer;
}
input:not(:checked) ~ label:hover,
input:not(:checked) ~ label:hover ~ label {
color: #ff8220;
}
input:checked ~ label {
color: #ff8220;
}
}

[briandesign]

if I could I'd give this vid 5 stars haha

[princess]

Thank you for sharing so much valuable information and making us fall in love with front-end designing in such an easy and concise way. 🥰

[rajatpatel]

Thank you so much brother. These projects really teach a lot. Thanks a ton!! :)

[echizenryoma]

everything was working fine, until I get to the star widgets hover was not working even though I tried to type the code letter by letter or even copying the source code, i even tried to create a new html and css file for a clean trial but still not working

[sauravdutta]

If put the code in a website, where do I get the average rating report?
Please help me

[wagnaomoreira]

( W ) Congratulations and thank you, you inspire me! 🇧🇷👏🏼👏🏼👏🏼👏🏼👏🏼👏🏼

[rufusodion]

Thanks for this.

But I added this to a web page I am currently designing, everything is but when I click the POST button it doesn’t display the “thanks for rating us!” Page, it only reload the website. How can I fix this?

[pokstv]

I did copy his code unforntunately, it cant display after trying to upload in github for assigment purposes.

[S-Lomar]

Thank you for sharing your dreams on YouTube ❤️❤️💓💕💓💕💓💕💓💓💓💓💕💓💕💓💕💓💕💕💕

[rage]

Great Sir 👌, , Please also make a video on Website design 🙏

[moviesshow]

Thanks so for the greate code, But sir where form data will save or store? please guide

[whyyouas]

Why can’t display on mozila firefox. On google chrome it works

[marwamiimi]

When i coped the code..it's not working

[madhabtripathy]

post.style.display = "block" is not working I don't know why it is, please tell me if anyone knows how to solve it

[dandedivya]

Fas fs-star not working 😢in my project

[bambindien]

Thanks a lot!!! Btw, I've seen a nice search functionality on your website. Do you also have a tutorial especially as far as the real "my-website" internal search is concerned (exact like your solution)? The added google-results on the right wouldn't be so important. That would be really fantastic!

[sdasinteriortimberworks]

After my customer given rating on this rating system will their review will reflect on the page?

[aagamshah]

how do i store the output in a database ??

[rafaelamorim]

Sou o único com problemas na importação de estrelas?