Scribd
Upload
7 views4 pages

Calculator Code

codes for calculate

Uploaded by

aurerommel1
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
7 views4 pages

Calculator Code

codes for calculate

Uploaded by

aurerommel1
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/ 4

<!

--calculator-->

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Calculator</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" />
<link href="style.css" type="text/css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body class="color">

<header>
<div class="logo">
<img src="./resources/ep.jpg" />
</div>
</header>

<h1>Calculate!</h1>

<div id="calculator">

<div id="screen"></div>

<div id="buttons">

<div id="numbers">
<div class="number">1</div>
<div class="number">2</div>
<div class="number">3</div>
<div class="number">4</div>
<div class="number">5</div>
<div class="number">6</div>
<div class="number">7</div>
<div class="number">8</div>
<div class="number">9</div>
<div class="number">0</div>
<div class="operator">=</div>
<div class="clear number">C</div>
</div>

<div id="operators">
<div class="operator">+</div>
<div class="operator">-</div>
<div class="operator">x</div>
<div class="operator">/</div>
</div>

</div> <!--closes buttons-->

</body>
</html>
/*Calculator CSS*/

.logo {
width: 10%;
margin: 50px;
}

img {
width: 100%;
}

h1 {
text-align: center;
}

#calculator {
display: flex;
flex-direction: column;
width: 280px;
height: 350px;
margin:auto;
background-color: darkgray;
border: solid 5px #000;
}

#screen {
background-color: gray;
height: 50px;
width: 90%;
margin: 10px auto;
}

#numbers {
display: flex;
flex-wrap: wrap;
}

.number,
.operator {
background-color: yellow;
width: 60px;
height: 60px;
margin: 5px;
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
font-weight: bold;
box-shadow: 3px 3px #888888;
}

.number:active {
box-shadow: 0px 0px;
}

You might also like