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