The JavaScript Code Quiz is an applicaton that will test basic JavaScript knowledge. A player will be presented with coding questions in a multiple choice format and the quiz will have a time limit of 100 seconds. Every incorrect answer will subtract 10 seconds from the timer.
This code snippet shows how to create an HTML button element in JavaScript and how the "Submit" button stores user-generated information (initials and score) and saves it to local storage
-
The document.createElement() method creates the HTML element by tagName and it can be done in JavaScript
-
The element.setAttribute() method sets the value of an attribute on a specified HTML element and it can be done in JavaScript
-
The element.textContent property will sets the text content of a specified node and its descendants and it can be done in JavaScript
-
The element.appendChild() method will adds the node as the last child on a specified parent node and it can be done in JavaScript
-
The element.addEventListener() method attaches an event handler (e.g. "click") to a specified element
-
The localStorage.setItem() method will add an object with a key and value to local storage or update the key's value if it already exists. It can only store data as a string
-
The window.location object can be used to redirect the browser to a new page (i.e. HTML and JavaScript file)
var submitElement = document.createElement("button");
submitElement.setAttribute("id", "submit-button");
submitElement.setAttribute("type", "submit");
submitElement.textContent = "Submit";
questionElement.appendChild(submitElement);
submitElement.addEventListener("click", function () {
var initials = inputElement.value;
if (initials === "") {
alert("Please enter your initials");
} else {
var playerScore = {
initials: initials,
score: score
};
localStorage.setItem("playerScore", JSON.stringify(playerScore));
window.location = "index-scoreboard.html";
}
});
- How to use local storage, window.location, event listeners, appendChild, setAttributes, createElement, and more
- The importance of using variables correctly and the importance of creating placeholder variables in the beginning
- The importance of using appendChild in the correct location. It should not always be right after the creation of the element
Elliot Park