HTML ):-
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500&display=swap"
rel="stylesheet"
/>
<title>SkyCodingLab - Calculator</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="calculator">
<div class="display">
<input type="text" placeholder="0" id="input" disabled />
</div>
<div class="buttons">
<input type="button" value="AC" id="clear" />
<input type="button" value="DEL" id="erase" />
<input type="button" value="/" class="input-button" />
<input type="button" value="*" class="input-button" />
<input type="button" value="9" class="input-button" />
<input type="button" value="8" class="input-button" />
<input type="button" value="7" class="input-button" />
<input type="button" value="-" class="input-button" />
<input type="button" value="6" class="input-button" />
<input type="button" value="5" class="input-button" />
<input type="button" value="4" class="input-button" />
<input type="button" value="+" class="input-button" />
<input type="button" value="1" class="input-button" />
<input type="button" value="2" class="input-button" />
<input type="button" value="3" class="input-button" />
<input type="button" value="=" id="equal" />
<input type="button" value="0" class="input-button" />
<input type="button" value="." class="input-button" />
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS):-
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Roboto Mono", monospace;
}
body {
height: 100vh;
background: linear-gradient(to bottom, #3180ff 50%, #ffffff 50%);
}
.calculator {
width: 400px;
background-color: rgb(37, 40, 40);
padding: 50px 30px;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border-radius: 8px;
box-shadow: 0 20px 50px rgba(0, 5, 24, 0.4);
}
.display {
width: 100%;
}
.display input {
width: 100%;
padding: 15px 10px;
text-align: right;
border: none;
background-color: transparent;
color: #ffffff;
font-size: 35px;
}
.display input::placeholder {
color: #9490ac;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 20px;
margin-top: 40px;
}
.buttons input[type="button"] {
font-size: 20px;
padding: 17px;
border: none;
background-color: transparent;
color: #ffffff;
cursor: pointer;
border-radius: 5px;
}
.buttons input[type="button"]:hover {
box-shadow: 0 8px 25px #000d2e;
}
input[type="button"]#equal {
grid-row: span 2;
background-color: #3180ff;
}
input[type="button"][value="0"] {
grid-column: span 2;
}
JAVASCRIPT):-
let equal_pressed = 0;
let button_input = document.querySelectorAll(".input-button");
let input = document.getElementById("input");
let equal = document.getElementById("equal");
let clear = document.getElementById("clear");
let erase = document.getElementById("erase");
window.onload = () => {
input.value = "";
};
button_input.forEach((button_class) => {
button_class.addEventListener("click", () => {
if (equal_pressed == 1) {
input.value = "";
equal_pressed = 0;
}
input.value += button_class.value;
});
});
equal.addEventListener("click", () => {
equal_pressed = 1;
let inp_val = input.value;
try {
let solution = eval(inp_val);
if (Number.isInteger(solution)) {
input.value = solution;
} else {
input.value = solution.toFixed(2);
}
} catch (err) {
alert("Invalid Input");
}
});
clear.addEventListener("click", () => {
input.value = "";
});
erase.addEventListener("click", () => {
input.value = input.value.substr(0, input.value.length - 1);
});
Comments
Post a Comment