UNDERSTANDING QUERY SELECTORS WHILE BUILDING A JAVASCRIPT COUNTER
If you recently started JavaScript you would have come across a project that teaches about loops and iteration. It's called the counter project, where you assign a click function that allows a number to have an increment by one whenever you click the increase button, or a decrement when you click the decrease button, furthermore, you can reset to the initial value is by clicking the reset button. I was excited when I first came across this project.
Now let’s get a deeper understanding of how you can understand this project.
First, let's understand what the “ DOM " is. The DOM ( Document Object Model) is an interface between javascript and your HTML and CSS (Cascading Style Sheet), by interface, this means how javascript interacts with HTML and CSS.
You are going to manipulate the “ DOM " to change the Text from its initial value that is zero to either increase the current value or reduce it back to its original value. Starting with how the “ DOM “ can be programmed to achieve the change in the current value that is zero.
An id is given for the current value so it can be programmed easily in javascript consist of five ways you can call objects from your HTML that are listed below:
document.getElementById(): This allows you to select elements by their unique Id stated in the HTML.
2. document.getElementByClassName() :
This allows you to select objects by their class names where you can pick elements by their specified class names.
3. document.getElementByTagName(): This allows you to call elements by their tag if you decide you want to manipulate the tags by adding a function and doing pretty much anything you want to do.
4. document.querySelector(): This allows you to return the first element in the document that matches the CSS selector.
5. document.querySelector(): This allows you to return all elements in the document that matches a CSS selector.
Note: The use of uppercase and lowercase alphabets in five methods is normal in the javascript naming convention. This naming convention it’s called Carmel casing when the first letter is lowercase and any new word after it is uppercase.
Using an example to illustrate you Set an initial count to zero with this line of code
let count= 0;Then you select each element using two of the five methods mentioned earlier.
const value = document.querySelector("#value");const btns = document.querySelectorAll(".btn");The first line of code selects the first CSS selector which has an Id “ value”, the second line selects all the elements that have a class of “btn”.
Let's see the main structure of the HTML to grasp it:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css"/>
<title>Counter</title>
</head>
<body>
<main>
<div class="container">
<h1>Counter</h1>
<span id="value">0</span>
<div class="button-container">
<button class="btn decrease">Decrease</button>
<button class="btn reset">Reset</button>
<button class="btn increase">Increase</button>
</div>
</div>
<script src="main.js"></script>
</main>
</body>
</html>You can see from the HTML structure there are three buttons hence why document.querySelectorAll() was used to pick all the button classes.
Now to give each button a unique function we assign an event listener that causes an addition to the current value or subtraction to the current value and a reset according to the various buttons listed in the code.
Let’s go back to the code to see how it works
js
btns.forEach(function (btn) {
btn.addEventListener('click', function (e) {
const styles = e.currentTarget.classList;
if(styles.contains("decrease")) {
count--;
}
else if (styles.contains('increase')) {
count++;
}
else if (styles.contains("reset")){
count=0;
}
if (count > 0) {
value.style.color = 'blue'
}
value.textContent = count;
});
});The parameter (e) is automatically assigned in javascript to your function when you add an event listener.
It represents the element that was affected, an example would be the button element that was clicked.
This causes a decrease where the code states decrement.
js
if(styles.contains("decrease")) {
count--;
}Then if the style contains an increment meaning you clicked the increase button there will be an increase by one that’s the second argument when you are using an if-else statement for a condition of loops here.
js
}
else if (styles.contains('increase')) {
count++;
}The final condition is a reset to the initialize value zero when the style contains the reset.
js
else if (styles.contains("reset")){
count=0;
}I added color to the initial value of zero making it blue if the count is greater than the initial value of zero.
if (count > 0) {
value.style.color = 'blue'
}
You add this line of code to update the new value
value.textContent = count;In conclusion, this project teaches you how to manipulate the DOM by using two of the five methods listed earlier that allow the selection of HTML elements to alter or add certain functions, and this project which are
The addition when the increase button that’s the count++ is clicked,
The decrement that's the count- -,
The final one the reset back to the original state which is Zero.
So there you have it that’s all for now.
