10 Small JavaScript Apps
Part 2 — Quiz app
Okay, so this was a fun one for me and is open to all kinds of refactoring restyling and expansion so I love it!
Let’s get started. We will be using HTML, CSS, and vanilla JS for this.
Let’s start with HTML and get some stuff of the page…
Pretty basic here, we have a container we will style, inside that we have a header and a unordered list of possible answers and at the bottom, a submit button.
Without css or js this is what we have so far…
Let’s add some style…
now, that looks better…
ok now on to the JS where we can write out our Q’s and A’s and handle some functionality.
First of all let’s make some questions in an array like so…
and now our functionality…
This is how we will get all our html elements and can now interact with them.
Now for the meat of our app…
our app now looks like this…
this also looks ok on mobile and can be expanded to many more questions and different styling or sound effects all that can be added. This was super fun to make and you can play too just click the link below. Deployed with heroku.