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
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.
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
I don't have a words to describe your teaching style and the efforts you have put just awesome, your way of teaching projects is very understoodable and clear. Because of you only i am able to create frontend projects.... Thank you so much....❤
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
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
00:04 Create a JavaScript quiz app using HTML, CSS, and JavaScript 02:26 Created HTML and CSS files for a quiz app 08:07 Creating buttons with CSS styling and hover effect 11:14 Add JavaScript to hide/show buttons and connect script file with HTML 17:55 Displaying question and answers in HTML using JavaScript 20:36 Start quiz 26:10 Adding functionality to the website to highlight correct and wrong answers 28:36 Add hover effect and cursor change when button is disabled 34:06 You can create your own quiz app or quiz website using HTML, CSS, and JavaScript. Crafted by Merlin AI.
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.
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
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
New viewers k liye aik guide A "question" property (string) An "answer" property (array of objects) A "text" property (string) A "correct" property (boolean)
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
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.
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'.
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
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.
![Lp. Сердце Вселенной #60 РОЖДЕНИЕ ЛОЛОЛОШКИ [Финал] • Майнкрафт](http://i.ytimg.com/vi/YoR0pAV9FVQ/mqdefault.jpg)
👉 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
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
Thanks Bro ☺️
I learned a lot
This is my first project with Javascript..
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 😅
Thank you sir. I did this one in 3 hours, 1 hour less than the previous project. Thanks for these projects ♥️
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
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
"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?
You have no idea how much this has helped me! Thank 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
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.
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
I don't have a words to describe your teaching style and the efforts you have put just awesome, your way of teaching projects is very understoodable and clear. Because of you only i am able to create frontend projects....
Thank you so much....❤
Next Level Javascript literally
"Excellent quiz app tutorial! Clear explanations and easy-to-follow steps using HTML, CSS, and JavaScript."
Why’d you post the same thing twice?
you are doing great job... thank you so much
Congratulations for 800k 😁🔥🔥🔥🔥🔥
This channal the best in You tube. Thank you for Video.
Coming from someone who has been frustrated..Thank you So mmuch, This was really helpful, was what I needed
Thanks a lot from Uzbekistan! I have leaned a lot from your projects :)
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
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
Thank you bro it helps me lot
I successfully executed quiz website
thank you brother , your tutorials are clear and simple , great job ! subscribed
Thanks for ur best teaching sir. ❤😊
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??
A big salute for you sir 🙇
Thank you so much ..
I have learned a lot of things today
Nice explanation sir and easy to understand keep going 😊...
Thanks a lot 😊 Keep coding.
I love your videos so much!!! You have been teaching me so well and I can't thank you enough.
Thank you for this Easy Tutorial. Please keep creating more JavaScript tutorials. The way you simplify code is amazing, keep up the good work.
Nice video ,,,you made me to have no fear in JavaScript again.... thanks a lot
Very Helpful and learned new things also
Glad to hear that. Thank you.
Bro, You are awesomeeeeeeeeeeee.......☺☺☺🤗.Stay focused
Thank you very much Sir🙏
Glad you liked it. You are welcome! 😊
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
Merci pour tout, ce fût si facile avec vous. Very, very, very good
❤❤ simple, easy to understand project.. thanks
really you understand this r just copy the code
Amazing work brother!
Thank you so much. You're channel is so good.
Really helpful sir.....Thankyou so much for your efforts...
Thank you Man 👍🏻
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?
Thank you so much. I watched this for reference to create my portfolio .so helpful
Well explained, thanks!
Outstanding Tutorial keep it up bro ✨
Thank you so much , next level of explanation sir
thank you very much sir
your explanation is so clear
you are the greet teacher in my learning process
omg thaaaanks, i learning so mutch here, and you help-me with my project!
Thanks you Avinash sir
..... Done
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
Thank you so much sir for this useful video 🙏🙏
00:04 Create a JavaScript quiz app using HTML, CSS, and JavaScript
02:26 Created HTML and CSS files for a quiz app
08:07 Creating buttons with CSS styling and hover effect
11:14 Add JavaScript to hide/show buttons and connect script file with HTML
17:55 Displaying question and answers in HTML using JavaScript
20:36 Start quiz
26:10 Adding functionality to the website to highlight correct and wrong answers
28:36 Add hover effect and cursor change when button is disabled
34:06 You can create your own quiz app or quiz website using HTML, CSS, and JavaScript.
Crafted by Merlin AI.
thank you! This was very helpful and I learnt a lot!
Amazing work, thanks so much
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
This is exactly what I was looking for, and you made it so simple! Thank you so much!
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
Thank you! Informative and easy to follow!
I have learned to much things from this video
Glad you liked it. Thanks for your comment. 😊
But not English
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
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
Amazing! thank you so much
Thank you so much teacher :)
New viewers k liye aik guide
A "question" property (string)
An "answer" property (array of objects)
A "text" property (string)
A "correct" property (boolean)
thank you from Istanbul/turkey
I also want to say thank you very much!
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
thankyou this is a big help for me!
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
Your tutorial is awesome. Pls upload source code of project too.
Thank you for the educative tutorial
Awesome, super super excellent , Keep up the good work.
thank you so much this code of yours help me at very crucial movement
thank you sir for this awesome content
Great short course! :D
For those who are getting the next question's option added to the previous qsn; Just add the resetState(); to beginning of showQuestion();
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.
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
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.
For those who need it:
* {
margin: 0;
padding : 0;
font-family: 'Poppins' , sans-serif;
box-sizing: border-box;
}
I think i'm the only one that found this hard to grasp!
Love IT. 💗💗
Thank you so much...
Glad you liked it. You're welcome! 😊
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'.
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?
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
AWESOME JOB BRO!
Thanks a lot that was great, but what does dataset do??❤❤
thank u mister very nice
thanks so much
You're welcome! Keep coding.😊
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.
tyyy man! it helped me so much
Please provide time set in this quiz for the next video.❤
it's bit harder for beginner in my opinion . recommended to do this after next 4-5 projects if you're new to js
Bro why are you changed your channel logo and name your previous logo and name were amazing and easy
thank you for the tutorial!