pascalmaddin/calculator.html

## 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>

## 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 = "";
	}
});
	<!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>
	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 = "";
	}
	});