Star Ratings With JavaScript & Font Awesome

[@sunguidiazhn]

Hey Traversy Media, you may not me but i am a yotuber who follows your channel and I must say thank you very much, what you do and teach in each video is simply phenomenal. I have learn from you a lot over the past year and it's just amazing. You made just wanted to say thank you for it, me achieve huge things and I wish that God blesses you and your family, and that ANYBODY who hates when you don't make there request and disrespect should appreciate what you do.

[@1stoplink]

Brad, I learned coding by watching your channel. Now I have my own channel to help people grow. Thanks for this goodie!

[@binayakgshankar9188]

This is the best channel for Web Development content on KZbin. Undoubtedly.

[@robertchingambu5426]

Really like the way you explain it makes me understand. thanks for your help great videos always...

[@TraversyMedia]

No problem, thanks for watching

[@robertchingambu5426]

Would like you to do a video about positioning, layouts how to position forms and footer will be so greatifull

[@MegaMaliak]

how does he make you understand it, he doesnt explain what code part does, where does he get all those commands. im watching this, and i dont believe you werent writing this from the script.

[@crocodilecrox3758]

Hell yea the good old mini projects. Keep these up brad! Ure awesome

[@PP-qi9vn]

Your content is so worthy and your voice is so deep it makes me want to focus. thanks for your video :)

[@kevinzhang8974]

Very cool and practical example ... Thank you sir ... I pushed myself and repeated what you did .... have a nice weekend!

[@BlueIceAce2015]

My phone exploded with the *5 shortcut... I LOVE YOU BRAD!

[@hasiburrahman9392]

Thanks, Brad. I love your videos.

[@1b31ing1]

The right training video at the right time... thank you so much Brad for all that you do 🙏

[@jarecturner297]

Hey man, I feel like you're going thru some burn out. If I am right, I just want to say, thank you for everything you do!

[@marwanalsaydali6886]

I really appreciate all what are you doing, Good Job!

[@riverOfWinds]

Exactly what I needed. Thank you SOOO much. Learned a lot.

[@ashutoshnayak609]

The facecam's back! Would like to see more of your videos with the face cam. And thanks for the great content Brad

[@dani4uro]

You have such a great background! Love you.

[@jordankilian3712]

great job as usual....I just wish there were more teachers like you one youtube :/

[@edwinccp26]

Thanks. I always enjoy your tutorials and purchase your Udemy courses as support.

[@Iaintbrokenomo]

Thank you for this great tutorial, from your loyal patreon supporter

[@YazanHaddad1991]

Please do a crash course on Phalcon framework, and also a video tutorial on jquery jTable plugin. That would be awesom. Your videos really help, thanks man.

[@priyanshvatsal9791]

your videos are always helpful sir

[@stevendornan7979]

I really enjoyed this project! Thank you so much.

[@emmasam36]

Trav, I really wanna support your channel and even buy your udemy courses.. But my bank is delaying me wth my visa card. Please keep the great work. I plan on going on a personal boot camp with all your videos I have. Thank you sooo much. I will be helping when my card comes.

[@Coachhere]

Always enjoy your videos

[@imranyaseen7880]

Very good explanation. I like your videos.

[@jritzeku]

Any way to prevent user from manually entering value for rating? In other words, how to restrict user to provide rating by only using the clickable/stepper option that is present, since the max of 5 is set there.

[@unityme8898]

which algorithm did you use in rating system ??? i want to know. thank u so much !!!

[@SCARVMUSIC]

If there would be storing the ratings on a database it would be more better . But yea ! Very helpful

[@AdSenseNinja]

This is awesome - thanks dude. Now only question is - do we need the whole FontAweseme.css or just a part of it, to minimize transfer?

[@tuanconandoyle9674]

highly appreciated. Could you build a star rating system tutorial with Reactjs and the ratings will be shown into database (MySQL or MongoDB is no problem). Thank you in advanced and wish you best wishes.

