- Katılım
- 9 Ara 2020
- Konular
- 71
- Mesajlar
- 255
- Çözümler
- 1
- Tepki puanı
- 218
- Puanları
- 2,110
uygulama.html ;
uygulama.css ;
uygulama.js ;
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Hesap makinesi</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="uygulama.css">
</head>
<body>
<div class="arka">
<div class="ust2" id="usth2"></div>
<input type="text" class="ust" onkeyup="uygula()" onkeypress="hesapla3(event)" >
<div class="alt">
<button type="button" value="1">1</button>
<button type="button" value="2">2</button>
<button type="button" value="3">3</button>
<button type="button" 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" 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" value="+">+</button>
<button type="button" value="C" id="temizle">C</button>
<button type="button" value="0">0</button>
<button type="button" value="=" id="hesapla">=</button>
<button type="button" value="-">-</button>
</div>
</div>
<script src="uygulama.js"></script>
</body>
</html>
CSS:
.arka{
background: burlywood;
width: 425px;
height: 450px;
margin:0 auto;
margin-top:50px;
position: static;
}
.ust{
text-align: center;
width: 398px;
height: 65px;
background: white;
border:1px solid black;
margin:0px 0 0 12px;
position: absolute;
font:bold 20px tahoma;
color:rgb(245, 87, 87);
}
.ust2{
background-color: rgb(48, 44, 44);
width: 403px;
height: 20px;
margin-left: 13px;
position: relative;
text-align: center;
color:white;
font:bold 15px tahoma;
}
.alt{
height: 255px;
width:403px;
margin:90px 0 0 12px;
position: absolute;
}
button{
padding:20px;
width: 100px;
font-size: 18px;
border:1px solid black;
background-color: salmon;
font-size: 32px;
font-family: "Gill Sans","Gill Sans MT",'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-weight: 700;
color:brown;
transition: 0.3s ease;
float: left;
}
button:hover{
cursor: pointer;
background-color: sienna;
}
fieldset{
border-color: salmon !important;
font-size: 24px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-weight: 700;
color:brown;
}
body{
background: grey;
}
JavaScript:
let buton = document.getElementsByTagName("button");
let ust = document.getElementsByClassName("ust")[0];
let hesapla = document.getElementById("hesapla");
let temizle = document.getElementById("temizle");
let usth = document.getElementById("usth2");
var s = 0;
for(var i =0;i<16;i++){
if(i!=12 && i!=14){
buton[i].addEventListener("click",yaz);
}
}
function yaz(){
ust.value=ust.value+this.value;
if(!ust.value){
}else{
usth.innerHTML=eval(ust.value);
}
}
hesapla.addEventListener("click",hesapla2);
function hesapla2(){
usth.innerHTML="";
ust.value=eval(ust.value);
}
temizle.addEventListener("click",temizle2);
function temizle2(){
usth.innerHTML="";
ust.value="";
}
function hesapla3(event){
s=0;
if(event.keyCode==13){
s=1
usth.innerHTML="";
ust.value=eval(ust.value);
}
}
function uygula(){
if(s==1){
}else{
if(!ust.value){
}else{
usth.innerHTML=eval(ust.value);
}
}
}
