| Taschenrechner 2020

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.

HTML

<!DOCTYPE html>

<head>

<title>Calculator</title>

</head>

<body>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

<button class="clearList">clear this</button>

</div>

</body>

</html>

CSS

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;

}

JavaScript

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>`);

}