August 25, 2020
  • 7:34 am Cách tách gộp ô trong Excel – How to Merge Cells in Excel
  • 7:23 am Cách xem mật khẩu wifi cho điện thoại Samsung , Oppo, wifi Tenda , iPhone| Dương Văn An
  • 7:10 am HƯỚNG TẢI NHẠC YOUTUBE VỀ MÁY TÍNH DẠNG FILE ZING MP3 ĐƠN GIẢN NHẤT
  • 6:58 am One Punch Man – Tập 05 [Việt sub] [Bản giới hạn]
  • 6:43 am Bài tập Excel nâng cao có hướng dẫn giải [Cực Hay]



In this video I will be breaking down the entire process of building a quiz application using JavaScript. We will also be styling the entire application using modern styling practices. This video will not only teach you how to build a quiz application, but it will breakdown the steps you need to take when building any project.

We will be using modern JavaScript best practices to create this application. We will also be using CSS variables to make changing our site on demand incredibly easy. By the end of this video you will have an entire quiz application built which can be easily extended and customized.

📚 Materials/References:

CSS Box Model Explained:
GitHub Code:
CodePen Code:

🧠 Concepts Covered:

– How to dynamically show/hide elements
– How to remove child elements
– Array randomization
– Who the best YouTuber is 😜
– CSS variables

🌎 Find Me Here:

Twitter:
Discord:
GitHub:
CodePen:

#QuizApp #WDS #JavaScript

Nguồn: https://alimentproteine.com/

Xem thêm bài viết khác: https://alimentproteine.com/game/

admin

RELATED ARTICLES

