Untitled

<!DOCTYPE html>
<html>

<head>
    <style>
        #h1,
        #h2 {
            text-align: center;
        }

        #sec1,
        #sec2 {
            display: inline-block;
            padding: 10px;
        }
        label {
            display: inline-block;
            width: 100px;
            padding: 5px;
        }
        .div {
            display: inline-block;
            padding: 15px;
        }

        #btn {
            margin-left:15cm;
        }
        table,th,td{
                border: 1px solid black;
                border-collapse: collapse;
         }

         #secTabela2
         {
            position: relative;
            left: 400px;
            top: -100px;
         }
         #sec1,#sec2
         {
            display: inline-block;
         }


    </style>
    <script>
        document.addEventListener("DOMContentLoaded",function(){
            let dataJSON='[{"ime":"Angela","prezime":"Angelova","id":"1503996780019","pol":"1","godini":"25","email":"anchian@yahoo.com","lokacija":"Bitola"},{"ime":"Dimitar","prezime":"Dimitrov","id":"1204950490019","pol":"2","godini":"71","email":"dimitar.dimitrov@gamil.com","lokacija":"Skopje"}]'
            let data=JSON.parse(dataJSON);

            for(let i=0;i<data.length;i++)
            {
                showPeople(i);
            }


            function showPeople(index)
            {
                const tabPolnoletni=document.getElementById("tabela2");
                const newRow=document.createElement('tr');
                const element=data[index];

                newRow.innerHTML=`
                    <td>${element.ime}</td>
                    <td>${element.prezime}</td>
                    <td>${element.email}</td>
                    <td>${element.lokacija}</td>
                    <td><button id='vak' onclick='vakcinacija(this)'>Вакциниран</button></td>

                `
               if(element.pol === '1')
               {
                newRow.style.backgroundColor='red';
               }
               else if (element.pol ==='2')
               {
                newRow.style.backgroundColor='lightblue';
               }


                tabPolnoletni.append(newRow)


            }
        })

        function vnesi()
        {
            let ime=document.getElementById("ime")
            let embg=document.getElementById("embg")
            let godini=document.getElementById("godini")
            let lokacija=document.getElementById("lokacija")
            let prezime=document.getElementById("prezime")
            let email=document.getElementById("email")
                                                                                                                                                 // Вака се прави за radio butttons
           if(ime.value==="" || embg.value==="" || godini.value==="" || lokacija.value==="" ||   prezime.value==="" || email.value===""  || (female.checked===false && male.checked===false))
           {
               alert("Внесете ги сите полиња");
               return;
           }
        //    let proverka=checkEMBG()
        //    console.log(proverka)

           if(!checkEMBG())
           {
            alert("nevaliden matichne broj");
            return;
           }
           let row=document.getElementsByClassName('rows');
           let flag=0;
           for(let i=0;i<row.length;i++)
           {
            if(ime.value===row[i].children[0].innerHTML && prezime.value===row[i].children[1].innerHTML)
            {
                flag=1;
                  row[i].children[3].innerHTML=lokacija.value;//го грешка овде имав додадено две ==
            }

           }

          if(flag===0)
          {

if(godini.value<18)
           {
             let tbMaloletni=document.getElementById('tabela1');
             let newRow=document.createElement('tr');
             newRow.innerHTML=`
                    <td>${ime.value}</td>
                    <td>${prezime.value}</td>
                    <td>${email.value}</td>
                    <td>${lokacija.value}</td>
                    <td><button id="btn" disabled>Вакциниран</button></td>
                `
                //disabled->onevozmozheno da bide kopchto
                newRow.setAttribute('class','rows');

                //vaka se zema vrednost od radio button
                if(female.checked===true)
                {
                   newRow.style.backgroundColor='red';
                }
                else if(female.checked===false)
                {
                  newRow.style.backgroundColor='lightblue';
                }
                tbMaloletni.append(newRow)
           }
           else if(godini.value>=18)
           {
            let tbPololetni=document.getElementById('tabela2');
             let newRow=document.createElement('tr');
             newRow.innerHTML=`
                    <td>${ime.value}</td>
                    <td>${prezime.value}</td>
                    <td>${email.value}</td>
                    <td>${lokacija.value}</td>
                    <td><button id="btn" onclick="vakcinacija(this)">Вакциниран</button></td>
                `

                newRow.setAttribute('class','rows');

                if(female.checked===true)
                {
                   newRow.style.backgroundColor='red';
                }
                else if(female.checked===false)
                {
                   newRow.style.backgroundColor='lightblue';
                }
                tbPololetni.append(newRow)
           }
          }

        }
        function checkEMBG()
        {
            let embg=document.getElementById("embg").value;
            let bukvi=0;
            for(let i=0;i<embg.length;i++)
            {
                if(isNaN(embg[i]))
                {
                    bukvi++;
                }
            }
            if(embg.length===13 && bukvi<1)
            {
                return true;
            }
            else
            {
                return false
            }
        }
        // function checkMail()
        // {
        //
        // }

        function  vakcinacija(btn)
        {
           let row=btn.parentNode.parentNode;
           row.style.opacity=1;
           let index=setInterval(function()
           {
              row.style.opacity-=0.05;//ne zaboravaj ovde ne stoi samo opacity
           },100)

           setTimeout(function(){
                    clearInterval(index);
                    let novoMesto=document.getElementById('zaVakcinirani')
                    let list=document.createElement("li");
                    //nema for deka mi ja dava momentalanata radica
                    let ime=row.children[0].innerHTML;
                    let prezime=row.children[1].innerHTML;
                    list.innerHTML=ime+" "+prezime;
                    list.style.opacity=1;
                    novoMesto.append(list);
                    row.remove()

           },2000)


        }
    </script>

