Simple, calculated code is the route to go when programming. go out how to make your own calculator with HTML And CSS.
The smart way to learn JavaScript is to make projects. However, you need to start creating projects as soon as possible, If you want to become a good web designer. You can start by making up beginner- level projects like a simple calculator, digital clock, or sandglass.
You can make a simple calculator using just core web technologies HTML, CSS,. This calculator can perform essential mathematical operations like addition, subtraction, multiplication, and division Operations.
Features of the Calculator
- In this design, you're covering to develop a calculator that will have the following features
- It'll perform basic arithmetic operations like addition, subtraction, division, and multiplication.
- It'll perform decimal operations.
- Clear screen feature to clear the display screen anytime you want.
Folder Structure of the Calculator Project
Create a folder that contains the HTML, CSS files. You can give names the files anything you want. Here I give a folder name is Calculator. According to the our Project name, the HTML, CSS files are named calculator.html, style.css.
HTML CODE :
Create the calculator.html file and paste the following HTML code for the calculator
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script>
function calcNumbers(result) {
form.displayResult.value = form.displayResult.value + result;
}
</script>
<div class="container">
<form name="form">
<div class="display">
<input type="text" placeholder="0" name="displayResult" />
</div>
<div class="buttons">
<div class="row">
<input type="button" name="b7" value="7" onClick="calcNumbers(b7.value)">
<input type="button" name="b8" value="8" onClick="calcNumbers(b8.value)">
<input type="button" name="b9" value="9" onClick="calcNumbers(b9.value)">
<input type="button" name="addb" value="+" onClick="calcNumbers(addb.value)">
</div>
<div class="row">
<input type="button" name="b4" value="4" onClick="calcNumbers(b4.value)">
<input type="button" name="b5" value="5" onClick="calcNumbers(b5.value)">
<input type="button" name="b6" value="6" onClick="calcNumbers(b6.value)">
<input type="button" name="subb" value="-" onClick="calcNumbers(subb.value)">
</div>
<div class="row">
<input type="button" name="b1" value="1" onClick="calcNumbers(b1.value)">
<input type="button" name="b2" value="2" onClick="calcNumbers(b2.value)">
<input type="button" name="b3" value="3" onClick="calcNumbers(b3.value)">
<input type="button" name="mulb" value="*" onClick="calcNumbers(mulb.value)">
</div>
<div class="row">
<input type="button" name="b0" value="0" onClick="calcNumbers(b0.value)">
<input type="button" name="potb" value="." onClick="calcNumbers(potb.value)">
<input type="button" name="divb" value="/" onClick="calcNumbers(divb.value)">
<input type="button" class="red" value="=" onClick="displayResult.value=eval(displayResult.value)">
</div>
</div>
</form>
</div>
</body>
</html>
CSS CODE:
Create the style.css file and paste the following CSS code for the calculator
body,
html {
background: #5c534e;
margin: 0;
padding: 0;
}
.container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 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: #FF0509 ;
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;
margin: 5px;
box-sizing: border-box;
background: #ecedef;
border: none;
font-size: 30px;
line-height: 30px;
border-radius: 50%;
font-weight: 700;
color: #5E5858;
cursor: pointer;
}
input[type=text] {
width: 270px;
height: 60px;
float: left;
padding: 0;
box-sizing: border-box;
border: none;
background: none;
color: #ffffff;
text-align: right;
font-weight: 700;
font-size: 60px;
line-height: 60px;
margin: 0 25px;
}
.red {
background: #FF0509 !important;
color: #ffffff !important;
}
Develop Programming Projects
Improve coding skill by developing programming projects, If you are a beginner or you are getting back into coding after some time Rest. Creating fully-working apps, even simple ones, can build your confidence.
You can try out many simple projects from games (tic-tac-toe, Rock Paper Scissors) to simple utilities (to-do list, calculator, Tribute Page).
Check Out Tribute Page Project
Tribute Page Using HTML And CSS | Tribute Page - Dr.A.P.J.Abdul KalamPractice these projects and become a better developer.
KEEP SUPPORT
0 Comments