Scribd
Upload
21 views3 pages

Calc

The document contains code for a basic calculator interface with a display screen and buttons for numbers, operations, and functions. The code defines the styling and layout for the calculator container, display screen, and button elements. It also includes JavaScript code that retrieves all button elements, adds click event listeners to them, and updates the display screen value with the clicked button's inner text value on each click.

Uploaded by

citiye2321
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
21 views3 pages

Calc

The document contains code for a basic calculator interface with a display screen and buttons for numbers, operations, and functions. The code defines the styling and layout for the calculator container, display screen, and button elements. It also includes JavaScript code that retrieves all button elements, adds click event listeners to them, and updates the display screen value with the clicked button's inner text value on each click.

Uploaded by

citiye2321
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/ 3

<!

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>
<style>
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
-webkit-appearance: none;
}
.main{
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
.container{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
box-shadow: -7px -7px 15px #808080;
height: 400px;
width: 350px;
border-radius: 15px;
background-color: #000000;
}
#screen{
padding: 4px;
width: 86%;
height: 55px;
font-size: 50px;
text-align: right;
display: block;
margin: auto;
margin-bottom: 10px;
border-radius: 15px;
/* color: white; */
/* background-color: #000000; */
/* border: none; */
}
.button{
margin: 5px 0px 5px 0px;
}
.display{
width: 100%;
}
.btn{
width: 50px;
height: 50px;
border-radius: 50%;
font-size: 19px;
font-weight: bold;
}
.specialbutton{
width: 50px;
height: 50px;
border-radius: 50%;
font-size: 19px;
font-weight: bold;
}
.specialcolor{
background-color: #FD6B0A;
color: WHITE;
}
</style>
</head>
<body>
<div class="main">
<div class="container">
<div class="display">
<input type="number"id="screen"placeholder="0">
</div>
<div class="button">
<button class="specialbutton specialcolor">CE</button>
<button class="btn specialcolor">!</button>
<button class="btn specialcolor">(</button>
<button class="btn specialcolor">)</button>
<button class="btn specialcolor">%</button>
<button class="specialbutton specialcolor">AC</button>
</div>
<div class="button">
<button class="specialbutton">sin</button>
<button class="btn">7</button>
<button class="btn">8</button>
<button class="btn">9</button>
<button class="specialbutton specialcolor">PI</button>
<button class="btn specialcolor">/</button>
</div>
<div class="button">
<button class="specialbutton">cos</button>
<button class="btn">4</button>
<button class="btn">5</button>
<button class="btn">6</button>
<button class="specialbutton specialcolor">log</button>
<button class="btn specialcolor">*</button>
</div>
<div class="button">
<button class="specialbutton">tan</button>
<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn">3</button>
<button class="specialbutton specialcolor">sqrt</button>
<button class="btn specialcolor">-</button>
</div>
<div class="button">
<button class="specialbutton">e</button>
<button class="specialbutton">x^y</button>
<button class="btn">0</button>
<button class="btn">.</button>
<button class="btn specialcolor">=</button>
<button class="btn specialcolor">+</button>
</div>
</div>
</div>
<script>
const screen = document.querySelector("#screen");
let allbutton = document.querySelectorAll(".btn");
let string = "";
let arrayOfButtons = Array.from(allbutton);
arrayOfButtons.forEach((element)=>{
element.addEventListener('click',(e)=>{
let val = e.target.innerText;
string = string + val;
console.log(string);
screen.value = string;
})
})
</script>
</body>
</html>

You might also like