Star Rating System in HTML CSS & JavaScript | CodingNepal
ฝัง
- เผยแพร่เมื่อ 10 พ.ย. 2024
- Star Rating System in HTML CSS & JavaScript | CodingNepal
Download Code From Here - www.codingnepa...
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
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
if I could I'd give this vid 5 stars haha
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. 🥰
Thanks so for the greate code, But sir where form data will save or store? please guide
Thank you so much brother. These projects really teach a lot. Thanks a ton!! :)
Your design are always awesome
Ever since I've known him..... He's astounding
@@jayprecode8012 yes, absolutely right
Thanks
Thanks a lot 😊
( W ) Congratulations and thank you, you inspire me! 🇧🇷👏🏼👏🏼👏🏼👏🏼👏🏼👏🏼
You're welcome bro 💙
Underrated YT Channel
Thank you 💙
If put the code in a website, where do I get the average rating report?
Please help me
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?
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 - th-cam.com/video/QxMBHi_ZiT8/w-d-xo.html
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
Thank you for sharing your dreams on TH-cam ❤️❤️💓💕💓💕💓💕💓💓💓💓💕💓💕💓💕💓💕💕💕
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
Great Sir 👌,, Please also make a video on Website design 🙏
Okk.
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?
Hi .. is it dynamic or static ??
I did copy his code unforntunately, it cant display after trying to upload in github for assigment purposes.
After my customer given rating on this rating system will their review will reflect on the page?
sir. how could i bring the value of radio button to other page with POST method
It same like other inputs
Hey bro please suggest me where i should share my TH-cam videos for better ranking on TH-cam without spam
I've no idea bro.
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
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?
What's the application you are using
could give the code in the description, it is not possible to visualize it well.
Hi, how do I send the result to my email, for example?
Watch our PHP tutorials for this
What does the ~ sign mean?
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 !
Its work but why the stars start from right not from left like you
When i coped the code..it's not working
Sir please give us tutorial for the users reviews data base
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
how does the admin know about user rating?
bro, I can't access your website to download code. Can you send it to me?
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
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
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
it is not working why
really awesome rating system
Thank you 💙
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
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!
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
post.style.display = "block" is not working I don't know why it is, please tell me if anyone knows how to solve it
Sou o único com problemas na importação de estrelas?
Where can I get this code??
I tried this but the comments are not getting into database
what for "form action #" ??
Fas fs-star not working 😢in my project
how can we store these ratings ?
From Indonesian 🇮🇩
Thanks,do you has the code source?
How can I download code???
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.
how did u do it? im sitting since 3 days on it trying to fix it
i cant see a post button copied code
there is to tag not closed find him
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
How can we do in reactjs
i just hate the speed of video where u writing code plz slow while writing code
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
can you please share the source 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 i have a coding page
could send the code
Ótimo vídeo parabéns 👏.
Made it look so easy
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!
Excellent Content !
Thank you 💙
@@CodingNepal Welcome
Awesome 👍🏻
Yeah keep going leader
Thank you 💙
That was helpful thank you 😊
Thank you for the video ❤️❤️
Thank you 💙
Great
Thank you 💙
how can i display the data on my website?
Which data?
⭐⭐⭐⭐⭐
Epic!😁
Sure epic
Thank you
You're welcome.. Stay tuned 😁
that awesome
Thank you 💙
Shukriya bhai ❤❤
perfect as usual
Thank you 💙
Awesome!!
Thank you 💙
THX!
Very nice video
Thank you 💙
love it
Thanks you 💙
Great thank you :)
You're welcome!