Scribd
Upload
63 views

New Text Document

This document contains the code for a simple calculator application. It includes HTML and CSS code to layout the calculator interface, which consists of number and operator buttons within a container. It also includes JavaScript code to handle button click events to add numbers and operators to the output field, as well as functions for calculation, clearing output, and adding decimal points.

Uploaded by

saied mostafa
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
63 views

New Text Document

This document contains the code for a simple calculator application. It includes HTML and CSS code to layout the calculator interface, which consists of number and operator buttons within a container. It also includes JavaScript code to handle button click events to add numbers and operators to the output field, as well as functions for calculation, clearing output, and adding decimal points.

Uploaded by

saied mostafa
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

<!

DOCTYPE html>
<html>
<head>
<title>Simple Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #F2F2F2;
margin: 0;
padding: 0;
}
h1 {
text-align: center;
margin-top: 50px;
color: #333;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 30px auto;
max-width: 300px;
background-color: #FFF;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
padding: 20px;
}
.button {
width: 70px;
height: 70px;
font-size: 24px;
margin: 5px;
border-radius: 5px;
background-color: #E6E6E6;
box-shadow: inset 0px 0px 5px rgba(0,0,0,0.3);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
outline: none;
border: none;
color: #333;
transition: all 0.2s ease-in-out;
}
.button:hover {
background-color: #CCC;
box-shadow: inset 0px 0px 5px rgba(0,0,0,0.6);
color: #FFF;
}
.output {
width: 100%;
font-size: 36px;
text-align: right;
padding: 10px;
box-sizing: border-box;
background-color: #EEE;
margin-bottom: 20px;
border-radius: 5px;
border: none;
box-shadow: inset 0px 0px 5px rgba(0,0,0,0.3);
}
</style>
</head>
<body>
<h1>Simple Calculator</h1>
<div class="container">
<input type="text" class="output" disabled>
<button class="button" onclick="addNumber('7')">7</button>
<button class="button" onclick="addNumber('8')">8</button>
<button class="button" onclick="addNumber('9')">9</button>
<button class="button" onclick="addOperator('/')">/</button>
<button class="button" onclick="addNumber('4')">4</button>
<button class="button" onclick="addNumber('5')">5</button>
<button class="button" onclick="addNumber('6')">6</button>
<button class="button" onclick="addOperator('*')">*</button>
<button class="button" onclick="addNumber('1')">1</button>
<button class="button" onclick="addNumber('2')">2</button>
<button class="button" onclick="addNumber('3')">3</button>
<button class="button" onclick="addOperator('-')">-</button>
<button class="button" onclick="addNumber('0')">0</button>
<button class="button" onclick="addDecimal('.')">.</button>
<button class="button" onclick="calculate()">=</button>
<button class="button" onclick="addOperator('+')">+</button>
<button class="button" onclick="clearOutput()">AC</button>
</div>
<script>
let output = document.querySelector('.output');

function addNumber(num) {
output.value += num;
}

function addOperator(operator) {
if (output.value.slice(-1) === '+' || output.value.slice(-1) ===
'-' || output.value.slice(-1) === '*' || output.value.slice(-1) === '/') {
return;
}

You might also like