
Hosted Project
JavaScript Quiz Project (Hosted on Github Pages)
Source Files
https://github.com/JS-Beginnershttps://github.com/JS-Beginners/interactive-quiz-project/interactive-quiz-project (Hosted on Github)
Project Objective
This JavaScript quiz project challenges you to code the functionality of a quiz. At the end of the quiz, your users should get a total score.
JavaScript Used
- eventListeners
- arrays
- functions
- DOM manipulation
- forEach loop
- for loops
My Personalize Summary
Ok.
So the instructor coded his JavaScript solution using jQuery.
I could have swore I purchased a core JavaScript, no-library or framework course.
But, I didn't let this stop me.
I actually used the minimize jQuery skills that I had to actually “reverse-engineer” a core JavaScript only solution.
I was pretty excited when I finally got my JavaScript quiz working.
I worked on the JavaScript file for about two hours last night, researching the functionality of jQuery's functions so I can turn them into vanilla JavaScript.
After an exhaustive night of research and coding, I went to bed and finished the project the next day after I returned from work.
Again. I was pretty excited at what I accomplished and I know you can do the same.
New Things Learned or Refreshed
Like I said in the summary above, the first thing that I learned was how to reverse-engineer jQuery to create the same thing in core JavaScript.
I did this by reading the jQuery documentation that explained a function, and then linked it to my knowledge of JavaScript.
Sometimes the jQuery docs made it easy by simply explaining the core JavaScript equivalent, but other times they did not.
The second thing I learned was debugger;
is your best friend when it come to getting your code to work.
It is much more efficient than putting a bunch of console.logs() all over your code.
If you put your debugger in the right location of your file, once it is triggered in your browser, you can quickly see which variables have which values.
In one case, I was wondering why an if statement
wasn't running.
It turned out that the debugger showed me that I was trying to compare “1” with 1.
No.
A string is not equal to a number when using (===) triple equal.
The third thing I learned, or rather was refreshed on, was that patience is key when it comes to programming.
I took me about an hour in total to methodically debug three different functions.
But, I got it done.
And now my quiz functions like a charm. ๐
Time to Code
This project took me about four hours to complete on my own.
I spent two hours one night and finished using another two hours the next day.
Your Turn!
What To Accomplish
- Download the source code from the github repository above.
- Delete the contents of the
app.js
file. - Implement the JavaScript code in your own
app.js file.
- If you think you need to see a video solution first, be sure to pick up Bluelime's 27 JavaScript Projects Beginner Course .
- Add a link to your finished project below!
What You Should See
Visit the hosted github page to see this JavaScript Quiz Project in action.
Leave a Reply