Hey guys in this post, we will create a simple counter application in Javascript. The project is live on the web.
Table of Contents
Topics covered
The idea was to click on either one of two buttons that registered the count of the on-page element. This application involves the following topics –
- DOM Manipulation
- Control Structures
- Array.forEach()
- Javascript CSS Manipulation
- eventListeners
Complete source code
The below image shows you the project structure –
Add styles to the application
Create a main.css file and add the following content
:root {
--mainWhite: #f5f5f5;
--mainGreen: #7fb800;
--mainBlue: #0d2c54;
--lightBlue: #00a6ed;
--mainBlack: #333333;
}
.max-height {
min-height: 100vh;
}
body {
background: url("../img/mainBcg.jpeg") center/cover fixed no-repeat;
color: var(--mainWhite);
}
.main-container {
border: 0.1rem solid var(--mainWhite);
box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.9);
border-radius: 0.2rem;
}
#counter {
color: var(--mainGreen);
font-size: 10rem;
color: var(--mainBlack);
}
.prevBtn,
.nextBtn {
box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.9);
background: var(--mainBlue);
color: var(--mainWhite);
}
.prevBtn:hover {
background: var(--lightBlue);
}
.nextBtn:hover {
background: var(--lightBlue);
}
Add scripts to the application
Create an app.js file and add the following content
(function(){
const buttons = document.querySelectorAll('.counterBtn')
let count= 0
//Add event listeners and functionailty to each button
buttons.forEach(function(button){
button.addEventListener('click', function(){
if (button.classList.contains('prevBtn')){
count--
} else if (button.classList.contains('nextBtn')){
count++
}
//Select the counter text
const counter = document.querySelector('#counter')
counter.textContent = count
if (count < 0 ){ counter.style.color = 'red' } else if (count > 0){
counter.style.color = 'green'
} else {
counter.style.color = '#333333'
}
})
})
})()
Add HTML to the application
Create an index.html file and add the following content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- bootstrap css -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- main css -->
<link rel="stylesheet" href="css/main.css">
<!-- google fonts -->
<link href="https://fonts.googleapis.com/css?family=Courgette" rel="stylesheet">
<!-- font awesome -->
<script src="js/all.js"></script>
<title>Counter Project</title>
<style>
</style>
</head>
<body>
<div class="container">
<div class="row max-height align-items-center">
<div class="col-10 mx-auto col-md-6 text-center main-container p-5">
<h1 class="text-uppercase">counter</h1>
<h1 id="counter">0</h1>
<div class="btn-container d-flex justify-content-around flex-wrap">
<button class="btn counterBtn prevBtn text-uppercase m-2">lower count</button>
<button class="btn counterBtn nextBtn text-uppercase m-2">add count</button>
</div>
</div>
</div>
</div>
<!-- jquery -->
<script src="js/jquery-3.3.1.min.js"></script>
<!-- bootstrap js -->
<script src="js/bootstrap.bundle.min.js"></script>
<!-- script js -->
<script src="js/app.js"></script>
</body>
</html>
Note: Make sure the download the bootstrap.css, bootstrap.js, and jquery.js library from the internet add them to the respective folders. You can download the images from the Github repository.
Download the complete source code from github repository
