Hesap makinesi html css javascript (alıntı). Güzel kullanışlı hesap makinesi yeni başlayanlar için çok uygun ve tecrübe kazandırır.
Html kodları:
<html>
<head>
<title>hesap makinesi</title>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<div class="calculator">
<div class="screen">.</div>
<br/>
<div class="buttons">
<button>7</button>
<button>8</button>
<button>9</button>
<button>+</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>-</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button>*</button>
<button>0</button>
<button>.</button>
<button>/</button>
<button id="equals">=</button>
</div>
<br/>
<button id="clear">CLEAR</button>
</div>
<script src="app.js"></script>
</body>
</html>
CSS kodları:
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
background-color:rgb(51, 84, 84);
}
.calculator{
background-color:rgb(211, 211, 211);
padding:20px;
border-radius:10px;
}
.screen{
width:224px;
background-color:rgb(176, 205, 176);
font-size:40px;
text-align:end;
padding:4px;
}
.buttons{
width:232px;
display:flex;
flex-wrap:wrap;
}
button{
background-color:rgb(131, 129, 129);
border:none
color:rgb(255,255,255);
font-size:40px;
width:50px;
height:50px;
border-radius:25px;
margin:4px;
}
button:hover{
background-color:rgb(111, 110, 110);
}
button:active{
background-color:rgb(232, 232, 232);
}
#equals{
background-color:rgb(218,2,2);
}
#equals:hover{
background-color:rgb(198,1,1);
}
#clear{
width:100%;
background-color:rgb(252,226,27);
font-size:30px;
}
#clear{
background-color:rgb(252,201,17);
}
JAVASCRİPT kodları:
const screenDisplay = document.querySelector('.screen')
const buttons = document.querySelectorAll('button')
let calculation = []
let accumulativeCalculation
function calculate(button){
const value = button.textContent
if(value === "CLEAR"){
calculation = []
screenDisplay.textContent = '.'
}
else if(value === "=" )
{
console.log(accumulativeCalculation)
screenDisplay.textContent = eval(accumulativeCalculation)
}
else
{
calculation.push(value)
accumulativeCalculation = calculation.join('')
screenDisplay.textContent = accumulativeCalculation
}
}
buttons.forEach(button => button.addEventListener('click' , () => calculate(button)))
Hiç yorum yok:
Yorum Gönder
Her yorum bilgidir. Araştırmaya devam...