JavaScript - Interactive Rating Component - Frontend Mentor Challenge

[@pixelsamuraigaming5544]

I have watched so many tutorials where they just overlay the video with music, but the way you explain everything you doing makes it so simple to understand. you earned a new sub my friend :)

[@glaceongalgaming9755]

I'm very much a beginner at Javascript, so this exercise really stumped me. I'm so grateful that you made this video!! Super helpful, and I learned a lot of cool information that I didn't know before! I'm confident I can do the next JS exercise on my own, now, thanks to you! :)

[@tsbsankara]

Nice 👍. That's wonderful to hear!

[@omrividal]

Thank you so much! I had such a "horrible" time looking for a simple answer and went with like 7 different approaches before I saw your video... You actually helped me realise JS is not that hard and you have the ability to teach and show us in the best way so thank you for that. Keep up the good work!

[@tsbsankara]

I'm glad that I could help 😊

[@Dukuu_ttv2]

keep on going man. really love and appreciate the content, useful, straight to the point and easy to follow!

[@tsbsankara]

Thank you

[@TylerNicholson-ee6cf]

I've not long started learning JS and been finding it hard to grasp but I sure learned a lot from this tutorial, thank you!

[@lovelleslifejourneyvlog]

Thank you for this wonderful walk through on how you build this component. I have been struggling a lot with JS and its a little difficult for me to understand. But when you explained it, i was able to learn and understand how those eventclick works. Great job on this. 💯💪

[@tsbsankara]

That's great to hear! I'm glad it was helpful :)

[@TheKtiekat]

Thomas you are amazing! You've been helping me learn so much through FrontEndMentor. You're cheeky laugh at the end was the best, I give you 5 out of 5!

[@tsbsankara]

Thank you for the kind comment

[@yetkindev]

simple , clear , clever. nice👏👏👏👏👏👏👏

[@cisforcoding]

@tsbsankara - I revised the time stamps to include the JavaScript part. I didn't realize you had pinned the previous timestamp. Thanks for the video! Extremely helpful!!!!

[@tsbsankara]

Thank you for your efforts. I appreciate it

[@Benihorla]

at first i was thinking of using radio button and putting it in a form but was stuck on how to get the required data . thanks for opening my eyes to see that sometimes I should not only think out of the box but in a no stressful way

[@Carlos456The]

Omg, you are amazing bro! Thnaks a lot for your video!

[@tsbsankara]

Thank you for the kind comment

[@Mahmoud_176]

Perfect explanation, Thank you

[@tsbsankara]

😊

[@tripineta92]

The greatest video I colud find for this challenge. Thank you so much! You win a suscriber ♥

[@tsbsankara]

Thank you so very much ♥

[@beckalves1745]

you are the best !!! im from brazil and apreciate

[@seunj2455]

Thanks. Appreciate this.

[@tsbsankara]

Glad it was helpful!

[@Michael.Sandoval33]

I am almost done with my AA in software development at CIAT and I did not even know where to begin with this challenge. Quite sad that these bootcamps are such failures and really just gave us the answers for every assignment. The only thing I really learned is that I am an efficient problem solver and can always find an answer to the solution (I.E. watching your video). Without dragging on too much longer, any advice for the future of trying to become a front end developer?

[@learnMoreToCode]

Nice comprehensive video. Thank you for the explanation, it solved my frustration and I learned from it. Keep going and Happy Coding!✊💻

[@creationpower333]

Great content! This helped me a lot, keep up the good work. Thank you!

[@horrid13]

Thank you you explain things very well!

[@User_09627]

Great explanation , you helped me ! thanks ❤

[@tsbsankara]

Glad to hear that!

[@nathalycavalcante788]

Thank you so much, so clear to understand!

[@mandresyandriantsoanavalon5643]

Thank You ! For je JS part of this challenge I was blocked for a while.

[@tsbsankara]

Glad I could help

[@samueldiaz3320]

Great job and great explanation! thanks

[@blue_berry_pie64]

Thank you! it is very easy to understand by your explanations.

[@levyjr6857]

really good video, congrats

[@seeker3794]

Thank you... Very useful video👍

[@tsbsankara]

I'm glad it helped

[@DavidLopez-eg6it]

