Scribd
Upload
36 views2 pages

Abdi Calculator

The document contains a simple calculator program implemented in HTML, CSS, and JavaScript. It features a display for input and output, buttons for numbers and operations, and functions for appending inputs, clearing the display, and calculating results. The styling is done using CSS to create a visually appealing layout and interactive buttons.

Uploaded by

abdiaberagemechu
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
36 views2 pages

Abdi Calculator

The document contains a simple calculator program implemented in HTML, CSS, and JavaScript. It features a display for input and output, buttons for numbers and operations, and functions for appending inputs, clearing the display, and calculating results. The styling is done using CSS to create a visually appealing layout and interactive buttons.

Uploaded by

abdiaberagemechu
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/ 2

js index.

js
//CALCULATOR PROGRAM
const display = document.getElementById("display");
function appendToDisplay(input){
display.value += input;
}

function clearDisplay(){
display.value = "";
}

function calculate(){
try{
display.value = eval(display.value);
}
catch(error){
display.value = "dogoggora!";
}
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>CALCULATOR</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="calculator">
<input id="display" readonly>
<div id="keys">
<button onclick="appendToDisplay('+')" class="operator-btn">+</button>
<button onclick="appendToDisplay('7')">7</button>
<button onclick="appendToDisplay('8')">8</button>
<button onclick="appendToDisplay('9')">9</button>
<button onclick="appendToDisplay('-')" class="operator-btn">-</button>
<button onclick="appendToDisplay('4')">4</button>
<button onclick="appendToDisplay('5')">5</button>
<button onclick="appendToDisplay('6')">6</button>
<button onclick="appendToDisplay('*')" class="operator-btn">*</button>
<button onclick="appendToDisplay('1')">1</button>
<button onclick="appendToDisplay('2')">2</button>
<button onclick="appendToDisplay('3')">3</button>
<button onclick="appendToDisplay('/')" class="operator-btn">/</button>
<button onclick="appendToDisplay('0')">0</button>
<button onclick="appendToDisplay('.')">.</button>
<button onclick="calculate()">=</button>
<button onclick="clearDisplay()" class="operator-btn">C</button>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
# style.css
body{
margin: 0;
display: flex;
justify-content: center;
height: 100vh;
background-color: hsl(0, 0%, 95%);
}
#calculator{
font-family: Arial,sans-serif;
background-color: hsl(0, 0%, 15%);
border-radius: 15px;
max-width: 500PX;
overflow: hidden;
}
#display{
width: 100%;
padding: 20px;
font-size: 5rem;
text-align: left;
border: none;
background-color: hsl(0, 0%, 20%);
color: white;
}
#keys{
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 10px;
padding: 25px;
}
button{
width: 100px;
height: 100px;
border-radius: 50px;
border: none;
background-color: hsl(0, 0%, 30%);
color: white;
font-size: 3rem;
font-weight: bold;
cursor: pointer;
}
button:hover{
background-color: hsl(0, 0%, 40%);
}
button:active{
background-color: hsl(0, 0%, 50%);
}
.operator-btn{
background-color: hsl(27, 100%, 55%);
}
.operator-btn:hover{
background-color: hsl(320, 100%, 65%);
}
.operator-btn:active{
background-color: hsl(35, 100%, 75%);
}

You might also like