Star Rating System in HTML CSS & JavaScript | CodingNepal

[@youssefmuhammad2749]

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; } }

[@CodingNepal]

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

[@youssefmuhammad2749]

@@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

[@princess8486]

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. 🥰

[@moviesshow7281]

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

[@briandesign]

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

[@rufusodion8878]

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?

[@rajatpatel1148]

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

[@Knuddelfell]

Underrated YT Channel

[@CodingNepal]

Thank you 💙

[@bambindien3327]

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!

[@CodingNepal]

Actually from that google search bar I'm earning so I've put there... You can watch this search bar video - kzbin.info/www/bejne/h6mwc3uflL-cipo

[@SouryajeetSingh]

Your design are always awesome

[@jayprecode8012]

Ever since I've known him..... He's astounding

[@SouryajeetSingh]

@@jayprecode8012 yes, absolutely right

[@patriotact3729]

Thanks

[@CodingNepal]

Thanks a lot 😊

[@sauravdutta5496]

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

[@wagnaomoreira3961]

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

[@CodingNepal]

You're welcome bro 💙

[@S-Lomar]

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

[@shuvam0516]

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.....

[@CodingNepal]

Bro kehi demo xw vane insta ma pathaunw... Ali sajilo hunthyo

[@shuvam0516]

@@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?

[@echizenryoma9648]

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

[@sanasingha7600]

Same here bro

[@pokstv]

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

[@MrRhinoLofi]

Hey bro please suggest me where i should share my KZbin videos for better ranking on KZbin without spam

[@CodingNepal]

I've no idea bro.

[@sdasinteriortimberworks2727]

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

[@simiwuthrich9031]

Looks great! How can I make it work with multiple ratings in the same form?

[@CodingNepal]

Like what?

[@simiwuthrich9031]

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.

[@imperial-x9899]

@@simiwuthrich9031 study a little boi

[@whyyouas]

sir. how could i bring the value of radio button to other page with POST method

[@CodingNepal]

It same like other inputs

[@rage2214]

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

[@CodingNepal]

Okk.

[@whyyouas]

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

[@satishmedewar1300]

yes iam akso facing that problem

[@CodingNepal]

For mozilla we have to add prefix in CSS codes

[@satishmedewar1300]

@@CodingNepal bhai Indian na?

[@Gamer1626]

Hi, how do I send the result to my email, for example?

[@CodingNepal]

Watch our PHP tutorials for this

[@xochitlflores9861]

could give the code in the description, it is not possible to visualize it well.

[@madhabtripathy8691]

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

[@the3minys]

Where is the code to allow the user to write in the text area? @CodingNepal

[@CodingNepal]

Please watch video... I did it all

[@the3minys]

@@CodingNepal okay do you know how i could resize the stars?

[@the3minys]

nvm i figured it out great tutorial !

[@absurdgaming2596]

Its work but why the stars start from right not from left like you

[@phungtuandat-daniel5481]

bro, I can't access your website to download code. Can you send it to me?

[@CodingWithDerek]

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

[@MrMarko51]

just add dir="rtl" to the parent element

[@CodingWithDerek]

@@MrMarko51 let me check!

[@CodingWithDerek]

@@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!

[@rabiakhurram5030]

Hi .. is it dynamic or static ??

[@aridamazazel933]

How do i view other people's comments & star reviews data using ur code?

[@CodingNepal]

Add php or other backend languages

[@aagamshah8276]

how do i store the output in a database ??

[@Anuragpandeyhu]

if you got your question's Answer please feel free to share it wid me

[@shreshthmalik4346]

Learn php

[@006-cm-vaibhav4]

What's the application you are using

[@magiccode3396]

really awesome rating system

[@CodingNepal]

Thank you 💙

[@MOHDNAVED-mm7be]

Sir please give us tutorial for the users reviews data base

[@jardelduarte7987]

Amazing, but how create the backend to this?

[@imperial-x9899]

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

[@hephaestusdiwi]

@@imperial-x9899 yeah hahaha, this code make headache haha

[@jayprecode8012]

Yeah.... I'm ready too.... This is epic

[@CodingNepal]

Thank you 💙

[@Editzhomie]

Can you the code here through which I can copy it😭

[@Editzhomie]

Please sir can you do this for me

[@CodingNepal]

You mean source code link..?

[@Editzhomie]

Yes sir

[@dandedivya9639]

Fas fs-star not working 😢in my project

[@perfectcodingInstitue]

how does the admin know about user rating?

[@marwamiimi1935]

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

[@ugifredrick8342]

