Building a Simple Calculator Web App: HTML, CSS, and JavaScript Explained

muskankumari
3 min readFeb 18, 2024

--

Introduction:

In this blog post, we will delve into the creation of a basic calculator web application using HTML, CSS, and JavaScript. This hands-on project will provide a comprehensive understanding of these essential web development technologies. Follow along as we break down the key components and concepts behind this small calculator project, enhancing your skills in web development.

Simple JavaScript project

HTML Structure:

Let’s begin by examining the HTML structure, which forms the backbone of our web page:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<!-- Existing meta tags... -->
<meta
name="description"
content="Build a simple calculator web app using HTML, CSS, and JavaScript. Learn the fundamentals of web development through hands-on coding."
/>
<meta
name="keywords"
content="calculator, web development, HTML, CSS, JavaScript, beginner project"
/>

<title>Calculator</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="calc">
<input type="text" id="inputtext" placeholder="0" />

<button onclick="clr()">C</button>
<button onclick="del()">DEL</button>
<button onclick="calculate('%')">%</button>
<button onclick="calculate('/')">/</button>
<button onclick="calculate('7')">7</button>
<button onclick="calculate('8')">8</button>
<button onclick="calculate('9')">9</button>
<button onclick="calculate('=')">=</button>
<button onclick="calculate('4')">4</button>
<button onclick="calculate('5')">5</button>
<button onclick="calculate('6')">6</button>
<button onclick="calculate('-')">-</button>
<button onclick="calculate('1')">1</button>
<button onclick="calculate('2')">2</button>
<button onclick="calculate('3')">3</button>
<button onclick="calculate('+')">+</button>
<button onclick="calculate('.')">.</button>
<button onclick="calculate(0)">0</button>
<button class="equal" onclick="calculateResult()">=</button>
<script src="index.js"></script>
</div>
</div>
</body>
</html>
  • The <meta> tags define document metadata, including character set, compatibility, and viewport settings.
  • The <title> tag sets the page title.
  • The <link> tag links the HTML file to an external CSS file for styling.

CSS Styling:

Now, let’s review the CSS styling that enhances the visual presentation of our calculator:

* {
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
font-family: sans-serif;
background-color: #ecf0f3;
}

.container {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #ecf0f3;
}

.calc {
box-shadow: 6px 6px 13px #fff,
6px 6px 13px rgba(0, 0, 0, .16);
border-radius: 28px;
padding: 16px;
display: grid;
grid-template-columns: repeat(4, 66px);
}

input {
grid-column: span 4;
height: 68px;
width: 258px;
box-shadow: inset -6px -6px 13px #fff,
inset 6px 6px 13px rgba(0, 0, 0, .16);
background-color: #ecf0f3;
border: none;
border-radius: 32px;
color: rgba(26, 25, 25);
text-align: end;
margin: 40px 0px 30px 0px;
padding: 20px;
font-size: 40px;
}

button {
box-shadow: inset 6px 6px 13px #fff,
6px 6px 13px rgba(0, 0, 0, .16);
background-color: #ecf0f3;
border: none;
border-radius: 50%;
width: 50px;
height: 50px;
margin: 10px;
font-weight: bold;
font-size: 20px;


}

.equal {
width: 120px;
border-radius: 42px;
box-shadow: inset 6px 6px 13px #fff,
6px 6px 13px rgba(0, 0, 0, .16);
background-color: #ecf0f3;

}
  • Universal styles apply a consistent look to all elements.
  • Styles for .container and .calc provide layout and design for the calculator.
  • Specific styles for input, button, and .equal create a cohesive and visually appealing user interface.

JavaScript Functionality:

Moving on to the JavaScript functionality that brings our calculator to life:

let result = document.getElementById("inputtext");

let calculate = (number) => {
result.value = result.value + number;
};

let calculateResult = () => {
try {
result.value = eval(result.value);
} catch (err) {
alert("Enter valid input");
}
};

function clr() {
result.value = "";
}

function del() {
result.value = result.value.slice(0, -1);
}
  • result references the input field.
  • calculate(number) appends the clicked button value to the input field.
  • calculateResult() evaluates and displays the result using eval() with error handling.
  • clr() clears the input field, and del() deletes the last character

Conclusion:

By combining HTML for structure, CSS for styling, and JavaScript for functionality, we’ve created a simple yet functional calculator web application. This project serves as a great starting point for beginners to understand the synergy between these three core web development technologies. Feel free to customize and expand upon this project as you continue to explore the vast world of web development.

GitHub Code Link: Muskankumari2002/SimpleWebCalculator (github.com)

Happy coding!

--

--

muskankumari
muskankumari

Written by muskankumari

Final-year student passionate about tech. Blogging on studied topics & showcasing ongoing projects. Exploring the future of innovation. 🚀 #TechEnthusiast

No responses yet