Star Rating System in HTML CSS & JavaScript | CodingNepal
HTML-код
- Опубликовано: 17 июн 2020
- Star Rating System in HTML CSS & JavaScript | CodingNepal
Download Code From Here - www.codingnepalweb.com
Related Videos You Might Like:
Password Strength Check [HTML] [CSS]
➤ • Password Strength Chec...
Windows Preloader [HTML] [CSS]
➤ • Windows Preloader usin...
Music Credit:
Track: Diviners - Savannah (feat. Philly K) [NCS Release]
Music provided by NoCopyrightSounds.
➤ • Diviners - Savannah (f...
Track: Rival x Cadmium - Seasons (feat. Harley Bird) [NCS Release
Music provided by NoCopyrightSounds.
➤ Watch: • Rival x Cadmium - Seas...
ROY KNOX - Blue Eyed Demon [NCS Release]
Music provided by NoCopyrightSounds.
➤ Watch: • ROY KNOX - Blue Eyed D...
My Code Editor - • Best Text Editor for H...
Facebook - / coding.np
Instagram - / coding.np
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
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. 🥰
Thank you so much brother. These projects really teach a lot. Thanks a ton!! :)
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 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 tag it should be contain a text to work on click, so i tried to add 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"
"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;
}
}
It's not problem by tag, you may did some other mistakes like you may forgot put value in for attribute of and the value is exact same as input id attribute value
@@CodingNepal thank you for your answering and interesting, i made sure that is all same exact values id and for and made sure all contain it as i mentioned above in my code but it was always didn’t work maybe something wrong in my code but for helping others i share it :D
( W ) Congratulations and thank you, you inspire me! 🇧🇷👏🏼👏🏼👏🏼👏🏼👏🏼👏🏼
You're welcome bro 💙
if I could I'd give this vid 5 stars haha
Underrated YT Channel
Thank you 💙
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?
Ótimo vídeo parabéns 👏.
If put the code in a website, where do I get the average rating report?
Please help me
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!
Actually from that google search bar I'm earning so I've put there... You can watch this search bar video - ruclips.net/video/QxMBHi_ZiT8/видео.html
Thank you for sharing your dreams on RUclips ❤️❤️💓💕💓💕💓💕💓💓💓💓💕💓💕💓💕💓💕💕💕
After my customer given rating on this rating system will their review will reflect on the page?
Your design are always awesome
Ever since I've known him..... He's astounding
@@jayprecode8012 yes, absolutely right
Thanks
Thanks a lot 😊
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
Same here bro
Epic!😁
Sure epic
I did copy his code unforntunately, it cant display after trying to upload in github for assigment purposes.
post.style.display = "block" is not working I don't know why it is, please tell me if anyone knows how to solve it
How did the stars appear? I don't see any code in the css file that does anything for the class fas fa-star
Its a bootstrap class
That was helpful thank you 😊
Awesome 👍🏻
Looks great! How can I make it work with multiple ratings in the same form?
Like what?
I made a feedback form with four different questions and individual ratings. I had to choose a unique name for each rating to make it work.
@@simiwuthrich9031 study a little boi
Thanks so for the greate code, But sir where form data will save or store? please guide
sir. how could i bring the value of radio button to other page with POST method
It same like other inputs
Awesome!!
Thank you 💙
how does the admin know about user rating?
gave me a headache fixing the form tag to get the data and insert that in the database, why the hell do you use a form tag there can't just use another tag.
Hi .. is it dynamic or static ??
How can you make the ~ selector highlight all the labels behind the hovered label? It does not work for me, it highlights all the next labels
just add dir="rtl" to the parent element
@@MrMarko51 let me check!
@@MrMarko51 It is like adding the attribute reverse to justify-content, I tried it and worked but is not the result I wanted because things goes upside down, regardless thank you!
could give the code in the description, it is not possible to visualize it well.
Sir please give us tutorial for the users reviews data base
Thank you for the video ❤️❤️
Thank you 💙
Excellent Content !
Thank you 💙
@@CodingNepal Welcome
Great Sir 👌,, Please also make a video on Website design 🙏
Okk.
Yeah keep going leader
Thank you 💙
Hey bro please suggest me where i should share my RUclips videos for better ranking on RUclips without spam
I've no idea bro.
Hi, how do I send the result to my email, for example?
Watch our PHP tutorials for this
bro, I can't access your website to download code. Can you send it to me?
Sou o único com problemas na importação de estrelas?
Thank you for this sir👍...
Pls sir, help make a functional PHP search bar, to search and play videos or musics from mysql database🙏🙏🙏
Just come to wpu unpas
really awesome rating system
Thank you 💙
what for "form action #" ??
Very nice video
Thank you 💙
What does the ~ sign mean?
Yeah.... I'm ready too.... This is epic
Thank you 💙
Can you the code here through which I can copy it😭
Please sir can you do this for me
You mean source code link..?
Yes sir
perfect as usual
Thank you 💙
Shukriya bhai ❤❤
how can we store these ratings ?
where do you get those icons
How do i view other people's comments & star reviews data using ur code?
Add php or other backend languages
What's the application you are using
Its work but why the stars start from right not from left like you
Why can’t display on mozila firefox. On google chrome it works
yes iam akso facing that problem
For mozilla we have to add prefix in CSS codes
@@CodingNepal bhai Indian na?
Fas fs-star not working 😢in my project
Bro image maa js ko help le sliding caption hover effect banau na. Example :- suppose user le mouse ko cursor top bata image maa hover garo vane caption top bata shows hoss... yadi left bata hover vayo vane left bata caption show hoss... yadi bottom bata hover vayo vane bottom bata caption show hoss... and so on for right...
Aja js practice garda malai yo idea ayo tara banauna sake na.....
Bro kehi demo xw vane insta ma pathaunw... Ali sajilo hunthyo
@@CodingNepal
Bro html ra css ko code Google drive ko marfat pathai dim comments maa tyo file maa demonstration file ra k k modify garnau parxa tyo sabai lekhe deko hunxu . Yesto garda hunxa ra?
how do i store the output in a database ??
if you got your question's Answer please feel free to share it wid me
Learn php
When i coped the code..it's not working
Great
Thank you 💙
THX!
it is not working why
Thank you
You're welcome.. Stay tuned 😁
Where is the code to allow the user to write in the text area? @CodingNepal
Please watch video... I did it all
@@CodingNepal okay do you know how i could resize the stars?
nvm i figured it out great tutorial !
that awesome
Thank you 💙
From Indonesian 🇮🇩
Amazing, but how create the backend to this?
a headache work for this template cz he using form tag for description will have to use div and change the CSS accordingly then use form tag to fetch data and insert it in the database
@@imperial-x9899 yeah hahaha, this code make headache haha
I tried this but the comments are not getting into database
love it
how to get the number of stars it is outside the form
You have to use backend languages for adding advanced features on it.
@@CodingNepal i changed the form tag to a div with form as class name and added a '.' infronof of the form in css page
and created a new form which included the radio buttons
Made it look so easy
Great thank you :)
You're welcome!
Where can I get this code??
why does the stars not show on my preview?
P.S I'm new to this
You may not connected to the Internet or maybe you haven't forgotten to add FontAwesome cdn link.
@@CodingNepal I am sure its because I didn't add FontAwsome but I tried and I don't think I am doing it correctly
Thanks,do you has the code source?
How can we do in reactjs
bro can u help me how to post it to other page?
Means
@@CodingNepal for example a marketplace and i make a dashboard for my seller and i want rank all review to lanfing page
@@stackclever use google bussiness widgets for displaying the reviews.....came here searching for same
Thanks you 💙
i cant see a post button copied code
there is to tag not closed find him
How can I download code???
Yo bro how to get the emojis ?
It's from mobile keyboard.. You can download codes of this tutorial from here - www.codingnepalweb.com
⭐⭐⭐⭐⭐
can you please share the source code
how can i display the data on my website?
Which data?
could send the code
no post btn
Hello, after multiple comments like this I'll check the codes of this star rating soon and if there is seems any problem then I'll resolve it and update the codes. Don't worry I'll inform you.
Source codes has been updated. Please copy again. Thanks!
Can i have a coding page
Sir the Css code is not working
Yes I've commented text area so download files instead of copying codes.
@@CodingNepal sir i have downloaded it but then also Css file is not working while html file is working
Sir please help me in I need it is very very important for me
Can you send me the problems on my Instagram account.?
Sir what is your instagram account
Your code is not working bro
i just hate the speed of video where u writing code plz slow while writing code