[@vinodyevatikar1594]

But querySelector method uses CSS3 selectors for querying the DOM and CSS3 doesn't support ID selectors that start with a digit as in this project star rating is digit. failed to execute eventListner.

[@milanm6538]

Super video, great explained!

[@parasmanikc7341]

Great Video as always!! will you ever make a php mysql video about working with multiple tables in database!! I cant find a tutorial for that!! if you would make it, It wil be highly appericated. Anyway thank you for your valuable contribution to the community

[@matthewfallon6564]

So well explained once again, I was wondering if you could make a tutorial where you create an application in an OO paradigm?

[@matthewfallon6564]

No they don't, can you show me any constructors in this tutorial?

[@bodasandeepkumar4234]

great work sir .... keep going. Thank you so much

[@gomo8651]

Thanks brotha. Keep being awesome! . Would like to ask If there is going to be any other video on Electron? (guess who got me into electron and JS overall )I am trying to do some desktop app and stuck on dealing with databases. I know you have lots on firebase and mongo, but I want to make it offline only app. So would be nice If you says something on best DB solutions for offline apps, desktop and mobile as well . Another thing I believe everyone else would like to get familiar is .HTACCESS files and their role, configuring one and what does what, because most of us are probably dealing with shared hostings and aside of the juicy documentation on each provider, they lack in explaining the things as you do. All the best.

[@valimdx]

Very cool tutorial and very helpful. I don't get one thing thought... why does the starts fill to the half, when the half star is nowhere defined in the css?

[@skoyah]

Hey Travis. I've bought your course about the MVC on Udemy and I think was a really great course to start on the MVC mindset. I'v also found a tutorial on your KZbin channel about using the javascript Google maps API. I was wondering if you could help me on something related with that. I am trying to create some sort of UI. I want the user to be able to add a marker to the google map using a form to submit the place to a database and then through PHP I want that location to be displayed on the map. Kinda like creating an event where that marker will be deleted automatically after the event expires. Could you do something like that?

[@KeepItFresh02]

nice. was about to implement this into my angular project.

[@ClaudiuVochitoiu]

Great tutorial. Thank you man!

[@ichnafi8512]

Nice video, as always! One got to love your content. How about a video of client- and/or serverside form input validation in a node.js/epxpress.js project.

[@kamaboko1]

Wonderful tut. Thanks.

[@eagleshunter2975]

very very good video broo..

[@deividaskrupstas]

Another great video, thank you!

[@vaitalaziz100]

How to do half star rating by mouse clicking, example half rating means one of the targeting star should be half marked, please?

[@villianvichev2287]

Brad, you are the best!!!!!

[@branen890]

First step like video,second step watch video.

[@briannock5300]

That's usually how I do it.

[@solomonchokor1199]

hey brad how do i implement this for a click instead using the form to rate

[@thatsenam9183]

Just Helpful! Thanks Dear.

[@MegaMaxxon]

Brad, thanks a lot!

[@lyarinet]

every time tech new thanks sir

[@nuwang1]

Awesoome. Any quirks abt using font awesome 5? I remember using thr library years ago and some of the icons disappeared cus of updates etc..

[@yaokouassijean-claude1499]

You are the Best! Thanks you very much

[@dr.margulis7773]

It's awesome!!!

[@AbhishekKumar-mq1tt]

Thank u for this awesome video, I am waiting for express, mongodb and strip payment

[@rymbouchetara1066]

I didn't understand why we put the stars before the stars-outer class, can anyone explain me please?

[@newabyuser]

excellent work

[@MiguelGonzalez-eb9lj]

Brad what do i do if theres a new version of font awesome and this isnt working? my stars wont pop up just little squares pop up

[@rizkydyanpratama613]

try use this

[@MiguelGonzalez-eb9lj]

@@rizkydyanpratama613 Thank you that did help!

[@manuelsantos4172]