Thank you for this sir👍... Pls sir, help make a functional PHP search bar, to search and play videos or musics from mysql database🙏🙏🙏

[@aouxswantoro5432]

Just come to wpu unpas

[@shn8822]

What does the ~ sign mean?

[@imperial-x9899]

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.

[@manki3039]

how did u do it? im sitting since 3 days on it trying to fix it

[@dimitargeorgiev6216]

why does the stars not show on my preview? P.S I'm new to this

[@CodingNepal]

You may not connected to the Internet or maybe you haven't forgotten to add FontAwesome cdn link.

[@dimitargeorgiev6216]

@@CodingNepal I am sure its because I didn't add FontAwsome but I tried and I don't think I am doing it correctly

[@rafaelamorim5970]

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

[@gayathripudipeddi9817]

I tried this but the comments are not getting into database

[@rahulps]

how to get the number of stars it is outside the form

[@CodingNepal]

You have to use backend languages for adding advanced features on it.

[@rahulps]

@@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

[@asarifirmansyah7961]

where do you get those icons

[@zuhasyed07]

it is not working why

[@baskom7103]

what for "form action #" ??

[@malireddydushyanth9411]

Where can I get this code??

[@romuloalves9349]

Ótimo vídeo parabéns 👏.

[@shraddhadeshmukh5810]

Awesome 👍🏻

[@Knuddelfell]

Epic!😁

[@jayprecode8012]

Sure epic

[@stackclever]

bro can u help me how to post it to other page?

[@CodingNepal]

Means

[@stackclever]

@@CodingNepal for example a marketplace and i make a dashboard for my seller and i want rank all review to lanfing page

[@hitesh8965]

@@stackclever use google bussiness widgets for displaying the reviews.....came here searching for same

[@wew1813]

Thanks,do you has the code source?

[@adminji]

how can we store these ratings ?

[@namanyasiapa9307]

From Indonesian 🇮🇩

[@separatetraveler8226]

Excellent Content !

[@CodingNepal]

Thank you 💙

[@separatetraveler8226]

@@CodingNepal Welcome

[@Editzhomie]

Sir the Css code is not working

[@CodingNepal]

Yes I've commented text area so download files instead of copying codes.

[@Editzhomie]

@@CodingNepal sir i have downloaded it but then also Css file is not working while html file is working

[@Editzhomie]

Sir please help me in I need it is very very important for me

[@CodingNepal]

Can you send me the problems on my Instagram account.?

[@Editzhomie]

Sir what is your instagram account

[@lakshyasaxena]

i cant see a post button copied code

[@f-zdragon]

there is to tag not closed find him

[@cindyshunelaiwin]

How can I download code???

[@sanasingha7600]

Your code is not working bro

[@Khierovic_74]

Yeah keep going leader

[@CodingNepal]

Thank you 💙

[@sai7743]

How can we do in reactjs

[@rajuraichur579]

i just hate the speed of video where u writing code plz slow while writing code

[@nassirourahimy8952]

That was helpful thank you 😊

[@A.M-s7z]

Thank you for the video ❤️❤️

[@CodingNepal]

Thank you 💙

[@ongpytran4552]

Awesome!!

[@CodingNepal]

Thank you 💙

[@shanogeethshanmuganathan9529]

Yo bro how to get the emojis ?

[@CodingNepal]

It's from mobile keyboard.. You can download codes of this tutorial from here - www.codingnepalweb.com

[@Jay_domain_hub]

can you please share the source code

[@lievenbeckert3133]

how can i display the data on my website?

[@CodingNepal]

Which data?

[@quyenthach1034]

Great

[@CodingNepal]

Thank you 💙

[@quocatle7140]

Very nice video

[@CodingNepal]

Thank you 💙

[@ammaskitchen8042]

Can i have a coding page

[@abdoseadaa]

perfect as usual

[@CodingNepal]

Thank you 💙

[@graceyohanna1879]

Made it look so easy

[@Languager_I]

could send the code

[@SpeedCode]

no post btn

[@CodingNepal]

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.

[@CodingNepal]

Source codes has been updated. Please copy again. Thanks!

[@ArtificiallIntelligent]

Shukriya bhai ❤❤

[@Dubyrivas1]

⭐⭐⭐⭐⭐

[@FastOnlineTutorials]

that awesome

[@CodingNepal]

Thank you 💙

[@maulanahidayat6039]

Thank you

[@CodingNepal]

You're welcome.. Stay tuned 😁

[@alihamaz-ti6vv]

love it

[@ro_mot]

THX!

[@alixedesigner3318]

Thanks you 💙

[@LouiesLog]

Great thank you :)

[@CodingNepal]

You're welcome!