Whether you're a new web developer or just looking to add a fun project to your portfolio, this step-by-step guide will provide you with the knowledge and skills you need to fulfill your Web development dreams. We'll start with the basics, setting up the HTML structure, and then move on to styling using CSS to make the Calculator look good. Finally, we'll take a closer look at JavaScript to implement Calculator logic to ensure a smooth and interactive.
This JavaScript project is a simple calculator application designed to perform basic arithmetic operations such as addition, subtraction, multiplication, and division. It provides users with a convenient tool for performing mathematical calculations within a web browser.
Challenges Faced: During development, one of the main challenges was implementing the logic to handle different types of user input and ensuring accurate calculation results. Additionally, designing an intuitive and responsive user interface posed its own set of challenges, especially in terms of layout and styling.
Performance Optimization: Optimizing the performance of the calculator application, especially for complex calculations or large datasets, required strategic optimizations in algorithm design and code efficiency to ensure smooth user experience without significant latency.
Step 1(HTML Code): To begin, create the basic structure of your Calculator using HTML. Define the flex where the Calculator will take place and set up the necessary elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator Made By Me...</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="calculator">
<input type="text" id="main-input" placeholder="0">
<div class="button-row mt-4">
<button class="operator">AC</button>
<button class="operator">DEL</button>
<button class="operator">%</button>
<button class="operator">/</button>
</div>
<div class="button-row mt-3">
<button>7</button>>
<button>8</button>>
<button>9</button>>
<button class="operator">*</button>>
</div>
<div class="button-row mt-3">
<button>4</button>
<button>5</button>
<button>6</button>
<button class="operator">-</button>
</div>
<div class="button-row mt-3">
<button>1</button>
<button>2</button>
<button>3</button>
<button class="operator">+</button>
</div>
<div class="button-row mt-3">
<button>00</button>
<button>0</button>
<button>.</button>
<button id="equals">=</button>
</div>
Step 2(CSS Code): Make your Calculator visually appealing by adding styles with CSS. Design the project board, pieces, and overall layout to enhance the user experience. let's break down the CSS code:
body {
background:linear-gradient(45deg, #0a0a0a, #3a4452);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.calculator{
border: 1px solid #717377;
padding: 20px;
border-radius: 16px;
background: transparent;
box-shadow: 0px 3px 15px rgba(113, 115,119, 0.5);
}
#main-input {
width: 320px;
border: none;
padding: 24px;
margin: 10px;
background-color: transparent;
box-shadow: 0px 3px 15px rgbs(84, 84, 84, 0.1);
font-size: 48px;
text-align: right;
cursor: pointer;
color: #fff;
outline: 0;
}
button {
border: 0;
width: 60px;
height: 60px;
margin: 10px;
border-radius: 50px;
background: transparent;
color: #ffffff;
font-size: 20px;
cursor: pointer;
box-shadow: -8px -8px 15px rgba(255, 255, 255, 0.1);
}
Step 3(JAVASCRIPT Code): Bring Calculator to life by implementing the calculator logic using JavaScript. Handle operations.
let input = document.getElementById("main-input")
let buttons = document.querySelectorAll("button")
let string = ""
let arr = Array.from(buttons)
arr.forEach((button) => {
button.addEventListener("click", (item) => {
let clickedButton = item.target.innerHTML
switch (clickedButton) {
case "=":
string = eval(string)
input.value = string;
string = ""
break
case "AC":
string = ""
input.value = string
break
case "DEL":
string = string.slice(0, string.length - 1)
input.value = string
break
default:
string += item.target.innerHTML
input.value = string
break
}
})
})