Introduction:
Hello everyone! 👋 Today, I'm thrilled to share my experience of building a fully functional calculator from scratch using HTML, CSS, and JavaScript. This project was not only a great way to practice my front-end development skills but also a practical tool that I can use daily.
Step 1: Project Setup
I began by creating a new folder for my project and setting up the essential file structure:
index.html: The main HTML file.style.css: For styling the calculator.script.js: Where I implemented the calculator logic.images: A folder for icons and images (if needed).Step 2: HTML Structure
In the index.html file, I structured the HTML elements for the calculator. I created a container for the calculator display, buttons for digits and operations, and a clear button.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Head content goes here -->
</head>
<body>
<div class="calculator">
<div class="display">0</div>
<button class="btn">1</button>
<!-- Add buttons for other digits and operations -->
<button class="btn clear">C</button>
</div>
<script src="script.js"></script>
</body>
</html>
Step 3: Styling with CSS
I used CSS to style the calculator and make it visually appealing. I defined styles for the calculator container, buttons, and display.
/* Basic styling */
body {
font-family: 'Arial', sans-serif;
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.calculator {
width: 300px;
background-color: #333;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
padding: 20px;
text-align: right;
}
.display {
color: white;
font-size: 2em;
padding: 10px;
background-color: #222;
border-radius: 3px;
}
.btn {
/* Styles for calculator buttons */
}
.clear {
background-color: #ff6666;
}
Step 4: JavaScript Logic
The core functionality of the calculator is in the script.js file. I wrote JavaScript code to: