What we will build:
The file structure is pretty simple as you can see from above we have the app directory.
After creating all the directories also create an index.html page in the root directory.
In the CSS folder create
reset.css and style.css in the js folder create
index.js the images folder as all the images we will use in our app. You can clone the repository for the project on Github here.
The Start Page
The Document Object Model is a cross-platform and language-independent interface that treats an XML or HTML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document with a logical tree.Wikipedia
If you right-click on your web browser use Chrome and click inspect and click on the Console tab and type in
On the window object, we also have the document object type in
`element = document.querySelector(selectors);`
In our code above you will see that we selected the container div using the id selector, then we created a startPage function that renders the start page. You can see that the code is self-documenting, You can read more about about the DOM here and all its methods. There are lot’s of methods there but you will be using a handful.
// For selection
document.querySelectorAll()// For Creating new element
document.createElement()// For Adding and Removing CSS class
document.classList.remove()// Add content to tags
The Quiz Page
Building the Quiz Page followed similar patterns creating each element and rendering them on the page in order. And also Adding Class to style them.
In the CSS folder have a
style.css that holds our custom CSS and
reset.css the reset helps us remove any browser default CSS styles so we can begin styling without any surprises. Both codes are really easy to walk through.
You can view the complete Site here.
See you in the next part where we complete the game logic and get data from a remote API.