Zabrałem się za projekt typu kalkulator. Niby proste, a jednak...
Na chwilę obecną mam wersję roboczą najprostszego wariantu, kod poniżej.
Czy jest to czytelne, a może przekombinowałem? Chodzi mi o to, czy przyjąłem dobrą koncepcję.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width = device-width, initial-scale = 1.0, shrink-to-fit = no">
<title>Kalkulator</title>
<link rel="stylesheet" href="kalkulator.css">
<script src="kalkulator.js" defer></script>
</head>
<body>
<table id = "calculator">
<tr>
<td colspan = "5" id = "calculatorScreen"></td>
</tr>
<tr>
<td class = "numberKey">7</td>
<td class = "numberKey">8</td>
<td class = "numberKey">9</td>
<td class = "operationKey">/</td>
<td class = "functionKey">C</td>
</tr>
<tr>
<td class = "numberKey">4</td>
<td class = "numberKey">5</td>
<td class = "numberKey">6</td>
<td class = "operationKey">*</td>
<td class = "functionKey">+/-</td>
</tr>
<tr>
<td class = "numberKey">1</td>
<td class = "numberKey">2</td>
<td class = "numberKey">3</td>
<td class = "operationKey">-</td>
<td rowspan = "2" class = "functionKey">=</td>
</tr>
<tr>
<td colspan = "2" class = "numberKey">0</td>
<td class = "functionKey">.</td>
<td class = "operationKey">+</td>
</tr>
</table>
</body>
</html>
class Calculation
{
firstNumber = "";
gotFirstNumber = false;
secondNumber = "";
gotSecondNumber = false;
operation = "";
gotOperation = false;
score = 0;
gotScore = false;
screen = document.getElementById('calculatorScreen');
// obsługa klawiszy z cyframi -> SELECT NUMBER
selectNumber(e)
{
let number = e.target.textContent;
if (!this.gotFirstNumber)
{
this.firstNumber += number;
this.firstNumber = this.limitZeros(this.firstNumber);
this.displayCalculation();
}
if ((this.gotFirstNumber) && (!this.gotSecondNumber))
{
this.secondNumber += this.limitZeros(number);
this.secondNumber = this.limitZeros(this.secondNumber);
this.displayCalculation();
}
}
// obsługa klawiszy z operacjami matematycznymi -> SELECT OPERATION
selectOperation(e)
{
if ((this.checkIfEntered(this.firstNumber)) && (!this.gotOperation))
{
this.operation = e.target.textContent;
this.gotFirstNumber = true;
this.gotOperation = true;
this.displayCalculation();
}
}
displayCalculation()
{
if (!this.gotScore)
{
this.screen.textContent = this.firstNumber + " " + this.operation + " " + this.secondNumber;
}
}
// obsługa klawiszy funkcyjnych -> SELECT FUNCTION
selectFunction(e)
{
let functionKey = e.target.textContent;
switch (functionKey)
{
case 'C':
this.clearScreen();
break;
case '=':
this.displayScore();
break;
case '.':
this.addComma();
break;
case '+/-':
this.addMinus();
break;
}
}
// case 'C':
clearScreen()
{
this.resetCalculation();
this.screen.textContent = "";
}
resetCalculation()
{
this.firstNumber = "";
this.gotFirstNumber = false;
this.secondNumber = "";
this.gotSecondNumber = false;
this.operation = "";
this.gotOperation = false;
this.score = 0;
this.gotScore = false;
}
// case '='
displayScore()
{
if (this.checkIfEntered(this.secondNumber))
{
this.calculateScore();
this.gotScore = true;
this.gotSecondNumber = true;
this.screen.textContent = this.score;
}
}
calculateScore()
{
let X = parseFloat(this.firstNumber);
let Y = parseFloat(this.secondNumber);
switch (this.operation)
{
case '+':
this.score = X + Y;
break;
case '-':
this.score = X - Y;
break;
case '*':
this.score = X * Y;
break;
case '/':
(Y == 0) ? (this.score = "WTF?") : (this.score = X / Y);
break;
}
}
// case '.'
addComma()
{
let numberToCheck;
(this.gotOperation) ? (numberToCheck = this.secondNumber) : (numberToCheck = this.firstNumber);
if ((this.checkIfEntered(numberToCheck)) && (this.checkIfMinus(numberToCheck)))
{
(this.gotOperation) ? this.secondNumber = this.puttingComma(this.secondNumber) : this.firstNumber = this.puttingComma(this.firstNumber);
this.displayCalculation();
}
}
puttingComma(number)
{
return (number.includes('.')) ? (number = number.replace(".","")) : (number += ".");
}
// case '+/-'
addMinus()
{
(this.gotOperation) ? this.secondNumber = this.puttingMinus(this.secondNumber) : this.firstNumber = this.puttingMinus(this.firstNumber);
this.displayCalculation();
}
puttingMinus(number)
{
return (number.includes('-')) ? (number.slice(1)) : (number = "-" + number);
}
// metoda pomoocnicza - pusty (string) number?
checkIfEntered(number)
{
let numberOK = false;
(number.length == 0) ? (numberOK = false ) : (numberOK = true);
return numberOK;
}
// metoda pomoocnicza - ogranicz liczbę zer
limitZeros(number)
{
let numberReturned = number;
if ((this.checkIfEntered(number)) && (number[1] == "0"))
{
numberReturned = numberReturned.slice(1);
}
else
{
numberReturned = number;
}
return numberReturned;
}
// metoda pomoocnicza - pierwszy znak to minus?
checkIfMinus(number)
{
let numberOK = false;
if ((number.length == 1) && (number == '-'))
{
numberOK = false;
}
else
{
numberOK = true;
}
return numberOK;
}
// MAIN CASE
decodeKey(e)
{
let keyClass = e.target.className;
switch (keyClass)
{
case 'numberKey':
this.selectNumber(e);
break;
case 'operationKey':
this.selectOperation(e);
break;
case 'functionKey':
this.selectFunction(e);
break;
}
}
}
const currentCalculation = new Calculation;
const calculator = document.getElementById('calculator').addEventListener('click', e => currentCalculation.decodeKey(e));
