Today we will create a simple Counter Application using HTML, Tailwind CSS, and JavaScript. This app will allow users to increment or decrement a numeric value with the click of buttons. Let’s dive into the code and explanation!
Project Structure
We’ll create a basic structure for our CounterApp with the following files:
index.html: The main HTML file.styles.css: The CSS file for custom styles (if needed).script.js: The JavaScript file for the app’s functionality.
Setting Up HTML
Create an index.html file with the following content:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Counter App</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body class="flex items-center justify-center h-screen bg-gray-100">
<div class="bg-white p-8 rounded-lg shadow-md text-center">
<h1 class="text-2xl font-bold mb-4">Counter App</h1>
<div id="counter" class="text-4xl font-semibold mb-4">0</div>
<div>
<button id="decrement" class="bg-red-500 text-white px-4 py-2 rounded-lg mr-2">Decrement</button>
<button id="increment" class="bg-green-500 text-white px-4 py-2 rounded-lg">Increment</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Explanation of HTML
- We include Tailwind CSS via a CDN for styling.
- The main container is centered using Flexbox utilities from Tailwind.
- We have a heading, a display for the counter value, and two buttons for incrementing and decrementing the counter.
Adding JavaScript Functionality
Next, create a script.js file with the following code:
javascript
let count = 0;
const counterDisplay = document.getElementById('counter');
const incrementButton = document.getElementById('increment');
const decrementButton = document.getElementById('decrement');
incrementButton.addEventListener('click', () => {
count++;
updateCounterDisplay();
});
decrementButton.addEventListener('click', () => {
count--;
updateCounterDisplay();
});
function updateCounterDisplay() {
counterDisplay.textContent = count;
}
Explanation of JavaScript
- We initialize a variable
countto keep track of the current counter value. - We select the counter display and buttons using
document.getElementById. - Event listeners are added to the buttons to handle click events:
- When the increment button is clicked, we increase the count and update the display.
- When the decrement button is clicked, we decrease the count and update the display.
- The
updateCounterDisplayfunction updates the text content of the counter display.
Adding Custom Styles (Optional)
If you want to add some custom styles, you can create a styles.css file. For example:
css
body {
font-family: 'Arial', sans-serif;
}
This is optional since Tailwind CSS provides a lot of utility classes for styling.
Conclusion
You now have a fully functional Counter Application built with HTML, Tailwind CSS, and JavaScript! This project is a great way to practice your skills and understand how to manipulate the DOM with JavaScript. You can further enhance this app by adding features like reset functionality or saving the counter value in local storage. Happy coding!