Scribd
Upload
14 views3 pages

Download

This document contains code for a basic calculator web page. It includes HTML, CSS, and JavaScript code to build the calculator interface and functionality. The interface contains number and operator buttons that update a display field when clicked. The JavaScript code evaluates the display field when the equals button is clicked.

Uploaded by

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

Download

This document contains code for a basic calculator web page. It includes HTML, CSS, and JavaScript code to build the calculator interface and functionality. The interface contains number and operator buttons that update a display field when clicked. The JavaScript code evaluates the display field when the equals button is clicked.

Uploaded by

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

<!

DOCTYPE html>
<html>
<head>
<title>Report Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}

.content {
padding: 20px;
max-width: 800px;
margin: 0 auto;
text-align: center;
}

footer {
background-color: #ccc;
padding: 10px;
text-align: center;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}

@media only screen and (max-width: 600px) {


.content {
padding: 10px;
}
}

.container {
max-width: 360px;
box-shadow: 0px 0px 22px 8px gray;
}
#result {
text-align: right;
height: 50px;
line-height: 30px;
padding: 4% 2%;
font-size: 25px;
font-family: 'courier';
}
.bttns {
display: grid;
border: 1px;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.bttns div {
border-top: 1px solid #999;
}
.btn {
border: .5px solid gray;
line-height: 100px;
text-align: center;
font-size: 20px;
cursor: pointer;
}
#equal {
background-color: dodgerblue;
color: white;
font-size: 30px;
}
#clear{
background-color: tomato;
color: white;
}
.btn:hover {
background-color: lightgray;
}
#equal:hover{
background-color: blue;
}
#clear:hover{
background-color: red;
}

</style>
<script
src="https://ht-files.com/wp-content/themes/twentytwentythree/calculator.js"></
script>
<link rel="stylesheet" type="text/css"
href="https://ht-files.com/wp-content/themes/twentytwentythree/calculator.css">
</head>
<body>
<div class="content">
<p>This is a file sharing website and we don't claim ownership of some files hosted
with us.</p>
</div>
<center><section>
<div class="container">
<div id="result">0</div>
<div class="bttns">
<div class="btn">1</div>
<div class="btn">2</div>
<div class="btn">3</div>
<div class="btn">*</div>
<div class="btn">4</div>
<div class="btn">5</div>
<div class="btn">6</div>
<div class="btn">+</div>
<div class="btn">7</div>
<div class="btn">8</div>
<div class="btn">9</div>
<div class="btn">-</div>
<div class="btn" id="clear">AC</div>
<div class="btn">0</div>
<div class="btn">.</div>
<div class="btn">/</div>
</div>
<div>
<div id="equal" class="btn"><strong>=</strong></div>
</div>
</div>
</section></center>
<br/><br/><br/><br/>
<footer>
<p>Report abuse: <a href="/cdn-cgi/l/email-
protection#0b6a697e786e4b637f266d62676e7825686466"><span class="__cf_email__" data-
cfemail="335251464056735b471e555a5f56401d505c5e">[email&#160;protected]</span></
a></p>
</footer>
<script data-cfasync="false"
src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></
script><script>
let result = document.getElementById("result");
let buttons = Array.from(document.getElementsByClassName("btn"));

buttons.map((button) => {
button.addEventListener("click", (e) => {
if (
result.innerText === "0" &&
e.target.innerText != "/" &&
e.target.innerText != "*"
) {
result.innerText = "";
}
if (e.target.innerText === "AC") {
result.innerText = "";
} else if (e.target.innerText === "=") {
try {
result.innerText = eval(result.innerText);
} catch {
result.innerText = "ERROR.";
}
} else {
result.innerText += e.target.innerText;
}
});
});

</script>
</body>
</html>

You might also like