40 COMMENTS

  1. Sachmi Posted on June 26, 2020 at 8:37 am

    I love it how you explain step be step how to make this.

    Reply
  2. Moca Coca Posted on June 26, 2020 at 8:37 am

    How do you get the app on your iPhone?And then send it to someone?

    Reply
  3. Palash Barman Posted on June 26, 2020 at 8:37 am

    Cool project 👌

    Reply
  4. Aurall Posted on June 26, 2020 at 8:37 am

    Great work. but you just made it difficult to understand by shuffling the questions..

    Reply
  5. Isaac Nathaniel Posted on June 26, 2020 at 8:37 am

    Cool man I always wanted to do that

    Reply
  6. Gory To Posted on June 26, 2020 at 8:37 am

    It's possible to double one question and share it to another element to make two person answer the same question at the same time?

    Reply
  7. L A Posted on June 26, 2020 at 8:37 am

    at 18:05, why question.question ?

    Reply
  8. Skangendo Posted on June 26, 2020 at 8:37 am

    Hey, this might be a bit old, but how did you get the start button to show after you did display: hide; ?????

    Thanks

    Reply
  9. Gustav Brolin Posted on June 26, 2020 at 8:37 am

    I don't know why but the question I put in, doesn't appear! The text (question) that appears is from the .html. Does anyone know how to fix this?

    Reply
  10. Keng Thế Posted on June 26, 2020 at 8:37 am

    Very nice explanation. thank you so much!

    Reply
  11. Attila E Posted on June 26, 2020 at 8:37 am

    1.0 fast, 0.75 still fast, 0.5 better, 0.25 fell asleep 😀😀😀 just joking! It has to be fast, otherwise you would sit and listen to for hours. Keep on doing! Thanks for your work!

    Reply
  12. Francis Martinez Posted on June 26, 2020 at 8:37 am

    dios, de verdad siento que te amo, creo que me salvastes el día

    Reply
  13. enkr Posted on June 26, 2020 at 8:37 am

    what is the extension it shows the definition of the codes?

    Reply
  14. Siosaia Fonua Posted on June 26, 2020 at 8:37 am

    Nice quiz. It would be nice if you share how to share results via Facebook, including an og image, and other og meta data

    Reply
  15. ItsMD Posted on June 26, 2020 at 8:37 am

    Nice Video👍
    #ItsMD

    Reply
  16. Rahul Yadav Posted on June 26, 2020 at 8:37 am

    Hello sir, very nice video, but it's your js code actually working on Angular?

    Reply
  17. Vicente Sayson Posted on June 26, 2020 at 8:37 am

    Thank you for this sir, but I get error at Script part which says:

    "script.js:2 Uncaught TypeError: Cannot read property 'addEventListener' of null at script.js:2"

    what could be wrong? i followed everything

    Reply
  18. AJ Tech Posted on June 26, 2020 at 8:37 am

    Quiz codehttps://youtu.be/NKfb6dQFaZM

    Reply
  19. reda Posted on June 26, 2020 at 8:37 am

    what if i don't want to use a next button instead when the user click an answer the quiz automatically go the next question ? if anybody has an idea please share it

    Reply
  20. Tech World Posted on June 26, 2020 at 8:37 am

    Thank you for this. You really made this simpler and easier to understand!

    Reply
  21. Yuri Yarin Posted on June 26, 2020 at 8:37 am

    I really liked this video and I learned a lot from it. I just wished that you would build the app simply first and then add the complicated and extra features later. I mean the background colors were not that useful so it took me a while how to figure out how to take them out without the breaking the app. Thanks for the video though and learned from the color changes regardless of the fact that I'm not using it.

    Reply
  22. Sabina O Ogunsanya Posted on June 26, 2020 at 8:37 am

    Hi, nice video you've got here, I kinda need your help, I try to replicate the JS, but I keep getting an error, I've literally checked all through but I'm stuck. Can you help please? Thank you 🙏🏽

    Reply
  23. KarMuqabla Posted on June 26, 2020 at 8:37 am

    This is an excellent video. Super intelligent coding. I only wish the code could be copied or downloaded 🙂

    Reply
  24. Sareem Posted on June 26, 2020 at 8:37 am

    Ok,I'm pretty sure i typed "simple javascript programs", but anyways great tutorial man!

    Reply
  25. Abdulkadir YÜZEN Posted on June 26, 2020 at 8:37 am

    Hello, I have a question for you. How can I define more than one variable name in the "for" loop with "js"? Thanks.

    Reply
  26. ankit kumar Posted on June 26, 2020 at 8:37 am

    Plz tell me bro how to hack quz ans

    Reply
  27. Epoch plus5 Posted on June 26, 2020 at 8:37 am

    i dont know, followed instructions to a t but mine looks very different…doesnt even work when i use his code off github

    Reply
  28. Bruno Elo Posted on June 26, 2020 at 8:37 am

    Please how can I loop through multiple questions from the array of object?
    I'm not quite understanding the for each loop

    Reply
  29. Hero Josh Posted on June 26, 2020 at 8:37 am

    This is really great,. could you also show how to add a score

    Reply
  30. Magdalena Parra Posted on June 26, 2020 at 8:37 am

    What if I don't need right or wrong answers but rather different scores that would be summed at the end?

    Reply
  31. daniel villarroel Posted on June 26, 2020 at 8:37 am

    why u use question to access the questions object i mean how it doesnt create an error i thought you had to call the same name of the variable for the questions

    Reply
  32. Prakad Alpha Posted on June 26, 2020 at 8:37 am

    Great video man..now inspecting the element shows the data attribute?? so we can know the answer..!!

    Reply
  33. Pljuvac svih stilova Posted on June 26, 2020 at 8:37 am

    Jeez 0.75 is still to fast. Had to set it to 0.5 😀 Great tutorial as always,but you are in some serious hurry my friend 😀 Us noobs can`t follow you.

    Reply
  34. Shanmugam It Posted on June 26, 2020 at 8:37 am

    i have one doubt here how to store the value and how to show the result

    Reply
  35. Tubitus - Photoshop tutorials Posted on June 26, 2020 at 8:37 am

    Awesome man, I did the whole project

    Reply
  36. code, designs, security Posted on June 26, 2020 at 8:37 am

    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

    Reply
  37. Meena Murumkar Posted on June 26, 2020 at 8:37 am

    This is so helpful! Thanks a lot man!

    Reply
  38. Ago KN Posted on June 26, 2020 at 8:37 am

    HELP!
    what does this do: showQuestion(shuffledQuestions[currentQuestionIndex])

    Reply
  39. Curlyy Posted on June 26, 2020 at 8:37 am

    Fun drinking game. Take a shot every time he says Question.

    Reply
  40. PandyBearMusic Posted on June 26, 2020 at 8:37 am

    My start button isnt working for some reason 🙁

    Reply
LEAVE A COMMENT