Your multitasking talking and typing skills are amazing, and you're one of the best teachers I've come across ever. Thank you sincerely, I truly appreciate you and this video.
You shouldnt appreciate this video.. It's literally 1:1 stolen from Web Dev Simplified, who wrote the EXACT same thing 2 years before, and he even shared the code in the description!
i know is 2 years old but im a add this comment here for beginners in JS: this is simple yes but it involves working with objects a little bit, something that might scare absolute beginners. keep learning guys, once you get it you will realize is not as hard as it seems at first
Awesome content! On a side note, if you ever decide to change professions you could always work as an auctioneer. I had to drop the speed to .75 just to follow along. ;-)
You are so good programmer man but its going to fast! I made it dough by taking down speed abit. But try take it slow for beginners on projects like this i believe it will make alot of newbies have a better time! But u are the man keep teaching us!
super awesome breakdown of how to do everything! I have only been learn JS for about a week and this really removed some of the confusion I had with trying to learn the basics!! thanks :D
You are a master, a dignitary, a scholar, patient, kind, helpful. I especially love that you say the why after everything. Thank you for all you do. Can you make a video on what the hell is hue LOL and/or css variables and how to use them for beginners? Thanks bro.
Hey man, nice vid / channel. Although one tip I would give for explaining JS logic to noobCoders = me is possibly use notepad to breakdown the steps or // comments within the JS file and slow down a little bit to explain these steps and the logic behind solving each small problem. I was with you at first man but then got lost then sort of came back then got lost again, went from Lion King to Tenet real Fast. Peace from the UK 👍🏾
I love your tutorials man but It's really frustrating when I have to struggle to keep up with such speed. Makes everything so difficult. I'm trying to learn by watching this tutorial.
Hey Paul this is the easiest way I could think of keeping a score, I am sure there is a better way but I am also just a beginner. What i did was following- made a HTML element to show the score made object in js to capture that HTML element made a variable to keep track of points In start game function I set points to 0 in select answer function I just check if asnwer is correct and add one point to score also in select answer function, if its the end of questions I tell the user their final score. I hope this helps :), and please let me know if you find a better way to do it. Have a great day :) const startButton = document.getElementById('start-btn'); const nextButton = document.getElementById('next-btn') const questionContainerElement = document.getElementById('question-container'); const questionElement = document.getElementById('question'); const answerButtonsElement = document.getElementById('answer-buttons'); const finalScore = document.getElementById('score'); let total = 0; let shuffledQuestions, currentQuestionIndex startButton.addEventListener("click", startGame) nextButton.addEventListener('click',() => { currentQuestionIndex++ setNextQuestion() }) function startGame(){ console.log('Game has started'); startButton.classList.add('hide'); shuffledQuestions = questions.sort(()=> Math.random() -.5) currentQuestionIndex = 0 questionContainerElement.classList.remove('hide'); setNextQuestion() total = 0 finalScore.innerHTML = `Points ${total}` } function setNextQuestion(){ resetState() showQuestion(shuffledQuestions[currentQuestionIndex]) } function showQuestion(question){ questionElement.innerText = question.question question.answers.forEach(answer => { const button = document.createElement('button') button.innerText = answer.text button.classList.add('btn') if (answer.correct){ button.dataset.correct = answer.correct finalScore.innerHTML = `Points ${total}` } button.addEventListener("click", selectAnswer) answerButtonsElement.appendChild(button) }) } function resetState(){ clearStatusClass(document.body) nextButton.classList.add('hide') while(answerButtonsElement.firstChild){ answerButtonsElement.removeChild(answerButtonsElement.firstChild) } } function selectAnswer(e) { const selectedButton = e.target; const correct = selectedButton.dataset.correct setStatusClass(document.body, correct) Array.from(answerButtonsElement.children).forEach(button => { setStatusClass(button, button.dataset.correct) }) if (shuffledQuestions.length > currentQuestionIndex+1){ nextButton.classList.remove('hide') } else { startButton.innerText = 'Restart' startButton.classList.remove('hide') finalScore.innerHTML = `Your final score is ${total}` } if (correct){ total++ } } function setStatusClass(element, correct){ clearStatusClass(element) if(correct){ element.classList.add('correct') } else { element.classList.add('wrong') } } function clearStatusClass(element){ element.classList.remove('correct') element.classList.remove('wrong') }
Hi @Web Dev Simplified, your contents are amazing but please please slow down your pace a bit. Though we do have the playback speed youtube feature but we do not like that. Instead, if possible please slow down a bit. Thanks for your videos again. They are amazing!!!
I loved the video, but you forgot to make it that the answer buttons are disabled when an answer is chosen and enabled when no answer is currently chosen.
Your videos are great but I think you talk really fast. Beginners like myself and others find it frustrating. Traversy Media beats you on this. But you are a great teacher.
You need to work on your listening skills then probably should start coding and follow this channel. Kyle is doing a great job and he does it in a great way. Tip: Use the youtube video downloader and download all the videos and watch them using VLC. With that, you can also control the speed.
So far.. this is the best java guide I've ever seen (watched) 😍 I don't like studying but you made it easier for me to learn it.. Thank you for this amazing vid!! Even if my project won't run well later when I'll apply everything I've learned from here.. there will be no complaints.. you deserve compliments.. thank you thank you! 😊
little late but i think you could write a conditional statement (if statement) with arithmic operators in it, ex. increment variable by 1 ( let x = 0 and then x++; and then alert(x) ) hope this helps
Hi there, can you direct me to any videos in your playlist that helps with the following concepts you used in this tutorial: 1) CSS variables 2) CSS selectors before and after 3) CSS grid template columns ? I am a newbie in coding, and this project looks very interesting! Regards Ben
hey i am getting error in this line [--hue: var(--hue-neutral);] can you please guide me how to fix it. ERROR: EXPECTED REBRACEat line14, col 2. i am not getting proper output just because of this error.
Hey man thanks alot for the tutorial. I am a beginner and I don't really what to do since I don't have a strong computer however i have been going while watching you and my thing couldn't work since my PC is only 2 GB Ram and 32GB storage as well I don't have internet otherwise I do appreciate you what you do.
The only part that I am unsure of is the: questionElement.innerText = question.question What does the first "question" reference and what does the second "question" reference. Is the first question the argument for the function which is an array index for the const questions, and the second question referencing the question property of that specific index within the object? Perhaps it would be less confusing if the same word was not selected for the function argument.
wow bro you're very intelligent.. I've never seen coding like that.. i think i am outdated or maybe my mentor teach me in the wrong way.. your way of coding is super intelligent
He was just copying it from his other screen. As far as we know, he could've just copied this from somewhere.... Obviously the video is still super useful and deserves a like.
You're pretty fast and I'm having problem with the firstchild attribute. It says "can't resolve firstchild attribute of null" please can you help me with this thanks.
With the error message it means you didn't have the child list in your html, think this is the problem caused null is that it not seeing the assigned class or id
yes,this is the question I wanted to ask,I'm glad that you made it,we need more likes on this comment and @WebDevSimplified will take care of that too.
he actually doesn't need databases, because the score is local so he can just use localStorage.setKey('score') and localStorage.getKey('score'), but people can easily go to the console, then type localStorage.score = '694200'. localStorage isn't always secure.
This was awesome! Do you have any video on how to add and End Game button after you're finished playing? And it would be cool if you could earn points for correct answers and keep score :) Maybe your next video? ;)
i wrote exaclty same code as yours but there is an error in line : startButton.addeventLister(), it says that Uncaught TypeError: Cannot read properties of null (reading 'addEventListner'), please help me
Thanks a lot this was an astonishing tutorial. But, am wondering how can I let it to collect all the correct answers and project a result in the end. Like, if all answers are correct, it will show a text. But, if the all the chosen answers were wrong, it will show an other text. Can you please tell me?
Nothing to wonder guy in programming everything you think although you will face troubles but if you keep your struggle you will complete your desire.Internet is full of tutorial.Keep working.
Your multitasking talking and typing skills are amazing, and you're one of the best teachers I've come across ever. Thank you sincerely, I truly appreciate you and this video.
You shouldnt appreciate this video.. It's literally 1:1 stolen from Web Dev Simplified, who wrote the EXACT same thing 2 years before, and he even shared the code in the description!
@@aleksanderrist2705 bruh what are you smoking, this is Web Dev Simplified
@@cosmincovrig1722 pot, and whoops, wrong vid... i thought i was on Simplilearns video about this...
SUPER GENIUS! You typing it seems like you are not thinking. You just think straight forwards on it without making any mistake. That's incredible!
Ok,I'm pretty sure i typed "simple javascript programs", but anyways great tutorial man!
Is This Not A Simple JS Programs? 🤔🤔🤔
@@LabhamJain not for beginners, sir :) later its gonna get easy, yes.
i know is 2 years old but im a add this comment here for beginners in JS:
this is simple yes but it involves working with objects a little bit, something that might scare absolute beginners.
keep learning guys, once you get it you will realize is not as hard as it seems at first
Same bro
These videos have been my extra resources/saving graces while in my coding bootcamp. Thanks for making it easy to understand!
did you pass? im doing one right now actually.
@@grenade180 did you pass?
@@cptgigity did you pass?
@@malunchies4473 did you pass? I'm currently in one.
@@driplord1985 oh haha i replied for the meme of repeating the sentence. i did pass my university module that i used this for tho
Awesome content! On a side note, if you ever decide to change professions you could always work as an auctioneer. I had to drop the speed to .75 just to follow along. ;-)
Damn..I watched the video on 2X.
hahahaha
This is the only video I've ever watched where I turned down the playback speed.
Matthew Folger ruclips.net/video/NKfb6dQFaZM/видео.html
I thought it was just me hearing slow lol
why the hurry!
OMG! I kept checking if it was on X2 speed 😂😂😂
true
When i decide to learn JavaScript i found your channel and it is very helpful for me,thanks for everything
It's now 2022 but this tutorial is still elite, cheers bro💪🏽🔥
Uncaught TypeError: Cannot set properties of null (setting 'innerText')
I am Having this error..Can you help me in this?
You are so good programmer man but its going to fast! I made it dough by taking down speed abit. But try take it slow for beginners on projects like this i believe it will make alot of newbies have a better time! But u are the man keep teaching us!
As a novice coder, I have to say that is just awesome! No to watch it again in super slow mo!
You are the best coding channel. Love from India❤️❤️
Learn a ton on this tutorial, but had to play back the video a bunch of times. Awesome tutorial!!
This is going to save my life.
I’m in week 6 now of my coding bootcamp.
Incredible tutorial!!!! Loved it, followed it and subscribed!
super awesome breakdown of how to do everything! I have only been learn JS for about a week and this really removed some of the confusion I had with trying to learn the basics!! thanks :D
You are a master, a dignitary, a scholar, patient, kind, helpful. I especially love that you say the why after everything. Thank you for all you do. Can you make a video on what the hell is hue LOL and/or css variables and how to use them for beginners? Thanks bro.
lol i was about to say. TF is hue
Hey Buddy, back after a lonnnnggggg time. Told ya this channel was gonna be huge. This is just the beginning. 😇👍🏻
Hey man, nice vid / channel. Although one tip I would give for explaining JS logic to noobCoders = me is possibly use notepad to breakdown the steps or // comments within the JS file and slow down a little bit to explain these steps and the logic behind solving each small problem. I was with you at first man but then got lost then sort of came back then got lost again, went from Lion King to Tenet real Fast. Peace from the UK 👍🏾
You can slow down the playback speed on RUclips by using the icons at the bottom of the frame.
This was amazing 👏 but I wanted the results to be displayed at the end of the quizz instead of restarting.
Thanks for the amazing video, I'm a teacher and I'll use it to make some quizzes for my students.
Once I'm done I'll post the link here.
Took some time huh? ;)
Legend has it that @Lordekadaj is still working tirelessly creating that quiz😁
Щиро дякую за відео)
Thank you for this. You really made this simpler and easier to understand!
Hi. I just want to thank you. You are really good, man. Everything makes sense now. Thanks
I love your tutorials man but It's really frustrating when I have to struggle to keep up with such speed. Makes everything so difficult. I'm trying to learn by watching this tutorial.
You can slow the video down. Also pause and rewinding is something you should also utilize.
This video has helped me so much, the only thing im struggling with is how would you set up a score for the quiz
Hey Paul this is the easiest way I could think of keeping a score, I am sure there is a better way but I am also just a beginner.
What i did was following-
made a HTML element to show the score
made object in js to capture that HTML element
made a variable to keep track of points
In start game function I set points to 0
in select answer function I just check if asnwer is correct and add one point to score
also in select answer function, if its the end of questions I tell the user their final score.
I hope this helps :), and please let me know if you find a better way to do it.
Have a great day :)
const startButton = document.getElementById('start-btn');
const nextButton = document.getElementById('next-btn')
const questionContainerElement = document.getElementById('question-container');
const questionElement = document.getElementById('question');
const answerButtonsElement = document.getElementById('answer-buttons');
const finalScore = document.getElementById('score');
let total = 0;
let shuffledQuestions, currentQuestionIndex
startButton.addEventListener("click", startGame)
nextButton.addEventListener('click',() => {
currentQuestionIndex++
setNextQuestion()
})
function startGame(){
console.log('Game has started');
startButton.classList.add('hide');
shuffledQuestions = questions.sort(()=> Math.random() -.5)
currentQuestionIndex = 0
questionContainerElement.classList.remove('hide');
setNextQuestion()
total = 0
finalScore.innerHTML = `Points ${total}`
}
function setNextQuestion(){
resetState()
showQuestion(shuffledQuestions[currentQuestionIndex])
}
function showQuestion(question){
questionElement.innerText = question.question
question.answers.forEach(answer => {
const button = document.createElement('button')
button.innerText = answer.text
button.classList.add('btn')
if (answer.correct){
button.dataset.correct = answer.correct
finalScore.innerHTML = `Points ${total}`
}
button.addEventListener("click", selectAnswer)
answerButtonsElement.appendChild(button)
})
}
function resetState(){
clearStatusClass(document.body)
nextButton.classList.add('hide')
while(answerButtonsElement.firstChild){
answerButtonsElement.removeChild(answerButtonsElement.firstChild)
}
}
function selectAnswer(e) {
const selectedButton = e.target;
const correct = selectedButton.dataset.correct
setStatusClass(document.body, correct)
Array.from(answerButtonsElement.children).forEach(button => {
setStatusClass(button, button.dataset.correct)
})
if (shuffledQuestions.length > currentQuestionIndex+1){
nextButton.classList.remove('hide')
}
else {
startButton.innerText = 'Restart'
startButton.classList.remove('hide')
finalScore.innerHTML = `Your final score is ${total}`
}
if (correct){
total++
}
}
function setStatusClass(element, correct){
clearStatusClass(element)
if(correct){
element.classList.add('correct')
}
else {
element.classList.add('wrong')
}
}
function clearStatusClass(element){
element.classList.remove('correct')
element.classList.remove('wrong')
}
You legit have my jaw dropping in the middle of a coffee shop lol. This video was so enlightening! Thank you! Please keep going.
If you have trouble keeping up, you can slow down the playback spped on RUclips by using the icons at the bottom of the frame. GL
Hi @Web Dev Simplified, your contents are amazing but please please slow down your pace a bit. Though we do have the playback speed youtube feature but we do not like that.
Instead, if possible please slow down a bit. Thanks for your videos again. They are amazing!!!
I loved the video, but you forgot to make it that the answer buttons are disabled when an answer is chosen and enabled when no answer is currently chosen.
Your videos are great but I think you talk really fast. Beginners like myself and others find it frustrating.
Traversy Media beats you on this.
But you are a great teacher.
If you need to you can slow down the video to .75 speed. I tried to talk slower in some of my soon to be released videos, so hopefully that helps.
@@WebDevSimplified I actually had to slow down the speed. Great work you do. Truly appreciate.
You need to work on your listening skills then probably should start coding and follow this channel. Kyle is doing a great job and he does it in a great way.
Tip: Use the youtube video downloader and download all the videos and watch them using VLC. With that, you can also control the speed.
I am a complete beginner as well and I really like the fast pace.
This is a totally great tutorial! Keep rocking, dude!
I think his shirt color and face color exactly matched the styles of the quiz app
Such a cool little app, Thank you so much for this content, I am still getting my head around some of the concepts but learning more each day!
So it's been a year. How's the coding adventure going?
@@edwardbrownstien8741 great man, I got a job as a react Dev! Learning loads!
That's reallly cool, I will build it for sure, nice thanks great explanation, really well done.Tkx
26:36 proves he is the best youtuber
you need to literally breathe and take it easy, i can promise we are watching the whole thing
So far.. this is the best java guide I've ever seen (watched) 😍
I don't like studying but you made it easier for me to learn it.. Thank you for this amazing vid!! Even if my project won't run well later when I'll apply everything I've learned from here.. there will be no complaints.. you deserve compliments.. thank you thank you! 😊
Its JavaScript not Java.
Thanks a lot, I was doing myself a quiz app with JS but I was so stuck, your video helped me a lot!!! After Brad Traversy and Dev Ed, subscribed :D
I'm really glad I could help!
This is really great,. could you also show how to add a score
little late but i think you could write a conditional statement (if statement) with arithmic operators in it, ex. increment variable by 1 ( let x = 0 and then x++; and then alert(x) ) hope this helps
@@cloudboomer3250 Thanks, I mean it is late but thank you anyway.
I appreciate you so much,
Bkz I've waiting this for AI
🎉
YOU'RE SO GREAT FOR MAKING WIDE STOVE OF ME🎁💥💡🏆
Kyle is the best youtuber !
You are too kind!
Hi there, can you direct me to any videos in your playlist that helps with the following concepts you used in this tutorial:
1) CSS variables
2) CSS selectors before and after
3) CSS grid template columns ?
I am a newbie in coding, and this project looks very interesting!
Regards
Ben
Just want to say thank you for your great work! Was really helpful!
hey i am getting error in this line [--hue: var(--hue-neutral);] can you please guide me how to fix it. ERROR: EXPECTED REBRACEat line14, col 2. i am not getting proper output just because of this error.
That's cool! I want to make a China's Social Credit Quiz.
Thanks for this tutorial! Would you make a tutorial for a Quiz not with right/wrong answers but with score? Each answer to have different value.
We all knew you were reading a script lol 😂
Thanks so much for the tutorial 💕😘
Hey man thanks alot for the tutorial. I am a beginner and I don't really what to do since I don't have a strong computer however i have been going while watching you and my thing couldn't work since my PC is only 2 GB Ram and 32GB storage as well I don't have internet otherwise I do appreciate you what you do.
Great tutorial, really simplified. Congratulations!!!
Dev Ed is best RUclipsr
This guy was 100% created by AI.
You are a saint
keep up the good work,you got our full support
Thank you so much, dude. I learned so much. Appreciate your work
bro , thank you for this tutorial plus source code !
This is so helpful! Thanks a lot man!
The only part that I am unsure of is the:
questionElement.innerText = question.question
What does the first "question" reference and what does the second "question" reference. Is the first question the argument for the function which is an array index for the const questions, and the second question referencing the question property of that specific index within the object?
Perhaps it would be less confusing if the same word was not selected for the function argument.
Super late but question.question is pointing to the array questions and then the nested array questions to access the single question what's 2+2?
question .question means the question array inside question
@@dancemusikk I don't understand why isn't it 'questions.question' instead of 'question.question' ?
@@rjtkoh same thoughts here.. Hope somebody can clarify.
@@rjtkoh okay, I figured it out..
wow bro you're very intelligent.. I've never seen coding like that.. i think i am outdated or maybe my mentor teach me in the wrong way.. your way of coding is super intelligent
He was just copying it from his other screen. As far as we know, he could've just copied this from somewhere....
Obviously the video is still super useful and deserves a like.
awesome project ....u ve got to learn this
Q: "Who is the best youtuber?"
A: multiple choice
;)
Dev ed hihi sorry
hue -> 4:53
JS -> 12:24
Brilliant ! super great tuts. Thank you very much and looking forward to new tuts, buddy .
Cool project 👌
Thanks man your a genius literally very very useful 👍
I LUV ZIS CHANNEL
Thanks!! fast, clear and detailed.
You're pretty fast and I'm having problem with the firstchild attribute. It says "can't resolve firstchild attribute of null" please can you help me with this thanks.
With the error message it means you didn't have the child list in your html, think this is the problem caused null is that it not seeing the assigned class or id
Check to see if this is correct:
in javscript
const nextButton = document.getElementById('next-btn')
correctly refers to the HTML code section
Next
Thank you so much, your videos always help :)
dios, de verdad siento que te amo, creo que me salvastes el día
❤🔥❤🔥❤🔥your videos are amazing
Hey, great channel. You’ve helped so much! Could you possibly help with advice/video for adding a score and a database for this quiz?
Thank you!
yes,this is the question I wanted to ask,I'm glad that you made it,we need more likes on this comment and @WebDevSimplified will take care of that too.
Was about to ask the same question
Score? Just create a score element div somewhere with a number variable that increments and decrease when you get right or wrong answer
he actually doesn't need databases, because the score is local so he can just use localStorage.setKey('score') and localStorage.getKey('score'), but people can easily go to the console, then type localStorage.score = '694200'. localStorage isn't always secure.
This was awesome! Do you have any video on how to add and End Game button after you're finished playing? And it would be cool if you could earn points for correct answers and keep score :) Maybe your next video? ;)
Awesome man, I did the whole project
Very nice explanation. thank you so much!
i cant wait for css grid to work in ie11, then i can use it at work and my life will be so much easier
Great bro!!! I really like this tutorial ❤
You are the best youtuber.
Thank you
thank you so much, please make more videos about vanilla JS Projects
I keep looking at your face until I forget the lesson. Just kidding but you handsome is real , Thank you for this video
Keep it going love your videos
감사합니다 WDS ^^
Very helpful! I learn a lot with your videos 🙂
i wrote exaclty same code as yours but there is an error in line : startButton.addeventLister(), it says that Uncaught TypeError: Cannot read properties of null (reading 'addEventListner'), please help me
WHy this teacher so handsome?? -_ -;;;; my 4th project of this, I will also choose my teacher you! :)
wonderful, thanks
Great video man..now inspecting the element shows the data attribute?? so we can know the answer..!!
great tutorial! learning a lot from you :)
Great! I really like your tutorials.
Thanks
Thanks for the teachings man.
You're welcome!
thank you so much, great tutorial!! woww
It would be awesome to have this with questions coming from api
Thanks a lot this was an astonishing tutorial. But, am wondering how can I let it to collect all the correct answers and project a result in the end. Like, if all answers are correct, it will show a text. But, if the all the chosen answers were wrong, it will show an other text. Can you please tell me?
Nothing to wonder guy in programming everything you think although you will face troubles but if you keep your struggle you will complete your desire.Internet is full of tutorial.Keep working.
Thank You So much. You video are awsome
Cool man I always wanted to do that
obrigado! Manja muito
Is there a way to also randomise the order in which the Answers are displayed?
Thank you.
Fantastic, we could use the dataset to cheat though lol.
I learned Array.sort() today.
Hi There, thanks so much for the video. I used this tutorial for a project but struggled when creating a function for the score. Any tips?