<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kalkulator</title>
<link rel="stylesheet" href="style.css">
<script src="skrypt.js" defer></script>
</head>
<body>
<div class="kalkulator">
<div class="wynik">
<div class="poprzednie-dzialanie"></div>
<div class="aktualne-dzialanie"></div>
</div>
<button class="wyczysc col-dwa">AC</button>
<button class="usun">DEL</button>
<button class="operator">√</button>
<button class="operator">÷</button>
<button class="liczba">1</button>
<button class="liczba">2</button>
<button class="liczba">3</button>
<button class="operator">^</button>
<button class="operator">× </button>
<button class="liczba">4</button>
<button class="liczba">5</button>
<button class="liczba">6</button>
<button class="operator">%</button>
<button class="operator">-</button>
<button class="liczba">7</button>
<button class="liczba">8</button>
<button class="liczba">9</button>
<button class="operator">log</button>
<button class="operator row-dwa">+</button>
<button class="liczba">.</button>
<button class="liczba">0</button>
<button class="rownosc col-dwa">=</button>
</div>
</body>
</html>
const liczby = document.guerySelectorAll('.liczba')
const operatory = document.guerySelectorAll('.operator')
const wyczysc = document.guerySelector('.wyczysc')
const usun = document.guerySelector('usun')
const rownosc = document.guerySelector('.rownosc')
const wynikPoprzednie = document.guerySelector('poprzednie-dzialanie')
const wynikAktualne = document.guerySelector('.aktualne-dzialanie')
var aktualneDzialanie = ''
var poprzednieDzialanie = ''
var operacja = undefined
const oblicz = () => {
let dzialanie
if(!poprzednieDzialanie || !aktualneDzialanie) {
return
}
const poprzednie = parseFloat(poprzednieDzialanie)
const aktualne = parseFloat(aktualneDzialanie)
if(isNaN(poprzednie) || isNaN(aktualne)) {
return
}
switch ( operacja) {
case '+':
dzialanie = poprzednie + aktalne
break;
case '-':
dzialanie = poprzednie - aktalne
break;
case 'x':
dzialanie = poprzednie * aktaulne
break;
case '÷':
if(aktualne === 0 )
{
wyczyscWynik( )
return
}
dzialnie = poprzednie / aktualne
break
case '√':
dzialanie = Math.pow(poprzednie, 1/aktualy)
break
case '^':
dzialanie = Math.pow(poprzednie,aktualne)
break
case 'log':
dzialanie = Math.log(poprzednie, aktualne)
break;
default:
return
}
aktualneDzialanie = dzialanie
operacja = undefined
poprzednieDziałanie = ''
}
const wybierzOperacje = (operator) => {
if(aktulaneDzialanie === ''){
return
}
if(porzednieDzialanie !== '') {
const poprzednie = wynikPoprzednie.innerText
if(aktualizujDzialanie.toString() ==='0' && poprzednie[poprzednie.length-1]==='+') {
wyczyszcWynik()
return
}
oblicz()
}
operacja = operator
poprzednieDzialanie = aktualneDzialanie
aktualneDzialanie = ''
}
const zaktualizujWynik = () => {
wynikAktualny.innerText = aktualneDzialanie
if(operacja !=null) {
wynikPoprzednie.innerText = poprzednieDzialanie + operacja
} else {
wynikPoprzednie.innerText = ''
}
const dodajLiczbe = (liczba) => {
if(liczba === '.') {
if(aktualneDzialanie.includes('.')){
return
}
aktualneDzialanie = aktualneDzialanie.toString()+ liczba.toString()
}
const usunLiczbe = () => {
aktualneDzialanie = aktualneDzialanie.toString().slice(0, -1)
}
const wyczyscWynik = () => {
aktualizujDzialanie = ''
poprzednieDzialanie = ''
operacja = undefined
liczby.forEach((liczba) => {
liczba.addEventListener('click', () => {
dodajLiczbe(liczba.innerText)
zaktualizujWynik()
})
})
usun.addEventListener('click',() => {
usunLiczbe()
zaktualizujWynik()
})
operatory.forEach((operator) => {
operator.addEventListener('click', () => {
wybierzOperacje(operator.innerText)
zaktualizujWynik()
})
})
rownosc.addEventListener('click', () => {
oblicz()
zaktualizujWynik()
})
wyczysc.addEventListener('click',() => {
wyczyscWynik()
zaktualizujWynik()
})
*, *::after, *::before {
box-sizing: border-box;
font-family: sans-sans-serif;
font-size: 22px;
font-weight: 500;
color: blue;
}
body {
padding: 0;
background: pink;
}
.kalkulator {
margin: 25px;
display:grid;
justify-content: center;
align-content: center;
grid-template-columns: repeat(5,80px);
grid-template-rows: minmax(120px, auto) repeat(5, 80px);
}
.wynik {
grid-column: 1 / -1;
background-color: pink;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: space-between;
padding: 25px;
box-shadow: 0px 4px 25px -10px rgba(0,0,0,0.75);
word-wrap: break-word;
word-break: break-all;
}
.poprzednie-dzialanie {
font-size: 16px;
font-weight: 400;
color: rgba(255,255,255, .8)
}
.aktualne-dzialanie {
font-size: 30px;
}
button{
cursor: pointer;
border: 1px solid #333533;
background: grin;
outline: none;
}
button:hover, button:focus {
background: rgba(36, 36, 35, .95);
}
.col-dwa {
grid-column: span 2;
}
.row-dwa{
grid-row: span 2;
}
