Kodeclik Blog
Building a simple clicker in Javascript
The term "clicker" in JavaScript usually refers to a program that expects the user to click on an element on a web page, whether it is for getting user input, playing a game, or executing a function. In each case, the clicker is used to trigger a specific action or behavior.
We will create a simple clicker game here. A clicker game is a type of game where the player clicks on the screen to earn points or currency. The more the player clicks, the more points they earn. Clicker games are often simple and addictive, and can be created using JavaScript and other programming languages.
Consider the below code:
<!DOCTYPE html>
<html>
<head>
<title>Click Counter</title>
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
button {
background-color: blue;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
#counter {
font-size: 48px;
color: #4CAF50;
text-align: center;
margin-top: 20px;
}
</style>
</head>
<body>
<button id="click-me">Click Me</button>
0
<script>
var count = 0;
var button = document.getElementById("click-me");
var counter = document.getElementById("counter");
button.addEventListener("click", function() {
count++;
counter.innerHTML = count;
});
</script>
</body>
</html>The code is a simple HTML document that creates a web page with a button and a counter that increments each time the button is clicked. The CSS code styles the web page, and the JavaScript code adds interactivity to the web page by listening for a "click" event on the button element and updating the counter element with the new count value.
First, the CSS code sets the background color, font family, and other properties of the body element. It also sets the background color, font size, and other properties of the button element and the font size, color, and other properties of the counter element. The CSS code uses flexbox to center the button and counter elements vertically and horizontally on the web page.
The HTML code creates a button element with the text "Click Me" and an id attribute of "click-me". It also creates a div element with an id attribute of "counter" and an initial value of 0. The JavaScript code selects the button and counter elements by their id attributes and assigns them to variables called "button" and "counter", respectively.
The JavaScript code adds an event listener to the button element that listens for a "click" event and executes the function inside the curly braces when the event occurs. The function increments the value of the "count" variable by 1 each time the button is clicked and sets the innerHTML property of the counter element to the value of the "count" variable, which updates the counter on the web page.
When you run this code, it will create a page that looks like this (after a few clicks):
In summary, our code above creates a web page with a button and a counter that increments each time the button is clicked. The CSS code styles the web page, and the JavaScript code adds interactivity to the web page by listening for a "click" event on the button element and updating the counter element with the new count value. The code uses HTML, CSS, and JavaScript to create a simple but functional web page.
If you liked this blogpost, checkout our blogpost on incrementing variables in Javascript. Also checkout our exhaustive blogpost on buttons in Javascript - how to style them and program them!
Want to learn Javascript with us? Sign up for 1:1 or small group classes.
