Experience the magic of web development by creating your own interactive calculator with HTML, CSS, and JavaScript. In this project, you’ll explore the world of front-end development as you build a fully functional calculator that can perform arithmetic operations.
Whether you’re a novice eager to learn web development or a developer looking to enhance your JavaScript skills, this step-by-step guide will teach you the essentials of HTML, CSS, and JavaScript while creating a handy tool. Join us in this journey to design and code your very own calculator, bringing mathematical convenience to your web projects!
HTML CODE
<html>
<head>
<meta charset="utf-8">
<title>JavaSctipt Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<form name="form" id="form">
<div class="display">
<input type="text" name="result" class="result" id="result" value="" placeholder="0" readonly /> </div>
<div class="buttons">
<input type="button" onclick="newFunction()" value="C">
<div class="row">
<input type="button" value="7" id="seven" onclick="calculate(7)" />
<input type="button" value="8" id="eight" onclick="calculate(8)" />
<input type="button" value="9" id="nine" onclick="calculate(9)" />
<input type="button" value="x" onclick="calculate('*')" />
</div>
<div class="row">
<input type="button" value="4" id="four" onclick="calculate(4)" />
<input type="button" value="5" id="five" onclick="calculate(5)" />
<input type="button" value="6" id="six" onclick="calculate(6)" />
<input type="button" value="-" onclick="calculate('-')" />
</div>
<div class="row">
<input type="button" value="1" onclick="calculate(1)" id="one" />
<input type="button" value="2" onclick="calculate(2)" id="two" />
<input type="button" value="3" id="three" onclick="calculate(3)" />
<input type="button" value="+" onclick="calculate('+')" />
</div>
<div class="row">
<input type="button" value="/" onclick="calculate('/')" />
<input type="button" value="0" id="zero" onclick="calculate(0)" />
<input type="button" value="." class="dot" onclick="calculate('.')" />
<input type="button" value="=" onclick="result.value = eval(result.value)" />
</div>
</div>
</form>
</div>
CSS CODE
<style>
body, html {
background-image:linear-gradient(blue,whitesmoke);
margin: 0;
padding: 0;
}
.container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
box-shadow: 5px 4px 8px 0 rgba(0,0,0,0.2), 6px 6px 20px 0 rgba(0,0,0,0.2);
border-radius: 14px;
padding-bottom: 20px;
width: 320px;
}
.display {
width: 100%;
height: 60px;
padding: 40px 0;
background: #fdf9ef;
border-top-left-radius: 14px;
border-top-right-radius: 14px;
}
.buttons {
padding: 20px 20px 0 20px;
}
.row {
width: 280px;
float: left;
}
input[type=button] {
width: 60px;
height: 60px;
float: left;
padding: 0;
background: black;
border: none;
font-size: 30px;
margin: 5px;
box-sizing: border-box;
line-height: 30px;
border-radius: 50%;
font-weight: 700;
color: whitesmoke;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.2);
transition:.5s;
cursor: pointer;
outline: none;
}
input[type=button]:hover{
width: 60px;
height: 60px
cursor: pointer;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.2);
outline: none;
float: left;
line-height: 30px;
border-radius: 50%;
font-weight: 700;
color:black;
transition:.5s;
padding: 0;
margin: 5px;
box-sizing: border-box;
background:whitesmoke;
border: none;
font-size: 30px;
}
input[type=text] {
width: 270px;
height: 60px;
float: left;
margin: 0 25px;
outline: none;
font-weight: 700;
font-size: 60px;
line-height: 60px
padding: 0;
box-sizing: border-box;
border: none;
background: none;
color: black;
text-align: right;
}
</style>
JS CODE
<script>
function calculate(value) {
document.getElementById("result").value += value;
}
function newFunction() {
document.getElementById("form").reset();
}
</script>
Publisher @ideasorblogs
Latest posts by Publisher (see all)
- Age calculator using Javascript, HTML & CSS - October 28, 2023
- Navigation bar using HTML & CSS - October 26, 2023
- Calculator using HTML, CSS & JS - October 26, 2023
