|
In this article, we will discuss how to build a calculator using HTML, CSS, and JavaScript. This calculator will not only have a beautiful design but will also function accurately, making it a valuable tool for anyone who needs to perform calculations.
Calculators are a fundamental tool that is used in many different fields, from finance to engineering. They make performing complex calculations much easier, allowing users to save time and avoid making errors. In this project, we will create a calculator that looks realistic and functions just like a physical calculator.
To begin, we will start by designing the user interface using HTML and CSS. The design of the calculator will be an important aspect of this project, as it will be the first thing that users see when they open the calculator. We want to create a design that is both functional and aesthetically pleasing, making it easy for users to navigate and perform calculations.
Once the design is complete, we will move on to the functionality of the calculator. We will use JavaScript to create a calculator that can perform basic operations like addition, subtraction, multiplication, and division. We will also add more advanced functions like the cos, sin, and tan theta functions, which are commonly used in scientific calculations.
Another important feature of our calculator will be the ability to generate random numbers. This feature will be especially useful for anyone who needs to perform simulations or statistical calculations. We will use JavaScript's random number generator function to add this functionality to our calculator.
After we have added all of the necessary functionality to our calculator, we will test it thoroughly to ensure that it works as expected. We will also make sure that the design of the calculator is responsive, so that it works well on different screen sizes and devices.
Build a Calculator using Html Css and JavaScript [Source Code]
To build a Calculator. First, you need to create three files, one HTML, one CSS and another one is a JS file to build a Calculator.. After creating these files just paste the following codes in your file.
After creating an HTML file with the name of index.html and copy and paste the given codes in your HTML file. Remember, you’ve to create a file with the .html extension. You’ve to download Calculator files from the given download button to use.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Calculator Web App</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main class="calculator">
<h1 class="brand_name"><span class="first_name">Js </span><span class="last_name">Calculator</span></h1>
<section class="row row-first">
<input type="text" autofocus placeholder="0" class="output_screen">
</section>
<section class="row row-second">
<button>log</button>
<button>x!</button>
<button>(</button>
<button>)</button>
<button>√</button>
<button>π</button>
</section>
<section class="row row-third">
<button>sin</button>
<button>cos</button>
<button>tan</button>
<button class="random">random</button>
</section>
<section class="row">
<button>7</button>
<button>8</button>
<button>9</button>
<button class="delete">DEL</button>
<button class="clear">AC</button>
</section>
<section class="row">
<button>4</button>
<button>5</button>
<button>6</button>
<button>×</button>
<button>÷</button>
</section>
<section class="row">
<button>1</button>
<button>2</button>
<button>3</button>
<button>+</button>
<button>−</button>
</section>
<section class="row">
<button>0</button>
<button>.</button>
<button>%</button>
<button class="equals">=</button>
</section>
</main>
<script src="app.js"></script>
</body>
</html>
After that Create a Css file with the name of style.css and copy and paste in your css file. Remember, you’ve to create a file with the .css extension.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font: lighter 1.6rem Helvetica, sans-serif;
background-color: #FDFDFF;
}
main.calculator {
width: 35rem;
height: 60rem;
background-color: rgba(58, 59, 70, 1);
border-radius: 2rem;
padding: 2rem 1rem;
margin: 0 3rem;
display: grid;
grid-template-rows: repeat(8, 1fr);
grid-gap: .8rem;
box-shadow: 0 .15rem .1rem 0 black;
}
.brand_name {
font-size: 1.6rem;
color: white;
}
.first_name {
font-weight: lighter;
}
.last_name {
font-weight: bolder;
}
.row {
width: 100%;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: .8rem;
}
.row-second {
grid-template-columns: repeat(6, 1fr);
margin-top: .8rem;
}
.row-second button,
.row-third button {
background-color: rgba(121, 122, 140, 1);
font-size: 1.1rem;
}
.row-second button {
width: 3rem;
height: 3rem;
border-radius: 50%;
}
.random,
.equals {
grid-column: span 2;
}
.delete,
.clear {
background-color: rgba(178, 0, 0, 1);
font-size: 1.1rem;
color: black;
}
button {
border: none;
outline: none;
border-radius: 1.5rem;
background-color: rgba(5, 9, 33, 1);
color: white;
font: bolder 1.4rem sans-serif;
box-shadow: 0 .1rem .1rem 0 rgba(91, 92, 111, 1);
transition: .2s ease-in;
}
button:hover {
opacity: .8;
cursor: pointer;
}
button:active {
box-shadow: none;
transform: scale(.92);
}
.output_screen {
grid-column: 1 / -1;
padding: 0 .5rem;
margin-bottom: 1rem;
height: 7rem;
border: none;
outline: none;
border-radius: .4rem;
text-align: right;
font: bolder 3.5rem sans-serif;
background-color: rgb(188, 205, 151);
box-shadow: inset .2rem .3rem .2rem .3rem,
inset .2rem .3rem .5rem .3rem;
}
Lastly at the last Create Js file with the name of app.js and copy and paste in your Js file. Remember, you've to create a file with the.js extension.
let output_screen = document.querySelector('.output_screen');
const equals = document.querySelector('.equals');
const buttons = document.querySelectorAll('.row');
for (let btn of buttons) {
for (let operator of btn.children) {
operator.onclick = function(e) {
let operator_value = e.target.innerHTML
switch (operator_value) {
case '×':
output_screen.value += '*';
break;
case '÷':
output_screen.value += '/';
break;
case '−':
output_screen.value += '-';
break;
case 'log':
output_screen.value = Math.log(output_screen.value);
break;
case 'sin':
output_screen.value = Math.sin(output_screen.value);
break;
case 'cos':
output_screen.value = Math.cos(output_screen.value);
break;
case 'tan':
output_screen.value = Math.tan(output_screen.value);
break;
case 'random':
output_screen.value = Math.round(Math.random(output_screen.value) * 100);
break;
case '√':
output_screen.value = Math.sqrt(output_screen.value);
break;
case 'π':
output_screen.value = 3.14159265359;
break;
case 'DEL':
output_screen.value = output_screen.value.slice(0, -1);
break;
case 'AC':
output_screen.value = '';
break;
case 'x!':
let fact = 1;
for (let i = 1; i <= parseInt(output_screen.value); i++) {
fact = fact * i;
}
output_screen.value = fact;
break;
default:
if (operator_value == '=') {
output_screen.value += '';
} else {
output_screen.value += operator_value;
}
}
}
}
}
equals.addEventListener('click', () => {
try {
output_screen.value = eval(output_screen.value);
} catch (err) {
output_screen.value = "Error";
}
})
Finally, build a calculator using HTML, CSS, and JavaScript is a fun and rewarding project that can be used in a variety of different contexts. This calculator will be a valuable tool that you can use. By following the steps outlined in this article, you can create a calculator that looks realistic, functions accurately, and is easy to use. You can easily obtain the source code files by clicking on the download button provided, completely free of charge. The downloaded zip file includes the project folder with all the necessary source code files.