-
I started by creating all the files for the project: index.html, style,css, movietrivia.js, and README.md.
-
I pseudocoded what I needed to do to make this code work.
-
Then, I did some research and found some good trivia to add.
-
I created the general layout of the html page and added the DOM elements to connect it to the JavaScript.
-
Next, I started to add the CSS (the background colors for the answer buttons refused to work like I wanted).
-
I then set global variables that I would need for the different aspects of the project: time, score, etc.
-
I then got started on the functions, which was the hardest part by far:
- Start button event
- Start game (with many if else statements to hide elements on the page)
- Setting and showing questions (broken)
- Getting the right answers and checking if they were correct
- Next button event
- Clearing old answers
- Countdown timer
- Scoreboard (incomplete)
The main problems that I had were the score counter (which meant I was never able to get to the scoreboard) and the questions appearing.
When I first started, I was able to get the questions to appear by random and in the div that I designated (see image). But as soon as I tried to validate the answers and get the next button to work, the questions went away and I'm not sure how to undo what I did without the whole thing unraveling.
No matter what I tried for the score, it wouldn't work.