MAKE A SIMPLE CALCULATER USING HTML CSS AND JS
MAKE A FILE
index.html
THEN PASTE THE GIVEN BELOW CODE
<!--MADE BY CURIOUS CODER AYUSH-->
<!DOCTYPE html>
<html>
<head>
<title> CURIOUS CODER AYUSH</title>
<link rel="Stylesheet" href="style.css">
</head>
<body>
<h1> CURIOUS CODER AYUSH</h1>
<div class="calculator">
<div class="cal-screen">
<input type="text" id="screen" placeholder="0" readonly/>
</div>
<div class="cal-buttons">
<button class="orange-color" onclick="clean()">Ac</button>
<button class="orange-color"onclick="del()">del</button>
<button class="orange-color"onclick="display('%')">%</button>
<button class="orange-color"onclick="display('/')">÷</button>
</div>
<div class="cal-buttons">
<button onclick="display('7')">7</button>
<button onclick="display('8')">8</button>
<button onclick="display('9')">9</button>
<button class="orange-color" onclick="display('*')">×</button>
</div>
<div class="cal-buttons">
<button onclick="display('4')">4</button>
<button onclick="display('5')">5</button>
<button onclick="display('6')">6</button>
<button class="orange-color"onclick="display('-')">-</button>
</div>
<div class="cal-buttons">
<button onclick="display('3')">3</button>
<button onclick="display('2')">2</button>
<button onclick="display('1')">1</button>
<button class="orange-color"onclick="display('+')">+</button>
</div>
<div class="cal-buttons">
<button onclick="display('.')">.</button>
<button onclick="display('0')">0</button>
<button class="equal" onclick="calculate()">=</button>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
MAKE A NEW FILE
style.css
THEN PASTE THE GIVEN BELOW CODE
*{
margin:0;
padding:0;
background:#ecf0f3;
}
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
flex-direction:column;
}
.calculator{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
border:2px solid red;
padding:1rem;
border-radius:15px;
background-color: #ecf0f3;
width:340px;
box-shadow: inset 5px 5px 12px #ffffff,
5px 5px 12px rgba(0,0,0,.16);
}
.cal-screen input[type="text"]{
border:none;
width:320px;
height:4rem;
margin:10px 0;
padding:10px;
border-radius:15px;
background-color: #ecf0f3;
text-align: end;
color: rgb(70, 70, 70);
font-size: 50px;
box-shadow: inset -5px -5px 12px #ffffff,
inset 5px 5px 12px rgba(0,0,0,.16);
}
input:focus{
outline:none;
}
button {
width:4.6rem;
height:4rem;
color: #090909;
margin:4px;
font-size: 25px;
border-radius: 0.5em;
background: #ecf0f3;
border:none;
box-shadow: inset 5px 5px 12px #ffffff,
5px 5px 12px rgba(0,0,0,.16);
}
button:active {
color: #666;
box-shadow: inset 4px 4px 12px #c5c5c5,
inset -4px -4px 12px #ffffff;
}
.equal{
background:orange;
color:white;
width:10rem;
box-shadow: inset 4px 4px 12px orange,
inset -4px -4px 12px orange;
}
.equal:active{
box-shadow: inset 4px 4px 12px rgb(204, 122, 0),
inset -4px -4px 12px rgb(204, 122,0);
}
.orange-color{
color:orange;
}
h1{
margin:20px;
padding:5px;
color:orange;
}
NOW MAKE A NEW FILE WITH NAME
main.js
Then paste the given below code
let screen =document.getElementById('screen');
function display(num){
screen.value += num;
}
function calculate(){
try{
screen.value =eval(screen.value );
}
catch(err){
screen.value="error";
}
}
function clean(){
screen.value ="";
}
function del(){
screen.value =screen.value.slice(0,-1);
}
--------------------------OUTPUT-------------------------
