Skip to content

Instantly share code, notes, and snippets.

@pascalmaddin

pascalmaddin/calculator.html

Created January 4, 2021 20:44
Show Gist options
  • Save pascalmaddin/edd96d26786a15edb03d732d6e20c8b1 to your computer and use it in GitHub Desktop.
Save pascalmaddin/edd96d26786a15edb03d732d6e20c8b1 to your computer and use it in GitHub Desktop.
Download ZIP
calculator html
Raw
calculator.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="script.js"></script>
<style>
#calculator{
width: 100%;
max-width: 400px;
margin: 0 auto;
}
#body{
margin-top: 2rem;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
row-gap: 0.5rem;
column-gap: 0.5rem;
}
</style>
</head>
<body>
<div id="calculator">
<div id="head">
<input type="text" id="result"/>
<div type="text" id="number1">Zahl 1: <span></span></div>
<div type="text" id="number2">Zahl 2: <span></span></div>
</div>
<div id="body">
<button class="key operator" value="add">+</button>
<button class="key operator" value="sub">-</button>
<button class="key operator" value="multi">*</button>
<button class="key operator" value="divi">/</button>
<button class="key" value="delete">delete</button>
<button class="key" value=""></button>
<button class="key" value="7">7</button>
<button class="key" value="8">8</button>
<button class="key" value="9">9</button>
<button class="key" value="4">4</button>
<button class="key" value="5">5</button>
<button class="key" value="6">6</button>
<button class="key" value="1">1</button>
<button class="key" value="2">2</button>
<button class="key" value="3">3</button>
<button class="key" value="0">0</button>
</div>
</div>
</body>
</html>
Raw
script.js
document.addEventListener("DOMContentLoaded", function(event) {
let buttons = document.querySelectorAll('.key');
let numbers = [];
let container1 = document.querySelector('#number1 span');
let container2 = document.querySelector('#number2 span');
for(let i = 0; i < buttons.length; i++){
buttons[i].addEventListener('click', function(e){
//e.target.value
//if(e.target.value >= 0 && e.target.value <= 9){
if(e.target.value >= 0 || e.target.value <= 9){
// zahl wurde geklickt
savenumber(e.target.value);
}else if(e.target.classList.contains('operator')){
// plus, minus, subtrahiern, dividieren wurde geklickt
operator(e.target.value);
}else if(e.target.value === "delete"){
// Löschen Button geklickt
deleteAll();
}
});
}
function savenumber(value){
numbers.push(parseInt(value));
if(container1.innerHTML === ""){
container1.innerHTML = value;
}else if(container2.innerHTML === ""){
container2.innerHTML = value;
}else{
alert("Es wurden schon 2 Zahlen ausgewählt");
}
}
function operator(type){
let result;
if(type === "add"){
// zahlen addieren
result = numbers[0] + numbers[1];
}else if(type === "sub"){
// zahlen subtrahieren
result = numbers[0] - numbers[1];
}else if(type === "multi"){
// zahlen multiplizieren
result = numbers[0] * numbers[1];
}else if(type === "divi"){
// zahlen dividieren
result = numbers[0] / numbers[1];
}
document.querySelector('#result').value = result;
}
function deleteAll(){
numbers = [];
document.querySelector('#result').value = "";
container1.innerHTML = "";
container2.innerHTML = "";
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment