Introduction:
Welcome to this exciting tutorial where you’ll create a fully functional scientific calculator using HTML, CSS, and JavaScript. This project allows you to enhance your coding skills while building something practical.
Things You Will Learn:
In this tutorial, you will:
- Set up the project folder structure.
- Write HTML to create the calculator layout.
- Style the calculator with CSS.
- Implement functionality using JavaScript.
- Handle scientific functions like sine, cosine, and logarithm.
Video Tutorial:
I would suggest you to watch the video down below for better understanding on we have implemented the functionality of this project. If you find the video helpful give it a like and subscribe to my YouTube channel where I post new tips, tricks and tutorials related to HTML, CSS and Javascript.
Â
Project Folder Structure:
Now before we move on to actual coding we create a project folder structure. We name the project folder as – ”Scientific Calculator”. Within this folder we have 3 files. These files are:
- index.html
- style.css
- script.js
HTML:
We begin with the HTML code. Copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Scientific Calculator</title>
<link
href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="calculator">
<div class="display">
<input type="text" placeholder="0" id="input" disabled />
</div>
<div class="buttons">
<input type="button" value="AC" id="clear" />
<input type="button" value="Erase" id="erase" />
<input type="button" value="1" class="input-button" />
<input type="button" value="2" class="input-button" />
<input type="button" value="3" class="input-button" />
<input type="button" value="4" class="input-button" />
<input type="button" value="5" class="input-button" />
<input type="button" value="6" class="input-button" />
<input type="button" value="7" class="input-button" />
<input type="button" value="8" class="input-button" />
<input type="button" value="9" class="input-button" />
<input type="button" value="0" class="input-button" />
<input type="button" value="." class="input-button" />
<input type="button" value="+" class="input-button" />
<input type="button" value="-" class="input-button" />
<input type="button" value="*" class="input-button" />
<input type="button" value="/" class="input-button" />
<input type="button" value="(" class="input-button" />
<input type="button" value=")" class="input-button" />
<input type="button" value="%" class="input-button" id="percent" />
<input type="button" value="=" id="equal" />
<input type="button" value="x^y" id="pow" />
<input type="button" value="sin" id="sin" />
<input type="button" value="cos" id="cos" />
<input type="button" value="tan" id="tan" />
<input type="button" value="pie" id="pi" />
<input type="button" value="e" id="e" />
<input type="button" value="log" id="log" />
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Â
CSS:
Next, we style our calculator using CSS. For this copy, the code provided to you below and paste it into your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Roboto Mono", monospace;
}
body {
background-color: #0083e9;
}
.calculator {
position: absolute;
background-color: #ffffff;
width: 400px;
height: 550px;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
padding: 30px;
border-radius: 15px;
}
input[type="text"] {
display: block;
width: 100%;
padding: 10px;
text-align: right;
font-size: 40px;
border: none;
}
.buttons {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
input[type="button"] {
padding: 5px;
margin: 5px;
border-radius: 10px;
background-color: transparent;
border: none;
font-size: 16px;
}
input[value="AC"] {
grid-column: 3/4;
background-color: #0083e9;
border: none;
color: #ffffff;
padding: 10px;
}
Â
JS:
Finally, we add functionality using Javascript. For this once again copy the code below and paste it into your script file.
let equal_pressed = 0;
let button_input = document.querySelectorAll(".input-button");
let input = document.getElementById("input");
let equal = document.getElementById("equal");
let clear = document.getElementById("clear");
let erase = document.getElementById("erase");
let percent = document.getElementById("percent");
let scientificFunctionClicked = false;
window.onload = () => {
input.value = "";
};
button_input.forEach((button_class) => {
button_class.addEventListener("click", () => {
if (equal_pressed == 1) {
input.value = "";
equal_pressed = 0;
}
input.value += button_class.value;
});
});
percent.addEventListener("click", () => {
input.value = input.value.substr(0, input.value.length - 1);
let val = input.value;
let num = [];
for (let i = val.length - 1; i >= 0; i--) {
if (/[0-9]/.test(val[i])) {
input.value = input.value.substr(0, i);
num.unshift(val[i]);
} else {
break;
}
}
input.value += parseInt(num.join("")) / 100;
});
equal.addEventListener("click", () => {
if (!scientificFunctionClicked) {
equal_pressed = 1;
let inp_val = input.value;
try {
let solution = eval(inp_val);
if (Number.isInteger(solution)) {
input.value = solution;
} else {
input.value = solution.toFixed(2);
}
} catch (err) {
alert("Error");
}
} else {
let resultArray = input.value.match(/^([a-z]+)\((.+)\)$/)?.slice(1);
const [method, value] = resultArray;
calculateSciFunction(method, value);
}
scientificFunctionClicked = false;
});
clear.addEventListener("click", () => (input.value = ""));
erase.addEventListener("click", () => {
input.value = input.value.substr(0, input.value.length - 1);
});
function calculateSciFunction(func, value) {
let result;
let expressionArray = value.split("+").map(parseFloat);
const inputValue = expressionArray.reduce(
(acc, currentValue) => acc + currentValue,
0
);
switch (func) {
case "sin":
result = Math.sin(inputValue);
break;
case "cos":
result = Math.cos(inputValue);
break;
case "tan":
result = Math.tan(inputValue);
break;
case "e":
result = Math.exp(inputValue);
break;
case "log":
result = Math.log(inputValue);
break;
default:
break;
}
if (result !== undefined) {
input.value = result.toFixed(2);
} else {
alert("Invalid Input");
}
}
document.getElementById("sin").addEventListener("click", () => {
scientificFunctionClicked = true;
input.value = "sin(" + input.value + ")";
});
document.getElementById("cos").addEventListener("click", () => {
scientificFunctionClicked = true;
input.value = "cos(" + input.value + ")";
});
document.getElementById("tan").addEventListener("click", () => {
scientificFunctionClicked = true;
input.value = "tan(" + input.value + ")";
});
document.getElementById("e").addEventListener("click", () => {
scientificFunctionClicked = true;
input.value = "e(" + input.value + ")";
});
document.getElementById("log").addEventListener("click", () => {
scientificFunctionClicked = true;
input.value = "log(" + input.value + ")";
});
document.getElementById("pi").addEventListener("click", () => {
scientificFunctionClicked = true;
input.value = 3.14;
});
document.getElementById("pow").addEventListener("click", () => {
if (input.value) {
input.value = Math.pow(input.value, 2);
} else {
input.value = Math.pow(0, 2);
}
});
Â
Conclusion:
Congratulations! You’ve built a fully functional scientific calculator. This project not only enhances your JavaScript skills but also gives you a practical tool for calculations. Experiment with additional features and improvements, and don’t forget to check out more tutorials on my YouTube channel. Happy coding!
