Calculator
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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">
<input type="text" name="" id="result" placeholder="0">
<button onclick="allClear()">AC</button>
<button onclick="del()">DEL</button>
<button onclick="display('%')">%</button>
<button onclick="display('/')">/</button>
<button onclick="display('7')">7</button>
<button onclick="display('8')">8</button>
<button onclick="display('9')">9</button>
<button onclick="display('*')">*</button>
<button onclick="display('4')">4</button>
<button onclick="display('5')">5</button>
<button onclick="display('6')">6</button>
<button onclick="display('+')">+</button>
<button onclick="display('1')">1</button>
<button onclick="display('2')">2</button>
<button onclick="display('3')">3</button>
<button onclick="display('-')">-</button>
<button onclick="display('0')">0</button>
<button onclick="display('.')">.</button>
<button onclick="calculate()" class="equal">=</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
-----------------------------------------------------------------------------------------------------------
CSS Code
@import url("https://fonts.googleapis.com/css2?family=Kanit&family=Mulish:wght@300;400;500;600;700&family=Roboto+Condensed&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Roboto Condensed", sans-serif;
font-weight: bold;
font-size: 22px;
color: #ff6525;
background: #ecf0f3;
}
.container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.calculator {
background: #ecf0f3;
padding: 15px;
border-radius: 30px;
box-shadow: inset 5px 5px 12px #fff, 5px 5px 12px rgba(0, 0, 0, 0.14);
display: grid;
grid-template-columns: repeat(4, 70px);
}
input {
grid-column: span 4;
height: 70px;
width: 269px;
background-color: #ecf0f3;
border: none;
box-shadow: inset -5px -5px 12px #fff, inset 5px 5px 12px rgba(0, 0, 0, 0.14);
border-radius: 30px;
outline: none;
font-size: 50px;
text-align: end;
margin: 30px auto;
padding: 3px 15px;
}
input::placeholder {
color: #ff6525;
}
button {
width: 48px;
height: 48px;
box-shadow: inset 5px 5px 12px #fff, 5px 5px 12px rgba(0, 0, 0, 0.14);
border: none;
border-radius: 50%;
outline: none;
margin: 6px auto;
cursor: pointer;
}
.equal {
width: 115px;
border-radius: 40%;
margin: 6px 12px;
}
-------------------------------------------------------------------------------------------------------------
JAVASCRIPT Code
var result = document.getElementById('result');
function display(number) {
result.value = result.value + number ;
}
function calculate () {
var final_number = result.value;
var final_result = eval(final_number);
result.value = final_result;
}
function allClear() {
result.value = "";
}
function del() {
result.value = result.value.slice(0,-1);
}
--------------------------------------------------------------------------------------------------------------
link => References
0 Comments