@@MiguelGonzalez-eb9lj i cant do it, can u help me?

[@MiguelGonzalez-eb9lj]

Leandro SA I used what Rizky said

[@manuelsantos4172]

@@MiguelGonzalez-eb9lj where i have to put this code?

[@sujalkhatiwada2267]

Please make SVG course with animation related stuffs with javascript and some games in javascript :) , it'll really help

[@SusmitMohan]

Hi Brad, I am learning web development and you are my great teacher. So I request you to make a tut about CSS or HTML reset. I have recently knew about this thing and I am confused about should I use this or not. I have found 3 popular resetting or normalizing codes: meyerweb, html5doctor and normalize.css. Are they still needed and useful in this 2018? Please explain this matter in a video tutorial and I think many of us will get it as helpful. Thanks in advance.

[@branen890]

Use the normalize.css for your projects because every browser have different sets for html5 tags e.g h1 have different margin in Firefox and different margin in Chorme.

[@avishek_ataur]

stars are at 20:24

[@ugifredrick8342]

Good work sir...👍 Please can you design a rating system that has a commenting section, star rating section with a view more or load more comment section?....for it has been stressing me for days now🙏 I will be so glad if you can do it...🙏🙏🙏

[@yschin5663]

Thanks Brad, would you going to do some tutorial about ASP.NET Core on Udemy?

[@mohammadhoseinabbasi9993]

Why do you have `.${rating} ` in your querySelector? `.rating` is not a class? How does it work?

[@alishashrestha7967]

Can somebody plz explain me the logic behind the star percentage rounded ?? Thanks !!

[@eypbal]

hi traversy.. thanks for all..

[@AndryRoby]

Hello pls do Hotel Booking like website

[@argeelearner3978]

AndryRoby same hare would love a some more projects using a framework

[@TraversyMedia]

To do an entire website like that would mostly be a course not KZbin. KZbin is for smaller projects to teach certain things in order to give you the skills to build bigger and better things. Good idea though, Ill put some thought into it. Im working on a social network for the next course but maybe after that

[@argeelearner3978]

Traversy Media. I love all your stuff, I have all of your Udamy courses and I just can't get enough. Thanks for everything.

[@AndryRoby]

Traversy Media Thanks 😀

[@benogidan]

You could do a small part of the Hotel Booking site like the UI or backend functionality and host the rest of the course on Udemy for the curious George's. I am a developer and it is nice to see the contrast on the methods you use and why, so I keep coming back. Plus you have awesome ideas :)

[@amolacharya5342]

Can anybody please explain why I am getting this error:index.html:123 Uncaught TypeError: Cannot read property 'style' of null at HTMLDocument.getRatings

[@ek8862]

hey, have the same issue, did you understand why?

[@amolacharya5342]

@@ek8862 Well, what I did was I went to the link provided below and copied all the links. It works!

[@proMehediBD]

I tried to do this kind of star ratings in react native. But I can't yet :(

[@uimonk]

you are awesome.

[@shubhamtarkar38]

I was asked to do this in my technical interview

[@MuffinologyTrainer]

I get notified, here I am.

[@nikhiltyagi1080]

Video Request! Please do a video on a responsive image gallery that has a lightbox popup, dark overlay, image title description, previous next buttons, current image index (eg: 6/19, 7/19), and some kind of transition effect like fade out fade in when next or previous button is clicked. All this in vanilla js

[@nikhiltyagi1080]

DutchGreen Gaming because jquery is shit and dying. People are moving to react vie and angular. You can make a light box gallery in few seconds with a million jquery plugins. But what's the use of that. What are you learning? Reading a plugins documentation. Vanilla js helps to improve programming skills and later five into mern/mean stack - react/angular js, nodejs +express + mongodb. But to go into react...you need solid javascript foundation

[@nikhiltyagi1080]

DutchGreen Gaming When did i say jquery is a plugin? I said every decent developer either uses vanilla js or has moved on to vue/angular/react. You have absolutely no clue what javascript is today after ES6. JQuery is only used by newbies because there is a plugin for everything and syntax is shorter. But now javascript syntax is also much shorter that makes jquer y redundant. Even brad in many videos says there is no point in using jquery. Only those who cannot code properly keep using jquery for add class/toggle class, animation or small stuff. I stopped using it, properly learnt JS, and now I code my own custom modals, carousel sliders, light box galleries etc in vanilla js. And that has helped my move ahead with js ..start building complex web apps and start learning react and node js

[@octavearrivets7628]

Thanks !

[@andreypm3]

To my mind, there is no real reason to round percents to tens. Even without any round it worked fine.

[@kimnr10]

You are so fking good at teaching.

[@duongnguyenai6272]

tks so much !!!

[@naveed1495]

Thank you for the video I like your explaining way Can you tell me How to make that star rating with many people's example like play store if we download somthing they ask for rating and it's doing somthing it's calculating all the rating and it's give the average Can You tell How to make that?pls

[@behzad4055]

thanks

[@kevinharveyavance6053]

can you teach me how to save the results into the database

[@shubhamchitre4702]

Uncaught SyntaxError: Unexpected identifier const ratings = { Veg biryani: 4.5, //error here Chicken biryani: 4, Mutton biryani: 4.5, Paneer biryani: 3.8, Egg biryani: 3.5 }

[@Siyabonga079]

Please do a mini video of how to direct users to their custom profile pages in php

[@djskywalkerremix]

Yessssssss!

[@chiiakioO]

Can I put this into Django?

[@vijayu707]

Awesome...

[@firstbay4024]

awesome

[@kelthuzal]

awesome, please do a siries of NW.js vdo

[@proncoDoe]

dude please can you make algorithm series video for beginner

[@prajwolmdr3740]

StarR.html:114 Uncaught TypeError: Cannot read property 'style' of null at HTMLDocument.getRatings (StarR.html:114) getRatings @ StarR.html:114

[@prajwolmdr3740]

100 in your case

[@prajwolmdr3740]

14 mins

[@MrAvatarvb]

thnx it's cooooool

[@kannitra]

Hey can u please create a full real time project using node js because all the project which u created is awesome but to show in the interview its not enough they want some real time. So can u please create some dashboard like real time project Please.... Help Thanks

[@inzMBL]

"we don't need a tag" ... this is wrong

[@platos305fl2]

If anyone needs help with Google Tag Manager and Analytics, check out the new video from Tru Lift Digital Marketing here on KZbin. The guys explains Digital Marketing as well as Brad explains programming. Now I need help finding a good video on how to add Schema Markup to my website using JSON-LD (Linked Data).

[@rudisetiawan4152]

got notification :D

[@hamzajaved1115]

Plzzzz make a video on font awsome 5

[@sdborn8667]

Its cool but I want more full stack apps

[@TraversyMedia]

KZbin is a platform for incremental knowledge. Im sure you know what goes into building a full stack app. If not, it is not something that can be done every 3 days :) I have a number of full stack apps planned for Udemy courses and a few smaller ones for KZbin but I do what I can

[@sdborn8667]

Traversy Media thanks Brad, Ive already have your udemy course angular, cant wait for more content. But I understand that it takes a lot of time and effort.

[@PolYGlokk]

+Traversy Media Philips only one "l":)

[@osmeig6025]

Soy de Argentina no entiendo el inglés hay manera de traducir todo lo que dices?

[@beataj3382]

2nd

[@pitchblackc0d314]

just got chased by the police and I escaped and now I'm back to JAVASCRIPT how do I escape this 🙆‍♂️🙆‍♂️

[@avnishyadav2748]

1st

[@ReduanRafi]

hahah I wanted to be :D

[@avnishyadav2748]

Reduan Rafi you just wrote longer comment than me