Untitled

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="author" content="Jakub Mamiński">
<style>
#gora {
height:150px;
background-color:#7ce2a7;

}
#srodek {
height:300px;
background-color:#be88e8;
font-size:100px;
color:#545454;
border-radius:10px;
}
#srodek2 {
height:150px;
background-color:#7ce2a7;
font-size:150px;
color:#545454;


}
#dol {
height:150px;
background-color:#7ce2a7;

}
body{
background-color:#7ce2a7;
}

form
{
 text-align: center;
}


</style>
</head>
<body>
<div id="gora"></div>
<div id="srodek">
<form name="a">
<input type="text" name="b" style="height:100px; width:170px; font-size:100px; padding:20px; margin-top:70px; margin-left: 50px; background-color: transparent; border-width: 0;" disabled><span id=zmiana>+</span>
<input type="text" name="c" style="height:100px; width:170px; font-size:100px; padding:20px; margin-top:70px; margin-left: 50px; background-color: transparent; border-width: 0;" disabled><span>=</span>
<input type="text" name="d" style="height:100px; width:170px; font-size:100px; padding:20px; margin-top:70px; margin-left: 50px; border-width: 0;">
</form>

</div>
<div id="srodek2">
</div>
<div id="dol">
<form name="ab">
<input type="text" name="e" style="height:80px; width:80px; font-size:100px;margin-top 0%; font-size: 40px; text-align: center;" disabled>
<input type="text" name="f" style="height:80px; width:80px; font-size:100px; margin-left: 20px; font-size: 40px; text-align: center;" disabled>
<br><br>
<input type="button" value="sprawdź" onclick="sprawdz()" style="margin-left:48%;"/>
</form>
</div>
<script>
document.ab.e.value="";
document.ab.f.value="";

var poziom=0;
var los=Math.floor(Math.random()*20);
var los2=Math.floor(Math.random()*20);
document.a.b.value=los;
document.a.c.value=los2;
var jd=0;
var jz=0;
function sprawdz()
{
var pop=0;
var b=document.a.b.value;
var c=document.a.c.value;

if(poziom==0)pop=parseInt(b)+parseInt(c);
else if(poziom==1)pop=parseInt(b)*parseInt(c);
else if(poziom==2)pop=parseInt(b)/parseInt(c);
else if(poziom==3)pop=parseInt(b)-parseInt(c);

if(document.a.d.value==pop){
if(jd==2 || jd==4 || jd==6)poziom++;
document.getElementById("gora").innerHTML="<img src='usmiech.png' style='width:100px;height:100px;padding-left:50%;'>"
jd++;
document.ab.e.value=jd;
if(jd==3|| jd==5 || jd==7)
document.getElementById("srodek2").innerHTML+="<img src='usmiech.png' style='width:75px;height:75px;'>"
}
else {
jz++;
document.ab.f.value=jz;
document.getElementById("gora").innerHTML="<img src='nieusmiech.png' style='width:100px;height:100px;padding-left:50%;'>"
}
if(poziom==0)document.getElementById("zmiana").innerHTML="+";
else if(poziom==1){if(jd==3)alert("Zamiana poziomu trudności!");document.getElementById("zmiana").innerHTML="*";}
else if(poziom==2){if(jd==5) alert("Zamiana poziomu trudności!"); document.getElementById("zmiana").innerHTML="/";}
else if(poziom==3){if(jd==7) alert("Zamiana poziomu trudności!");document.getElementById("zmiana").innerHTML="-";}
var los;
var los2;
if(poziom==2)
{
do{
los=Math.floor(Math.random()*20);
los2=Math.floor(Math.random()*20);
}while(los%los2!=0);
}
else if(poziom==3)
{
do{
los=Math.floor(Math.random()*20);
los2=Math.floor(Math.random()*20);
}while(los-los2<0);
}
else{
los=Math.floor(Math.random()*20);
los2=Math.floor(Math.random()*20);
}

document.a.b.value=los;
document.a.d.value="";
document.a.c.value=los2;


}


</script>
</body>
</html>