krugovi

<!DOCTYPE html>
<html lang="en">

  <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="new3.js"></script>
    <style>

    #cetvrtidiv {
    position:relative;
    top:10px;
    display:block;
    padding-top:95px;
    border-radius: 0px 50px 0px 0px;
    background-color:lightblue;
    width:200px;
    height:105px;}

    </style>
  </head>
<body>
    <div id="prvidiv" align="center" style="position:absolute;
    left:250px;
    display:block;
    padding-top:95px;
    border-radius: 50%;
    background-color:red;
    width:200px;
    height:105px;" >ovo je prvi div</div>
    <div id="drugidiv" align="center" style="display:block;
    padding-top:95px;
    border-radius: 50%;
    background-color:green;
    width:200px;
    height:105px;" >ovo je drugi div</div>
    <div id="trecidiv" onmouseover="povecanje()" onmouseleave="smanjenje()" align="center" style="position:absolute;
    left:500px;
    top:10px;
    display:block;
    padding-top:95px;
    border-radius: 50%;
    background-color:blue;
    width:200px;
    height:105px;" >ovo je treci div</div>


 <button id="promena"onclick="alert('pozdrav')">poruka</button><br><br>
 <button id="sakrij"onclick="sakrij()">sakrij</button><br><br>
 <button id="sadrzaj"onclick="sadrzaj()">sadrzaj</button>
 <button id="sadrzaj"onclick="vrati()">vrati</button><br><br>
 <button id="boja"onclick="boja()">boja</button>

 <div id="cetvrtidiv">
<input id="broj" type="number" name="fname" >Unesi broj</input><br>
 <button id="pogodi" onclick="pogodi()">Pogodi broj</button>
 </div>


 </body>
</html>

 //// skripta
function sadrzaj(){
    document.getElementById("prvidiv").innerHTML += "<ul><li>C#</li><li>java</li></ul>";
}

function vrati(){
    document.getElementById("prvidiv").innerHTML = "ovo je drugi div";

}

function boja(){
    var sel = document.getElementById("drugidiv");
    if (sel.style.backgroundColor=="green") {
        sel.style.backgroundColor ="blue";
    } else {
        if(sel.style.backgroundColor=="red"){
            sel.style.backgroundColor ="green"
        } else {
            if(sel.style.backgroundColor=="blue"){
            sel.style.backgroundColor ="red"
            }
        }
    }


    var sel = document.getElementById("prvidiv");
    if (sel.style.backgroundColor=="green") {
        sel.style.backgroundColor ="blue";
    } else {
        if(sel.style.backgroundColor=="red"){
            sel.style.backgroundColor ="green"
        } else {
            if(sel.style.backgroundColor=="blue"){
            sel.style.backgroundColor ="red"
            }
        }
    }

    var sel = document.getElementById("trecidiv");
    if (sel.style.backgroundColor=="green") {
        sel.style.backgroundColor ="blue";
    } else {
        if(sel.style.backgroundColor=="red"){
            sel.style.backgroundColor ="green"
        } else {
            if(sel.style.backgroundColor=="blue"){
            sel.style.backgroundColor ="red"
            }
        }
    }
}

function sakrij(){
    var sel = document.getElementById("prvidiv");
    if (sel.style.display=="block") {
        sel.style.display ="none";
    } else {
        sel.style.display ="block";
    }
}

function povecanje(){
    document.getElementById("trecidiv").style.width = "300px";
}

function smanjenje(){
    document.getElementById("trecidiv").style.width = "200px";
}

function pogodi()
{
    if(document.getElementById("broj").value == "3") {
     alert("Pogodili ste!");
}
    else { alert("Niste pogodili."); }


}