In this project, we'll introduce you to vanilla JS DOM manipulation by creating a small project. The basic HTML and CSS have been provided for you, and you will be adding in the Javascript to make the interface interactive. The goal of this project is to create a simple counter interface that can use three different themes.
Fork and clone this repository and open the folder in your code editor.
In this step, we'll create our Javascript file and connect it to our HTML.
- Create a new file called
index.js. - Add a
console.log('hello world')so we can see if the script is running. - Open
index.html - Inside the
<body>tag, but after the<main>element, add a<script>tag to bring in yourindex.jsfile. - Open
index.htmlin your web browser.- Open the console and look for the
hello worldconsole log from your Javascript file. If it doesn't appear, check the file path in your<script>tag.
- Open the console and look for the
/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Theme Changing Counter</title>
<link rel="stylesheet" href="./index.css" />
<link rel="stylesheet" href="./themes.css" />
</head>
<body>
<header>
<p>Choose a theme:</p>
<button>Facebook</button> <button>DevMountain</button>
<button>Twitter</button> <button>Default</button>
</header>
<main>
<h1>0</h1>
<h2>Clicks</h2>
<section>
<button>-</button> <button>Reset</button> <button>+</button>
</section>
</main>
<script src="./index.js"></script>
</body>
</html>In this step, we'll start working on the Javascript functions needed for the counter functionality in index.js
- Create a global variable called
countwith an initial value of0. We will update this global variable in all of our functions. - Next, create a function called
increasethat increases the value ofcountby 1. For now,console.logthe new value of count so you can see when the function runs. - Follow the same pattern to create a function called
decreasethat decreases the value ofcountby 1 andresetthat resets the value ofcountto 0.
/index.js
let count = 0;
function increase() {
count++;
console.log(count);
}
function decrease() {
count--;
console.log(count);
}
function reset() {
count = 0;
console.log(count);
}In this step, we will update our HTML to run our Javascript functions when the buttons are clicked.
- In
index.html, find theh1element and add anidattribute with a value of"counter".- We need an
idfor this element so we can update its text in Javascript in the next step.
- We need an
- Find the
-,Reset, and+buttons and add anonclickattribute.- The value of each
onclickattribute should be one of the Javascript functions we created earlier invoked. Ex.onclick="increase()"
- The value of each
- With your console open, click the buttons to see if the function is running and the value of
countis changing correctly.
/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Theme Changing Counter</title>
<link rel="stylesheet" href="./index.css" />
<link rel="stylesheet" href="./themes.css" />
</head>
<body>
<header>
<p>Choose a theme:</p>
<button>Facebook</button> <button>DevMountain</button>
<button>Twitter</button> <button>Default</button>
</header>
<main>
<h1 id="counter">0</h1>
<h2>Clicks</h2>
<section>
<button onclick="decrease()">-</button>
<button onclick="reset()">Reset</button>
<button onclick="increase()">+</button>
</section>
</main>
<script src="./index.js"></script>
</body>
</html>In this step, we will update our Javascript functions to update the content in the h1 instead of displaying count in the console.
- In
index.js, usedocument.getElementByIdto create a new variable calledelementthat references theh1element with an id ofcounterfromindex.html - In your
increaseanddecreasefunctions, use theinnerTextproperty of theelementvariable to change the value that is displayed in theh1with the new value ofcount. - In your
resetfunction, use theinnerHTMLproperty of theelementvariable to change its HTML to include a<mark>tag around the value ofcount. - Remove your
console.login each function.
/index.js
let count = 0;
const element = document.getElementById("counter");
function increase() {
count++;
element.innerText = count;
}
function decrease() {
count--;
element.innerText = count;
}
function reset() {
count = 0;
element.innerHTML = "<mark>" + count + "</mark>";
}In this step, we will start working on the javascript functions needed to change the themes on the page. The themes are already provided for you in themes.css and do not need to be changed. Instead, we just need to add the correct class name to the body, main and button elements.
- In
index.js, create a function calledselectThemethat takes in a string calledthemeas a parameter. - Use
document.getElementsByTagNameto select thebodyelement and change itsclassNameproperty to thethemevariable.- Remember that
document.getElementsByTagNamereturns aNodeList, which is similar to an array. You'll need to use square bracket notation to edit theclassNameproperty of the first element in theNodeList
- Remember that
- Repeat this step for the
mainelement. - We will need to select all of the buttons in the
index.htmlfile. We can usedocument.getElementsByTagNameto select all of them and assign them to a variable calledbuttons. We will to use aforloop to change theclassNameproperty for everybuttonelement in the buttons variable. Remember, when selecting elements withdocument.getElementsByTagName, it returns aNodeListwhich is an array-like list.
/index.js
function selectTheme(theme) {
document.getElementsByTagName("body")[0].className = theme;
document.getElementsByTagName("main")[0].className = theme;
const buttons = document.getElementsByTagName("button");
for (let i = 0; i < buttons.length; i++) {
buttons[i].className = theme;
}
}In this final step, we will update our HTML to run the selectTheme function and pass in the appropriate parameter when a theme button is pressed.
- In
index.html, add anonclickattribute to eachbuttoninside theheaderelement. The value for each attribute should be the invocation of theselectThemefunction, passing in a string of the appropriate theme for each button --'facebook','devmountain','twitter', or'default'
/index.html
<header>
<p>Choose a theme:</p>
<button onclick="selectTheme('facebook')">Facebook</button>
<button onclick="selectTheme('devmountain')">DevMountain</button>
<button onclick="selectTheme('twitter')">Twitter</button>
<button onclick="selectTheme('default')">Default</button>
</header>If you see a problem or a typo, please fork, make the necessary changes, and create a pull request so we can review your changes and merge them into the master repo and branch.
© DevMountain LLC, 2018. Unauthorized use and/or duplication of this material without express and written permission from DevMountain, LLC is strictly prohibited. Excerpts and links may be used, provided that full and clear credit is given to DevMountain with appropriate and specific direction to the original content.
