Overview
If you’re a beginner in web development, building a calculator source code in JavaScript is one of the best projects to get started with. It’s easy, useful, and helps you understand how HTML, CSS, and JavaScript work together.
This project is a simple calculator built using a single HTML file that contains both HTML and JavaScript code, along with a separate style.css file for styling. The calculator enables users to conduct essential arithmetic operations, covering addition, subtraction, multiplication, and division.
Project Structure
The mini project is classified into two files:
index.html: This file contains both the HTML structure and JavaScript logic for the calculator. It includes the HTML elements for buttons, display, and other necessary components, as well as the JavaScript functions for handling arithmetic operations and user interactions.
style.css: The CSS file styles the calculator, providing a visually appealing and responsive design. It includes styles for buttons, display, and overall layout.
Features
Basic Arithmetic Operations
The calculator supports the following basic arithmetic operations:
- Addition (+)
- Subtraction (-)
- Multiplication (*)
- Division (/)
Responsive Design
The calculator is designed to be responsive, ensuring a seamless user experience across different devices and screen sizes.
Error Handling
The project includes error handling to prevent invalid inputs. Users will receive clear user friendly error message in case of such scenario.
HTML and JS Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Calculator</title>
</head>
<body>
<div class="calculator">
<div>
<input type="text" id="screen" disabled>
</div>
<div>
<button onclick="entry('9')">9</button>
<button onclick="entry('8')">8</button>
<button onclick="entry('7')">7</button>
<button onclick="entry('+')">+</button>
</div>
<div>
<button onclick="entry('6')">6</button>
<button onclick="entry('5')">5</button>
<button onclick="entry('4')">4</button>
<button onclick="entry('-')">-</button>
</div>
<div>
<button onclick="entry('3')">3</button>
<button onclick="entry('2')">2</button>
<button onclick="entry('1')">1</button>
<button onclick="entry('*')">x</button>
</div>
<div>
<button onclick="entry('0')">0</button>
<button onclick="clrScreen()">C</button>
<button onclick="calculate()">=</button>
<button onclick="entry('/')">/</button>
</div>
</div>
<script type="text/javascript">
const x=document.getElementById('screen');
function entry(userValue){
x.value=x.value+userValue;
}
function calculate(){
try{
x.value=eval(x.value);
}
catch(error){
x.value="invalid entry";
}
}
function clrScreen(){
x.value="";
}
</script>
</body>
</html>CSS Code:
body{
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: deepskyblue;
}
.calculator{
background-color: #292929;
padding: 30px;
border-radius: 7px;
box-shadow: 0 5px;
}
.calculator button{
width: 60px;
height: 45px;
font-size: 1.3em;
margin: 5px;
border-radius: 3px;
border: none;
}
.calculator input{
margin: 5px;
width: 275px;
height: 45px;
background: #999;
color: #000;
font-size: 1.4em;
}This calculator project serves as a practical exercise for learners looking to enhance their HTML, CSS, and JavaScript skills. The use of separate files for HTML, JavaScript, and CSS follows best practices for code organization and maintainability.
Download Link:
Start with this project and keep practicing—you’ll soon be able to create more advanced projects beyond this simple calculator website code.