Great video, specially the JavaScript part. So many videos only with background music but no voiced explanation. You got a new sub. I do have a question. Can the JS events be inside a global function instead of separate block of code for each one?

[@tsbsankara]

Yes, but I don't recommend that because it will just slow down the execution of your application

[@tsbsankara]

Thanks for the sub. I'm glad you liked the video 😊

[@manosatpathy1579]

Thank you so much!

[@tsbsankara]

You're welcome!

[@klaudiabilska5873]

Thank you!

[@tsbsankara]

You're welcome!

[@ugoodjk6204]

for me when I added the .hidden class to the thank-you div nothing happened, I resolved it by making a parent class with hidden and making that did have a separate const of its own but I am still unsure why me adding a second class didn't work . Also didn't we specify that the thank-you div has a display of flex, so how can css decide using the display none of .hidden or the display flex of .thank-you ? just curious

[@mavick.]

thank you so much ✨️

[@tsbsankara]

😊

[@mysuperxbox]

very nice tutorial the only problem is the lake of using flex-box that can save you a lot of time and using so much margins and paddings

[@Imohy69]

Nice job buddy, keep it up, i love your videos ❤️

[@Deivid796]

Good afternoon, I loved your explanation, one question: what extension are you using to make the opening and closing tags colorful?

[@tsbsankara]

The opening tags are the default setting in VSCode, and for the brackets, I use Brackets Pair Colorizer

[@Deivid796]

@@tsbsankara indent-rainbow, thanks

[@tsbsankara]

Oh yeah. Forgot about that one 😅

[@Zillionaire_01]

I love your videos. Your contents are superb

[@motorhub5510]

how did that submit button even with width of 100% did took the full main-container space? If anyone knows please help.

[@motorhub5510]

oh i forgot to put padding in main-container sorry. THANKS FOR THE TUTORIAL

[@tsbsankara]

😂 CSS does that...

[@mayankgupta7617]

Hi! thank you so much and great explanation! thanks

[@nicolewilliams7446]

Hi, I have everything built out correctly until it is time for the JS file to read the function for the first event listener. I'm not sure what the issue is

[@tsbsankara]

Check whether you've referenced the file correctly in your html, and then make sure you're getting the correct name of the element to which you're adding the event listener

[@endrit5135]

hey thank you for this amazing video but I have a problem, when I try to hide the element with display: none, I have to write it both on html with and on css too otherwise its not working without each other. what may the problem be here?

[@tsbsankara]

Seems to me like a problem with CSS Specificity - like there are some styles that are applying over the other. Once you find that, you find your issue.

[@drissbouadoud7072]

you're the best

[@tsbsankara]

Thank you. That is quite endearing

[@TareK19885]

thanks for the video it helps alot however before i saw your solution i did it on 2 pages and mow im stuck when i click the rating the console shows which number was clicked and since i did it on 2 pages when i do rating.innerHTML i caught an error :( i couldn't find the right way to pass the value to next page any ideas ? thanks ...

[@tsbsankara]

I think it's because rating.innerHTML doesn't exist when the second page loads. I think having 2 pages is a bit cumbersome, so perhaps create one page, and then build a toggle for the components.

[@biancamagali100]

Hi! thank you so much for your video. I follow all the steps but for some reason my html file is not reading JavaScript coding? do you have any idea why it might be? thank you so much in advance!

[@tsbsankara]

Check whether you have linked your JavaScript file in the html document.

[@muratdoo]

Perfect

[@matthewkk5087]

how can we do this with react? we will just need useState ofc and useForm right?

[@tsbsankara]

Yes. I did use useState, but I did not use useForm. I have a video where I build this app in React, here's the kzbin.info/www/bejne/gInVZoR5eq1rjKc

[@prathampahad9788]

I have one feedback, in css, you make changes in attributes simultaneously, please focus on one attribute at a time

[@tsbsankara]

Thank you. Understood. I will work to improve on that

[@ritaoluchi9766]

Thank you very much for this video Can I please get your codes on this???

[@tsbsankara]

You're very welcome. Here is the link: github.com/SankThomas/js-interactive-rating-component

[@ritaoluchi9766]

@@tsbsankara Thank you