Kolokvijum 2 - SKI

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Kolokvijum sa grupe</title>
    <style>
        #wrapper {
            background-color: green;
            border:2px solid red;
            position: relative;
            width: 500px;
            height: 300px;
            margin-top:20px;
            animation-name: rotate;
            animation-duration:8s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }
        #ball {
            width:100px;
            height: 100px;
            border-radius: 50px;
            background-color: red;
            position:absolute;
            animation-name: bounce;
            animation-duration:3s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }
        #ball h2 {
            color:white;
            position: absolute;
            left:24%;
            top:15%;
        }

        @keyframes bounce {
            0% {
                left:200px;
                top:0px;
            }
            25% {
                left:0px;
                top:100px;
            }
            50% {
                left:200px;
                top:200px;
            }
            75% {
                left:400px;
                top:100px;
            }
            100% {
                left:200px;
                top:0px;
            }
        }
        #prosti {
            height: 300px;
            width: 150px;
            border:1px solid black;
            margin-top:15px;
        }
        #prosti p {
            padding-left: 5px;/*Da odlepim tekst prosti brojevi od leve ivice, malo me triggeruje, ništa bitno. */
        }
        #fiks {
            visibility:hidden;
            width:500px;
            height: 300px;
            border:2px solid green;
            position: fixed;
            left:5%;
            top:5%;
            background-color: yellow;
            z-index: 1;
        }
        #dugmence {
            position: absolute;
            left:430px;
            top:270px;
        }
        #zvezdica {
            font-size: 125px;
            margin-left: 200px;
        }
    </style>
</head>
<body>
    <h2>Kolokvijum sa grupe menu:</h2>
    <a href="#zadatak1"><h4>Prvi zadatak</h4></a>
    <a href="#zadatak2"><h4>Drugi zadatak</h4></a>
    <a href="#zadatak3"><h4>Treći zadatak</h4></a>
    <h2 id="zadatak1">Prvi zadatak - Aj sad malčice drugačija animacija</h2>
    <div id="wrapper">
            <div id="ball"><h2>CSS</h2></div>
    </div>
    <h2  id="zadatak2">Drugi Zadatak - div i prompt sa prostim brojevima.</h2>
    <button type="button" onclick="dodajProste()">Unesi broj i ubaci ako je prost</button><!-- stavljam type button da se ne bi refreshovala stranica svaki put kad ga kliknem, nebitno je. -->
    <div id="prosti">
        <p>Prosti brojevi: </p>
    </div>

    <h2  id="zadatak3">Treći Zadatak - fiksirani div i zvezdice.</h2>
    <button type="button" onclick="showButton()">Prikaži fiksirani div</button>
    <div id="fiks">
        <h1 id="zvezdica" style="transform: rotate(30deg);">*</h1>
        <button type="button" id="dugmence" onclick="rotateStar()">Rotiraj</button>
    </div>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

    <script>//Da, inače je preporuka pisati script tag na kraju body taga (nakon što su se svi elementi učitali,
            //da ne bi neki element prepoznao kao null, nije mnogo bitno, al' ono, praktikuj :))

        let divProsti = document.getElementById("prosti"); //Dohvatamo element sa id="prosti" tj. div u koji ćemo da upisujemo proste brojeve

        function dodajProste() {
            let num = prompt("Unesite neki broj");
            num=parseInt(num);//on izlazi iz prompta kao string, pa moramo da ga kastujemo u broj.
            let prost=true;
            for(let i=2;i<num;i++) {
                if((num%i)==0) {
                    prost=false;
                }
            }
            if(prost) {//if(prost==true)
            divProsti.innerHTML+="<p>"+num+"</p>"; //ili `<p>${num}</p>` <- ovo je preko literala, koristi šta ti je lakše
                                                     //https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

            }

        }

        function showButton() {
            let hiddenDiv = document.getElementById("fiks");
            //hiddenDiv.style.visibility="visible";

            if(hiddenDiv.style.visibility=="hidden") {
                hiddenDiv.style.visibility="visible";
            }
            else {
                hiddenDiv.style.visibility="hidden";
            }
        }
        function rotateStar() {
            let star = document.getElementById("zvezdica");
            let angle = star.style.transform;//ovime dobijemo vrednost atributa transform
                                             //pošto je transform: rotate(30deg), ovaj poziv će nam vratiti
                                             //rotate(30deg) kao string, mi možemo da uzmemo samo vrednost ugla

            let indexZagrada = angle.indexOf("("); //nađemo indekse zagrade
            let indexD = angle.indexOf("d");       //i indeks gde se nalazi slovo d

                                             //izdvojimo ono što se nalazi između njih (naš ugao)

            angle = parseInt(angle.substring(indexZagrada+1,indexD));

            //sada je angle kastovan u broj.. u prvom slučaju će to biti 30, na tu vrednost ćemo da dodajemo našu željenu vrednost i vratićemo nazad u style.


            angle+=30;

            star.style.transform="rotate("+angle+"deg)";

            console.log(star.style.transform);

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