Scribd
Upload
42 views

Calculator Code

Uploaded by

Samlove Ojo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
42 views

Calculator Code

Uploaded by

Samlove Ojo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

HTML, CSS AND JAVASCRIPT FOR CALCULATOR DESIGN

HTML BASIC ESTIMATED STRUCTURE


<!DOCTYPE html>

<html>

<head>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

<title>Calculator</title>

<link rel=”stylesheet” href=”style.css”>

</head>

<body>

</body>

</html>

CSS BASIC ESTIMATED STRUCTURE


*{

margin: 0;

padding: 0;

font-family: ‘poppins’, sans-serif;

box-sizing: border-box;

HTML
<!DOCTYPE html>

<html>

<head>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

<title>Calculator</title>

<link rel=”stylesheet” href=”style.css”>

</head>

<body>

<div class=”container”>
</div>
</body>

</html>

CSS
.container{

width: 100%;

height: 100%;

background: purple;

HTML
<!DOCTYPE html>

<html>

<head>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

<title>Calculator</title>

<link rel=”stylesheet” href=”style.css”>

</head>

<body>

<div class=”container”>
<div class=”calculator”>
<form>
<div>
<input type=”text” name=”display”>
</div>
<div>
<input type=”button” value=”AC”>
<input type=”button” value=”DEL”>
Calculator first row
<input type=”button” value=”.”>
<input type=”button” value=”/”>
</div>
</form>
</div>
</div>

</body>

</html>
Move everything to the center

CSS
.container{

width: 100%;

height: 100vh;

background: purple;

display: flex;
align-items: center;
justify-content: center;
}
.calculator{
Background: brown;
Padding: 20px;
Border-radius: 10px;
}

Add other buttons to calculator


HTML
<!DOCTYPE html>

<html>

<head>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

<title>Calculator</title>

<link rel=”stylesheet” href=”style.css”>

</head>

<body>

<div class=”container”>
<div class=”calculator”>
<form>
<div>
<input type=”text” name=”display”>
</div>
<div>
<input type=”button” value=”AC”>
<input type=”button” value=”DEL”>
<input type=”button” value=”.”>
<input type=”button” value=”/”>
</div>
<div>
<input type=”button” value=”1”>
<input type=”button” value=”2”>
<input type=”button” value=”3”>
<input type=”button” value=”*”>
</div>
<div>
<input type=”button” value=”4”>
<input type=”button” value=”5”>
<input type=”button” value=”6”>
<input type=”button” value=”-”>
</div>
<div>
<input type=”button” value=”7”>
<input type=”button” value=”8”>
<input type=”button” value=”9”>
<input type=”button” value=”+”>
</div>
<div>
<input type=”button” value=”00”>
<input type=”button” value=”0”>
<input type=”button” value=”=”>
</div>
</form>
</div>
</div>

</body>

</html>
Add Calculator display button

CSS Inside the calculator, we have the form and the input file

.calculator form input{

border: 0;

outline: 0;

width: 60px;

height: 60px;

border-radius: 10px;

box-shadow: 8px solid green;

or

box-shadow: -8px -8px 15px rgba(255, 255, 255, 0.1), 5px 5px 15px rgba(0, 0, 0, 0.2);

background: transparent;

font-size: 20px;

color: white;

cursor: pointer;

margin: 10px

Edit the display area by adding a div class name to display


<div class=”display”>
<input type=”text” name=”display”>
</div>
Back to CSS file

form .display{

display: flex;

justify-content: flex-end;

margin: 20px 0;

form .display input{

text-align: right;

flex: 1;

font-size: 45px;

box-shadow: none;
Edit the equal button to fit the space by adding a div class name as equal
<input type=”button” value=”=” class=”equal”>
</div>
Back to CSS
Form input.equal{
Width: 145px; double other widths
}

Add functionality, anytime we click on any number, it should appear


in the display area by adding click features
If you click on 1, it will display 1 but cant give multiple
1 so in front of the = ‘1’ “> add plus += ‘1’ “>

<div>
<input type=”button” value=”1” onclick=”display.value = ‘1’ “>
<input type=”button” value=”2” onclick=”display.value += ‘2’ “>
<input type=”button” value=”3” onclick=”display.value += ‘3’ “>
<input type=”button” value=”*” onclick=”display.value += ‘*’ “>
</div>
<div>
<input type=”button” value=”4” onclick=”display.value += ‘4’ “>
<input type=”button” value=”5” onclick=”display.value += ‘5’ “>
<input type=”button” value=”6” onclick=”display.value += ‘6’ “>
<input type=”button” value=”-” onclick=”display.value += ‘-’ “>
</div>
<div>
<input type=”button” value=”7” onclick=”display.value += ‘7’ “>
<input type=”button” value=”8” onclick=”display.value += ‘8’ “>
<input type=”button” value=”9” onclick=”display.value += ‘9’ “>
<input type=”button” value=”+” onclick=”display.value += ‘+’ “>
</div>
<div>
<input type=”button” value=”00” onclick=”display.value += ‘00’ “>
<input type=”button” value=”0” onclick=”display.value += ‘0’ “>
<input type=”button” value=”=”>
</div>
Add click functions to top buttons

<input type=”button” value=”AC” onclick=”display.value = ‘’ “> Empty ‘’ to clear all

<input type=”button” value=”DEL”>


<input type=”button” value=”.” onclick=”display.value += ‘.’ “>
<input type=”button” value=”/” onclick=”display.value += ‘/’ “>

For delete the command is different because it delete only one number

<input type=”button” value=”DEL” onclick=”display.value =


display.value.toString().slice(0,-1) “>

Add onclick to equal


<input type=”button” value=”=” onclick=”display.value = eval(display.value)”>

You might also like