i completed three projects from this playlist projects are good but please its a request to please also explain the javascript code properly it will be great if you explain in detail for javascript codes because it gets hard for freshers
this video struck an idea for me I am going to use a quiz and trivia page based on my own niche and maybe make money out of it --ill go ahead and consider making my own quiz app soon tnks
please also tell how to put timer for each question, atlast how to put a pie chart which notices how many are correct in green and wrong as red Please provide tutorials
Awesome lesson. For upcoming tutorials please use live server split the screen into two parts, one side show the code and on the other let us see the live render so we see the changes in real time throughout the tutorials. Keep up the good work.
I don't know how to thank this guy ❤ Next level ! easiest explanation .... if you are a beginner and want to enhance your skillset on JS follow this guy man
It'd be nice if this had (1.) Questions number limit, meaning if I have 100 questions end each session at 50 and (2.) shuffle questions function... Other than that AWESOME training video! Thanks.
Also got another question about JS syntax. Why would you code something such as correct: false correct: true vs true: no false: yes or true: 1 true: 0 false: 1 false: 0 I guess, why would one syntax be the ultimately correct way vs other ways? It makes coding look more like rote memorization vs a logical process.
I follow up the whole code It really worked ......but I am unable to run the Java script yar ...... please suggest a solution ...yar Only script is not showing over the app other work too fluently. After rechecking the .....i Got the whole concept 😍😍😍 thanksss a lot for teaching this much easy way n perfectly.I really made it .😁best way uhh were teaching
Wonderful tutorial. Simple and easy to follow. Can you please show me how to save the quiz in local storage and reset the local storage when you restart the quiz
well event though im beginner, i had a doubt ...Like using dataset and classList to store the correct answer is not safe right?? the user would just use developer element to get answer. It would be better to use a indexing method or logical operator operation
Your videos are really helpful, only thing I need to mention is when you are writing code please explain it also, dont say this format or code, explain it instead
Question, how did you change the default font color of your code in VS code? My JS colors are looking different than the colors displayed here, and I really like the colors you have compared to my own.
You need to download extension to change theme of code. Extension tab is on the left site of screen. I think you Can google "theme for code VS code" and you can choose one you like and then find and download theme extension in VS
at 5:47 how did you get 4 answer buttons without adding the button functionality in the index.html file ? You are just adding the answer-button class. No button functionality whatsoever ???
hey! your videos are amazing, I just want to know the best place to study about JavaScript properties which I don't know about... when I was watching this video I didn't know about 'dataset'.
hello sir , your video are really helpful and your voice is very good i'm lot of learn in your video ..keep creating new design and hover , animation effect
New viewers k liye aik guide A "question" property (string) An "answer" property (array of objects) A "text" property (string) A "correct" property (boolean)
If I want to add image such as a watermelon's image and say which vegetable is this ? For adding image and connect with it which things need to change actually? If I just add image of vegetables of every question's place in js , will it work?
Good day Many thanks for the great contributions to knowledge. I tried this, but the js code did not respond. I even follow it line by line just like yours. . what should I do
Hello Avinash, Nice video and very easy and simplified. I want to ask you, after making an app like this, how do we make it live or as an app. I understand that this is for tutorial. What are the next steps into it. How do we go about it. Please guide on this.
Hi I really enjoyed this, you have a really great style of presenting and not talking overly quickly. I have subscribed and would like to join up. I wonder if I could get some help with this code for a work project I am doing.
Back ticks are not working in my sublime text code. the regular single quotation marks make the string turn green (read like a string by JS), but when i switch to back ticks, it is white and my code breaks.
Please whenever I click on next button after clicking on the answer, it's not taking me to the next question. When I checked the console, it wrote "uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received". Please what what's the solution.
but what if I want to add a questions/tasks bank , out of which the program can sample out the tasks with timed feature ? do you happen to have any idea as to how one best approach this best regard
👉 My JavaScript Advanced Course: greatstack.dev/go/javascript-course (75% Discount)
Bhai please can you send a code
Avinash is a true programmer. He knows well every corner of Javascript. Kudos!
That 30 javascript projects helps a lot
i completed three projects from this playlist projects are good but please its a request to please also explain the javascript code properly it will be great if you explain in detail for javascript codes because it gets hard for freshers
true what's the point of just coding
Thanks Bro ☺️
I learned a lot
This is my first project with Javascript..
this video struck an idea for me I am going to use a quiz and trivia page based on my own niche and maybe make money out of it --ill go ahead and consider making my own quiz app soon tnks
please also tell how to put timer for each question,
atlast how to put a pie chart which notices how many are correct in green and wrong as red Please provide tutorials
Awesome lesson. For upcoming tutorials please use live server split the screen into two parts, one side show the code and on the other let us see the live render so we see the changes in real time throughout the tutorials. Keep up the good work.
can you share code link for this project
Can't explain how far you have helped me......!!
Even chatGPT was not able to solve my problem but you did....!!
What was the problem?
@@AibekJustForStudy Thanks for asking but I don't remember right now because I posted this comment 1 year back 😅
Avinash, You are a hero. You make coding very easy for me to learn. Thank you.
Avinash jii javascript series op
You are a teacher, your code is clear, your way of teaching is making us easy understand the codes.
Bro I need this code
This channal the best in You tube. Thank you for Video.
"Excellent tutorial! Clear instructions for building a quiz app with HTML, CSS, and JavaScript. Highly recommended."
Is the code working or not...like if i coded along the video ??
What’s the quotes for? I’m assuming it didn’t work for you?
I don't know how to thank this guy ❤ Next level ! easiest explanation .... if you are a beginner and want to enhance your skillset on JS follow this guy man
Bhul ke bhi nahi
"Excellent quiz app tutorial! Clear explanations and easy-to-follow steps using HTML, CSS, and JavaScript."
Why’d you post the same thing twice?
It'd be nice if this had (1.) Questions number limit, meaning if I have 100 questions end each session at 50 and (2.) shuffle questions function... Other than that AWESOME training video! Thanks.
You have no idea how much this has helped me! Thank you!
Thank you bro it helps me lot
I successfully executed quiz website
The video has 30 minutes, But it took me 2 hours to complete. No errors or bugs ...
That's okay. It take time to complete. Keep learning.
Can you give me Source code please?
It took me 2 day and I'm not finished .I don't know but I think he made it hard in the code
Bhai can you send code
you are doing great job... thank you so much
Next Level Javascript literally
Thanks for ur best teaching sir. ❤😊
Congratulations for 800k 😁🔥🔥🔥🔥🔥
Thanks a lot from Uzbekistan! I have leaned a lot from your projects :)
thank you brother , your tutorials are clear and simple , great job ! subscribed
This tutorial has helped me so much. Thank you, I'm now a subscriber and will be practising my javascript skills with your 30day JS code playlist.
Your java script part runs ?? mine js part does not making any changes why T_T??
Coming from someone who has been frustrated..Thank you So mmuch, This was really helpful, was what I needed
A big salute for you sir 🙇
Thank you so much ..
I have learned a lot of things today
Also got another question about JS syntax. Why would you code something such as
correct: false
correct: true
vs
true: no
false: yes
or
true: 1
true: 0
false: 1
false: 0
I guess, why would one syntax be the ultimately correct way vs other ways? It makes coding look more like rote memorization vs a logical process.
haha
Thank you so much ❤❤ It worked🤗🤗🤗
You're welcome. 😊 Keep coding.
Please give me source code 🙏🏻
Because mine only shows answers 1 2 3 4 ...
So please give me source code
I want to add shuffle function
const shuffleAnswers = (answers) => {
for (let i = answers.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[answers[i], answers[j]] = [answers[j], answers[i]];
}
}
Hi! Where in the source code do I have to insert this?
Merci pour tout, ce fût si facile avec vous. Very, very, very good
I love your videos so much!!! You have been teaching me so well and I can't thank you enough.
I follow up the whole code It really worked ......but I am unable to run the Java script yar ...... please suggest a solution ...yar
Only script is not showing over the app other work too fluently.
After rechecking the .....i Got the whole concept 😍😍😍 thanksss a lot for teaching this much easy way n perfectly.I really made it .😁best way uhh were teaching
same here script is not showing what is the issue can please tell me
@@bhoomikasn5094 make sure you import the js in html code at bottom
i am facing same problem
Nice explanation sir and easy to understand keep going 😊...
Thanks a lot 😊 Keep coding.
Thank you for this Easy Tutorial. Please keep creating more JavaScript tutorials. The way you simplify code is amazing, keep up the good work.
Wonderful tutorial. Simple and easy to follow. Can you please show me how to save the quiz in local storage and reset the local storage when you restart the quiz
Sir I have a doubt if I wants to add approx 10x questions then how to make data base in this type of application
Learn Backbend
Bro, You are awesomeeeeeeeeeeee.......☺☺☺🤗.Stay focused
Very Helpful and learned new things also
Glad to hear that. Thank you.
Nice video ,,,you made me to have no fear in JavaScript again.... thanks a lot
Really helpful sir.....Thankyou so much for your efforts...
well event though im beginner, i had a doubt ...Like using dataset and classList to store the correct answer is not safe right?? the user would just use developer element to get answer. It would be better to use a indexing method or logical operator operation
Your videos are really helpful, only thing I need to mention is when you are writing code please explain it also, dont say this format or code, explain it instead
Thank you so much , next level of explanation sir
Question, how did you change the default font color of your code in VS code? My JS colors are looking different than the colors displayed here, and I really like the colors you have compared to my own.
You need to download extension to change theme of code. Extension tab is on the left site of screen. I think you Can google "theme for code VS code" and you can choose one you like and then find and download theme extension in VS
Change the theme of VS Code from the settings option located in the bottom left corner. Each theme has its own font color.
omg thaaaanks, i learning so mutch here, and you help-me with my project!
Thank you very much Sir🙏
Glad you liked it. You are welcome! 😊
Thank you so much. You're channel is so good.
at 5:47 how did you get 4 answer buttons without adding the button functionality in the index.html file ? You are just adding the answer-button class. No button functionality whatsoever ???
Thank you Man 👍🏻
Amazing work brother!
thank you very much sir
your explanation is so clear
Thank you so much. I watched this for reference to create my portfolio .so helpful
Thanks you Avinash sir
..... Done
Well explained, thanks!
❤❤ simple, easy to understand project.. thanks
really you understand this r just copy the code
hey! your videos are amazing, I just want to know the best place to study about JavaScript properties which I don't know about... when I was watching this video I didn't know about 'dataset'.
Awesome, super super excellent , Keep up the good work.
Thank you so much sir for this useful video 🙏🙏
Thank so much for your tutorial, but I have problem on my code, why ${score} doesn't work?
I got the mistake it supposed to use `` , instead of ''
hello sir , your video are really helpful and your voice is very good i'm lot of learn in your video ..keep creating new design and hover , animation effect
here is an easier version:
Quiz App
Score: 0
const questions = [
{
question: "What is the capital of France?",
options: ["Paris", "London", "Berlin", "Madrid"],
answer: "Paris"
},
{
question: "Which planet is known as the Red Planet?",
options: ["Earth", "Mars", "Venus", "Jupiter"],
answer: "Mars"
},
{
question: "What is the largest mammal in the world?",
options: ["Elephant", "Giraffe", "Blue Whale", "Hippopotamus"],
answer: "Blue Whale"
},
{
question: "What is the chemical symbol for gold?",
options: ["Go", "Au", "Ag", "Ge"],
answer: "Au"
}
];
let currentQuestionIndex = 0;
let score = 0;
const questionElement = document.getElementById('question');
const optionsElement = document.getElementById('options');
const scoreElement = document.getElementById('score');
function displayQuestion() {
const currentQuestion = questions[currentQuestionIndex];
questionElement.textContent = currentQuestion.question;
optionsElement.innerHTML = '';
currentQuestion.options.forEach((option, index) => {
const button = document.createElement('button');
button.textContent = option;
button.addEventListener('click', () => checkAnswer(option));
optionsElement.appendChild(button);
});
}
function checkAnswer(selectedOption) {
const currentQuestion = questions[currentQuestionIndex];
if (selectedOption === currentQuestion.answer) {
score++;
}
currentQuestionIndex++;
if (currentQuestionIndex < questions.length) {
displayQuestion();
} else {
showResult();
}
}
function showResult() {
questionElement.textContent = 'Quiz Completed!';
optionsElement.innerHTML = '';
scoreElement.textContent = `Your Score: ${score} / ${questions.length}`;
}
displayQuestion();
Hello
doing this project today og
This is very nice, but it makes long answers verbose on the code. The code will have the answer written twice, every time.
Thanks a lot but can you help drop code for the admin dashboard that can be used to update questions to the website for a school
you are the greet teacher in my learning process
Amazing work, thanks so much
23:18 My resetState() function is not working anyone else facing the same issue?
New viewers k liye aik guide
A "question" property (string)
An "answer" property (array of objects)
A "text" property (string)
A "correct" property (boolean)
Outstanding Tutorial keep it up bro ✨
Thank you so much teacher :)
thank you! This was very helpful and I learnt a lot!
Amazing! thank you so much
If I want to add image such as a watermelon's image and say which vegetable is this ?
For adding image and connect with it which things need to change actually?
If I just add image of vegetables of every question's place in js , will it work?
This is exactly what I was looking for, and you made it so simple! Thank you so much!
thank you from Istanbul/turkey
Thank you! Informative and easy to follow!
Amazing Lesson. My only problem is why the quiz does not work even after writing it correctly.
Same here dude ......
if u get the perfect One . Will u share to the Comment ??
same here. My js has a problem, it didn't connected to the html even I has insert its link
I have learned to much things from this video
Glad you liked it. Thanks for your comment. 😊
But not English
I also want to say thank you very much!
Good day
Many thanks for the great contributions to knowledge.
I tried this, but the js code did not respond.
I even follow it line by line just like yours.
. what should I do
For those who need it:
* {
margin: 0;
padding : 0;
font-family: 'Poppins' , sans-serif;
box-sizing: border-box;
}
thank you so much this code of yours help me at very crucial movement
Thanks a lot that was great, but what does dataset do??❤❤
Your tutorial is awesome. Pls upload source code of project too.
Love IT. 💗💗
Awesome job😮, thanks, 🎉❤🫶🏻
thankyou this is a big help for me!
Thank you for the educative tutorial
I've made one myself.. but tbe design is awesome
Please can you share
Answers are not showing on the button
@@Ifelola01 did you got the solution?
Me too
thank you sir for this awesome content
Hello Avinash, Nice video and very easy and simplified. I want to ask you, after making an app like this, how do we make it live or as an app. I understand that this is for tutorial. What are the next steps into it. How do we go about it. Please guide on this.
Amazing. And how we can achieve different backgrounds(images) for each question? Thank you.
Hi I really enjoyed this, you have a really great style of presenting and not talking overly quickly. I have subscribed and would like to join up. I wonder if I could get some help with this code for a work project I am doing.
Back ticks are not working in my sublime text code. the regular single quotation marks make the string turn green (read like a string by JS), but when i switch to back ticks, it is white and my code breaks.
Pay first then download projects you mean?
Please whenever I click on next button after clicking on the answer, it's not taking me to the next question. When I checked the console, it wrote "uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received".
Please what what's the solution.
32:31 its also printing ${score}and $ {questions.length}...please tell me solution
Please I'm having exactly the same problem
You can please share with me if you've gotten the answer
Same here
@@temiebanwo I just got the solution to it
Use the slanting quote instead like this one: ` .... Don't use this: ' or this: "
but what if I want to add a questions/tasks bank , out of which the program can sample out the tasks with timed feature ? do you happen to have any idea as to how one best approach this
best regard
This is basic frontend. Do it with backend using date bases.
For those who are getting the next question's option added to the previous qsn; Just add the resetState(); to beginning of showQuestion();
thank u mister very nice
Great video, how do I add a timer to the quiz. So let's say 50 questions will have 20 minutes to answer questions.
if u findout any solution regarding how to add timer
pls dm me
Hi did you find a solution how to add timer to this quiz?
Bro why are you changed your channel logo and name your previous logo and name were amazing and easy