Witam, mam problem, ponieważ nie wiem jak napisać funkcje:
1.która będzie mi wstawiać znak - przed liczbą ( przycisk " +- " ),
2.która będzie usuwać element(pojedynczo) ( przycisk " <- "),
3.która będzie liczyć wartości w nawiasie np, (2+2)/2 ( przyciski: "(" ")" )
Resztę funkcji do typowych działań napisałem, ewentualnie proszę o naniesienie poprawek do kodu ( tak by działał :) )
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="calculator.css">
</head>
<body>
<div class="calculator">
<input type="text" class="calculator-screen" id="content" value="" disabled />
<div class="calculator-odnosniki">
<button type="button" class="czyszczenie" value="wyczysc">C</button>
<button type="button" class="operator" style="font-size: 80px;" value="<-">⃖</button>
<button type="button" class="operator" value="^">x⊃</button>
<button type="button" class="operator" value="%">%</button>
<button type="button" class="operator" value="(">❨</button>
<button type="button" class="operator" value=")">❩</button>
<button type="button" class="operator" value="pierwiastek">√</button>
<button type="button" class="operator" value="*">×</button>
<button type="button" value="7">7</button>
<button type="button" value="8">8</button>
<button type="button" value="9">9</button>
<button type="button" class="operator" value="/">÷</button>
<button type="button" value="4">4</button>
<button type="button" value="5">5</button>
<button type="button" value="6">6</button>
<button type="button" class="operator" value="-">−</button>
<button type="button" value="1">1</button>
<button type="button" value="2">2</button>
<button type="button" value="3">3</button>
<button type="button" class="operator" value="+">+</button>
<button type="button" value="0">0</button>
<button type="button" class="decimal" value=",">,</button>
<button type="button" class="operator" value="+-">±</button>
<button type="button" class="rownasie operator" value="=">=</button>
</div>
</div>
<script>
const calculator = {
displayValue: '0',
firstOperand: null,
SecondOperand: false,
operator: null,
};
function inputDigit(digit) {
const {
displayValue,
SecondOperand
} = calculator;
if (SecondOperand === true) {
calculator.displayValue = digit;
calculator.SecondOperand = false;
} else {
calculator.displayValue = displayValue === '0' ? digit : displayValue + digit;
}
}
function inputDecimal(dot) {
if (calculator.SecondOperand === true) return;
if (!calculator.displayValue.includes(dot)) {
calculator.displayValue += dot;
}
}
function handOperator(nextOperator) {
const {
firstOperand,
displayValue,
operator
} = calculator
const inputValue = parseFloat(displayValue);
if (operator && calculator.SecondOperand) {
calculator.operator = nextOperator;
return;
}
if (firstOperand == null) {
calculator.firstOperand = inputValue;
} else if (operator) {
const currentValue = firstOperand || 0;
const result = arthmeticValues[operator](currentValue, inputValue);
calculator.displayValue = String(result);
calculator.firstOperand = result;
}
calculator.SecondOperand = true;
calculator.operator = nextOperator;
}
const arthmeticValues = {
'/': (firstOperand, secondOperand) => firstOperand / secondOperand,
'*': (firstOperand, secondOperand) => firstOperand * secondOperand,
'+': (firstOperand, secondOperand) => firstOperand + secondOperand,
'-': (firstOperand, secondOperand) => firstOperand - secondOperand,
'^': (firstOperand, secondOperand) => Math.pow(firstOperand, secondOperand),
'pierwiastek': (firstOperand, secondOperand) => Math.sqrt(secondOperand),
'%': (firstOperand, secondOperand) => (parseInt(firstOperand) * 100) / parseInt(secondOperand),
'=': (firstOperand, secondOperand) => secondOperand
};
function resetCalculator() {
calculator.displayValue = '0';
calculator.firstOperand = null;
calculator.SecondOperand = false;
calculator.operator = null;
}
function updateDisplay() {
const display = document.querySelector('.calculator-screen');
display.value = calculator.displayValue;
}
updateDisplay();
const keys = document.querySelector('.calculator-odnosniki');
keys.addEventListener('click', (event) => {
const {
target
} = event;
if (!target.matches('button')) {
return;
}
if (target.classList.contains('operator')) {
handOperator(target.value);
updateDisplay();
return;
}
if (target.classList.contains('decimal')) {
inputDecimal(target.value);
updateDisplay();
return;
}
if (target.classList.contains('czyszczenie')) {
resetCalculator();
updateDisplay();
return;
}
inputDigit(target.value);
updateDisplay();
});
</script>
</body>
</html>
html {
font-size: 70%;
box-sizing: border-box;
}
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: inherit;
}
.calculator {
border: 1px solid #ccc;
border-radius: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 500px;
}
.calculator-screen {
width: 100%;
font-size: 5rem;
height: 80px;
border: none;
background-color: #c09ada;
color: #fff;
text-align: right;
padding-right: 20px;
padding-left: 10px;
}
button {
height: 60px;
background-color: #a80054;
border-radius: 3px;
border: 2px solid #a80054;
background-color: transparent;
font-size: 2rem;
color: #333;
background-image: linear-gradient(to bottom, transparent, transparent 50%, rgba(0, 0, 0, .04));
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), inset 0 1px 0 0 rgba(255, 255, 255, .45), inset 0 -1px 0 0 rgba(255, 255, 255, .15), 0 1px 0 0 rgba(255, 255, 255, .15);
text-shadow: 0 1px rgba(255, 255, 255, .4);
}
button:hover {
background-color: #f169d4;
}
.operator {
color: #000000;
}
.czyszczenie {
background-color: rgb(219, 157, 206);
border-color: #a80054;
color: #fff;
}
.czyszczenie:hover {
background-color: #f169d4;
}
.rownasie {
background-color: rgb(219, 157, 206);
border-color: #a80054;
color: rgb(0, 0, 0);
}
.rownasie:hover {
background-color: #f169d4;
}
.calculator-odnosniki {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 20px;
padding: 20px;
color: #245233;
}
