Eine Aufgabe zum Einstieg in JavaScript aus der Lehre. Die Aufgabe bestand daraus einen Taschenrechner zu bauen der verschiedene Funktionen ausführen können soll.
Die Funktionen sollen eigenständig berechnet werden.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Calculator</title>
<link href="style.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>
</head>
<body>
<div class="secondCalculator">
<input id="searchbar">
<table>
<tr>
<td class="keys equal" colspan="2" data-operation="=">=</td>
<td class="keys equal" data-operation="C">C</td>
<td class="keys" data-operation="π">π</td>
</tr>
<tr>
<td class="keys" data-operation="ab">ab</td>
<td class="keys" data-operation="c">c</td>
<td class="keys " data-operation="^">^</td>
<td class="keys equal" data-operation="/">/</td>
</tr>
<tr>
<td class="keys" data-number="7">7</td>
<td class="keys" data-number="8">8</td>
<td class="keys" data-number="9">9</td>
<td class="keys equal" data-operation="*">*</td>
</tr>
<tr>
<td class="keys" data-number="4">4</td>
<td class="keys" data-number="5">5</td>
<td class="keys" data-number="6">6</td>
<td class="keys equal" data-operation="-">-</td>
</tr>
<tr>
<td class="keys" data-number="1">1</td>
<td class="keys" data-number="2">2</td>
<td class="keys" data-number="3">3</td>
<td class="keys equal" data-operation="+">+</td>
</tr>
<tr>
<td class="keys" colspan="2" data-number="0">0</td>
<td class="keys equal" data-number=".">.</td>
<td class="keys equal" data-operation="√">√</td>
</tr>
</table>
</div>
<div class="record">
<button class="clearList">clear this</button>
</div>
<script src="script.js"></script>
</body>
</html>
body {
font-family: arial;
flex-wrap: wrap;
}
.secondCalculator {
background-color: #212121;
border-radius: 10px;
height: 300px;
width: 225px;
float: left;
}
#searchbar {
width: 198px;
height: 64px;
margin: 9px;
font-size: 30px;
margin-top: 11px;
}
table {
width: 209px;
height: 193px;
margin-left: 8px;
margin-top: -1px;
}
.keys {
background-color: #504f80;
color: white;
text-align: center;
}
.whenPressed {
background-color: #5e5d8d;
}
p {
margin-left: 12px;
margin-top: 5px;
margin-bottom: 0px;
background-color: #f2f2f2;
width: 200px;
}
.clearList {
height: 20px;
width: 200px;
margin-top: 10px;
margin-left: 12px;
}
.record {
float: left;
}
let searchbar = $('#searchbar')
let firstNumber = ''
let operation = ''
let secondNumber = ''
let finish = ''
let precision = 4
let completePI = ''
let afterFunktion = ''
$('.clearList').on('click', (event) => {
let thisElement = $('p').first()
thisElement.remove();
})
$('.keys').on('click', (event)=> {let clickedElement = $(event.target);let clickedNumber = clickedElement.data('number');
let action = clickedElement.data('operation');
if (typeof clickedNumber !== 'undefined') {
if (operation !== '') {
secondNumber = secondNumber + clickedNumber;
} else {
firstNumber = firstNumber + clickedNumber;
}
searchbar.val(firstNumber);
}
else {
switch (action) {
case "π":
finish = PI()
searchbar.val(finish)
return;
case "C":
firstNumber = ''
secondNumber = ''
operation = ''
break;
case ".":
firstNumber = firstNumber + '.';
secondNumber = secondNumber + '.';
operation = operation + '.';
break;
case "=":
switch (operation) {
case "+":
finish = Number(firstNumber) + Number(secondNumber);
break;
case "-":
finish = Number(firstNumber) - Number(secondNumber);
break;
case "*":
finish = Number(firstNumber) * Number(secondNumber);
break;
case "/":
finish = Number(firstNumber) / Number(secondNumber);
break;
case "√":
finish = calculateSquareRoot(Number(secondNumber))
break;
case "^":
finish = Math.pow(firstNumber, secondNumber)
break;
case "c":
finish = hypotenuse()
break;
case "ab":
finish = katete()
break;
}
searchbar.val(finish)
$('.record').append(createListElement())
return;
default:
if (secondNumber !== '') {
switch (operation) {
case "+":
finish = Number(firstNumber) + Number(secondNumber);
$('.record').append(createListElement())
break;
case "-":
finish = Number(firstNumber) - Number(secondNumber);
$('.record').append(createListElement())
break;
case "*":
finish = Number(firstNumber) * Number(secondNumber);
$('.record').append(createListElement())
break;
case "/":
finish = Number(firstNumber) / Number(secondNumber);
$('.record').append(createListElement())
break;
case "^":
finish = Math.pow(firstNumber, secondNumber)
$('.record').append(createListElement())
break;
}
firstNumber = finish;
if (firstNumber === finish) {
secondNumber = '';
}
}
operation = action;
}
}
let calculation = firstNumber + operation + secondNumber;
searchbar.val(calculation)
})
function calculateSquareRoot(rootNumber, possibleNumber = 1, decimalPlaces = 0){
let divisionNumber = Math.pow(10, decimalPlaces)
possibleNumber = Math.round(possibleNumber * divisionNumber) / divisionNumber
while(true) {
let multipliedNumber = possibleNumber * possibleNumber;
if (multipliedNumber === rootNumber) {
return possibleNumber;
} else if (multipliedNumber < rootNumber) {
possibleNumber += 1 / divisionNumber;
if (decimalPlaces === precision) {
return possibleNumber;
}
} else {
possibleNumber -= 1 / divisionNumber;
if (decimalPlaces === precision) {
possibleNumber = Math.round(possibleNumber * divisionNumber) / divisionNumber
return possibleNumber;
}
return calculateSquareRoot(rootNumber, possibleNumber, decimalPlaces + 1)
}
}
}
function PI(firstRootNumber = 2, secondRootNumber = 3) {
return calculateSquareRoot(firstRootNumber) + calculateSquareRoot(secondRootNumber);
}
function hypotenuse() {
return calculateSquareRoot(Number(firstNumber) * Number(firstNumber) + Number(secondNumber) * Number(secondNumber));
}
function katete() {
return calculateSquareRoot(Number(firstNumber) * Number(firstNumber) - Number(secondNumber) * Number(secondNumber));
}
function createListElement() {
return $(`<p>${finish}</p>`);
}