<!doctype html>
<html>
<title>sudoku-mali</title>
<head>
<style>
body{
font-family:Verdana;
background-image: radial-gradient(circle, darkgreen, green, black);
}
#okvir{
width:60%;
height:100vh;
margin:1px auto;
padding:20px;
background:white;
}
#urica{
  background-color: #68a; 
  border: double;
  border-radius: 15px;
  color: white;
  width: 180px;
  padding: 10px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}
#okvir1{
margin:20px auto;
padding:2px;
width:260px;
height:260px;
border:4px solid black;
}
#obavijest{
font-size:25px;
text-align:center;
font-weight: bold;
border:1px solid;
}
input{
margin:1px auto;
width:80px;
height:80px;
border:1px solid black;
text-align:center;
font-size:40px;
}
#botun{
width:120px;
padding:10px;
text-align:center;
font-size:20px;
background:#248;
border:1px solid #248;
border-radius:10px;
color:#fff;
}
#botun:hover{
background:#36b;
cursor:pointer;
}
</style>
</head>

<body>
<div id="okvir">
<h1>MALI SUDOKU</h1>
<b>Pravila igre:</b>
<br>- Svaki redak, stupac i okvirić moraju sadržavati SVE brojeve od 1 do 3.
<br>- Brojevi unutar retka ili stupca moraju biti različiti.
<br>- Zbroj u svakom retku ili stupcu mora biti 6.
<hr>
<center>
<P><div id='urica'>00 : 00</div>
<div id="okvir1">
<input type="text" value="" id="upis0"><input type="text" value="" id="upis1"><input type="text" value="" id="upis2">
<input type="text" value="" id="upis3"><input type="text" value="" id="upis4"><input type="text" value="" id="upis5">
<input type="text" value="" id="upis6"><input type="text" value="" id="upis7"><input type="text" value="" id="upis8">
</div>
<p>
<div id="obavijest"></div>
<p>
<button id="botun" onclick="kreni()">Kreni</button>&nbsp;<button id="botun" onclick="provjeri()">Provjera</button>&nbsp;
<button id="botun" onclick="location.reload()">Novo</button>
</center>
</div>

<script>
var d=new Date();
var vrijeme=0;
var minute=0;
var krenulo=0,kraj=0;
var provjereno=0;
var upisi=["upis0","upis1","upis2","upis3","upis4","upis5","upis6","upis7","upis8",];
var izb=Math.round(8*Math.random());
var n=1+Math.round(2*Math.random());
var u=[];

function kreni(){
  if(krenulo==1) return;
  if(kraj==1) {obavijest.innerHTML="Za novu igru klikni na NOVO!";return;}
  if(kraj==0){
    stoperica = setInterval(function () {
     vrijeme++;
     if(vrijeme%60==0) {minute++;vrijeme=vrijeme-60;}
     if(vrijeme<10) vrijeme="0"+vrijeme;
     if(minute<1) urica.innerHTML = "<b>"+"00 : "+vrijeme+"</b>"; 
     else if (minute>1&&minute<10) urica.innerHTML = "<b>"+"0"+minute+":"+vrijeme+"<b>";
     else urica.innerHTML = "<b>"+minute+":"+vrijeme+"<b>";
    }, 1000);
  }
  document.getElementById(upisi[izb]).value=n;
  document.getElementById(upisi[izb]).style="background:azure";
  document.getElementById(upisi[izb]).disabled='disabled';
  krenulo=1;
}

function provjeri(){
  if(provjereno==1||kraj==1) return;
  for(i=0;i<9;i++) u[i]=parseInt(document.getElementById(upisi[i]).value);
  if(eval(u[0]+u[1]+u[2])==6&&eval(u[3]+u[4]+u[5])==6&&eval(u[6]+u[7]+u[8])==6) {
    obavijest.style="background:#afb;color:'green'";
    obavijest.innerHTML="TOČNO!";
    for(i=0;i<9;i++) document.getElementById(upisi[i]).style="background:#afb;color:'green'";
  }
  else{
    obavijest.style="background:#fba;color:'red'";
    obavijest.innerHTML="POGREŠNO!";
    for(i=0;i<9;i++) document.getElementById(upisi[i]).style="background:#fba;color:'red'";
  }
  kraj=1; provjereno=1;
  clearInterval(stoperica);
}
//231
//123
//312
</script>
</body>
</html>