</head>

<body>

    <h1 id="h1">Вакцинација.мк</h1>
    <h3 id="h2">Сајт за искажување на интерес за вакцина</h3>

    <section id="sec1">
        <div>
            <label>Име:</label>
            <input type="text" id="ime">
        </div>
        <div>
            <label>Матичен број:</label>
            <input type="text" id="embg">
        </div>
        <div>
            <label>Години:</label>
            <input type="text" id="godini">
        </div>

        <label>Локација:</label>
        <select id="lokacija">
            <option>Скопје</option>
            <option>Куманово</option>
            <option>Битола</option>
            <option>Тетово</option>
        </select>
        </div>
    </section>

    <section id="sec2">
        <div>
            <label>Презиме:</label>
            <input type="text" id="prezime">
        </div>
        <div>
            <label>Пол:</label>
            <!-- Со name беше за да се одбере само едно поле -->
            <input type="radio" id="female" name="gender">Женски
            <input type="radio" id="male" name="gender">Машки
        </div>
        <div>
            <label> Email адреса:</label>
            <input type="text" id="email">


        </div>

    </section>
    <br>
    <button id="btn" onclick="vnesi()">Внеси</button>

    <section id="secTabela1">
        <h2>Пријавени малолетни <br> граѓани</h2>
        <table>
            <thead>
                <th>Име</th>
                <th>Презиме</th>
                <th>Адреса</th>
                <th>Локација</th>
                <th>Статус</th>
            </thead>
           <tbody id="tabela1"></tbody>
        </table>
    </section>

    <section id="secTabela2">
        <h2>Пријавени полнолетни <br> граѓани</h2>
        <table>
            <thead>
                <th>Име</th>
                <th>Презиме</th>
                <th>Адреса</th>
                <th>Локација</th>
                <th>Статус</th>
            </thead>
           <tbody id="tabela2"></tbody>
        </table>
    </section>
     <br>
     <h4>Вакцинирани:</h4>
    <div id="zaVakcinirani">
         <ul id="unlist"></ul>
    </div>
</body>

</html>