Untitled
unknown
html
3 years ago
9.2 kB
11
Indexable
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
label,input,select{
display: block;
}
#label1{
padding-right: 50px;
}
#label2{
margin-left: 200px;
margin-top:-155px;
}
td,table,th{
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<script>
window.onload=function () {
var data = '[{"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@gmail.com","lokacija":"Skopje"}]'
var data = JSON.parse(data);
for (var i = 0; i < data.length; i++) {
var ime = data[i].ime;
var prezime = data[i].prezime;
var id = data[i].id;
var pol = data[i].pol;
var godini = data[i].godini;
var email = data[i].email;
var lokacija = data[i].lokacija;
var redica = document.createElement("tr");
var tabela1 = document.getElementById("tabela1");
var tabela2 = document.getElementById("tabela2");
if (pol == 1) {
redica.style.backgroundColor = "red";
if (godini < 18) {
redica.innerHTML = "<td>" + ime + "</td>" + "<td>" + prezime + "</td>" + "<td>" + email + "</td>" + "<td>" + lokacija + "</td>"
var kopce = document.createElement("button");
kopce.innerHTML="Вакциниран"
redica.appendChild(kopce);
tabela1.appendChild(redica);
} else if (godini >= 18) {
redica.innerHTML = "<td>" + ime + "</td>" + "<td>" + prezime + "</td>" + "<td>" + email + "</td>" + "<td>" + lokacija + "</td>"
var kopce = document.createElement("button");
kopce.onclick = function() {
kopce.disabled = true;
};
kopce.innerHTML="Вакциниран"
redica.appendChild(kopce);
tabela2.appendChild(redica);
}
} else {
redica.style.backgroundColor = "blue";
if (godini < 18) {
redica.innerHTML = "<td>" + ime + "</td>" + "<td>" + prezime + "</td>" + "<td>" + email + "</td>" + "<td>" + lokacija + "</td>"
tabela1.appendChild(redica);
var kopce = document.createElement("button");
kopce.innerHTML="Вакциниран"
redica.appendChild(kopce);
tabela1.appendChild(redica);
} else if (godini >= 18) {
redica.innerHTML = "<td>" + ime + "</td>" + "<td>" + prezime + "</td>" + "<td>" + email + "</td>" + "<td>" + lokacija + "</td>"
var kopce = document.createElement("button");
kopce.onclick=(function(kopce){
return function(){
kopce.disabled=true;
};
})(kopce);
kopce.innerHTML="Вакциниран"
redica.appendChild(kopce);
tabela2.appendChild(redica);
}
}
}
}
function Vnesi(){
var maticenb = document.getElementById("maticen").value;
var godini = document.getElementById("godini").value;
var lokacija = document.getElementById("lokacija").value;
var prezime = document.getElementById("prezime").value;
var ime = document.getElementById("ime").value;
var zenski = document.getElementById("zenski").checked;
var maski = document.getElementById("maski").checked;
var email = document.getElementById("email").value;
var tabela1 = document.getElementById("tabela1");
var tabela2 = document.getElementById("tabela2");
var redica = document.createElement("tr");
if(ime == "" || maticenb == "" || godini == "" || lokacija == "" || prezime == "" || email == "" || (zenski==false && maski==false)) {
alert("Popolnete gi site polinja");
}
else{
if(maticenb.length==13){
if(email.indexOf("@gmail.com")=== -1 && email.indexOf("@yahoo.com")===-1){
alert("Nevalidna e-mail adresa");
}
else{
if (zenski === true ) {
redica.style.backgroundColor = "red";
if (godini < 18) {
redica.innerHTML = "<td>" + ime + "</td>" + "<td>" + prezime + "</td>" + "<td>" + email + "</td>" + "<td>" + lokacija + "</td>"
var kopce = document.createElement("button");
kopce.innerHTML="Вакциниран"
redica.appendChild(kopce);
tabela1.appendChild(redica);
} else if (godini >= 18) {
redica.innerHTML = "<td>" + ime + "</td>" + "<td>" + prezime + "</td>" + "<td>" + email + "</td>" + "<td>" + lokacija + "</td>"
var kopce = document.createElement("button");
kopce.innerHTML="Вакциниран"
redica.appendChild(kopce);
tabela2.appendChild(redica);
}
} else {
redica.style.backgroundColor = "blue";
if (godini < 18) {
redica.innerHTML = "<td>" + ime + "</td>" + "<td>" + prezime + "</td>" + "<td>" + email + "</td>" + "<td>" + lokacija + "</td>"
tabela1.appendChild(redica);
var kopce = document.createElement("button");
kopce.innerHTML="Вакциниран"
redica.appendChild(kopce);
tabela1.appendChild(redica);
} else if (godini >= 18) {
redica.innerHTML = "<td>" + ime + "</td>" + "<td>" + prezime + "</td>" + "<td>" + email + "</td>" + "<td>" + lokacija + "</td>"
var kopce = document.createElement("button");
kopce.innerHTML="Вакциниран"
redica.appendChild(kopce);
tabela2.appendChild(redica);
}
}
}
}
else{
alert("Nevaliden maticen broj");
}
}
}
</script>
<body>
<h1>Вакцина.мк</h1>
<h2>сајт искажување интерес за вакцина</h2>
<div id="label1">
<label for="ime">Име</label>
<input type="text" id="ime">
<label for="maticen">Матичен број</label>
<input type="text" id="maticen">
<label for="godini">Години</label>
<input type="text" id="godini">
<label for="lokacija">Локација</label>
<select id="lokacija">
<option>Skopje</option>
<option>Kumanovo</option>
<option>Bitola</option>
<option>Tetovo</option>
</select>
</div>
<div id="label2">
<label for="prezime">Презиме</label>
<input type="text" id="prezime">
<label for="zenski">Женски</label>
<input type="radio" id="zenski" name="pol">
<label for="maski">Mашки</label>
<input type="radio" id="maski" name="pol">
<label for="email">Email Адреса</label>
<input type="email" id="email">
</div>
<input type="button" value="Внеси" style="margin-left: 200px" onclick="Vnesi()">
<div id="bottom-left">
<h2>Пријавени малолетни граѓани</h2>
<table>
<th>Име</th>
<th>Презиме</th>
<th>Адреса</th>
<th>Локација</th>
<th>Статус</th>
<tbody id="tabela1">
</tbody>
</table>
</div>
<div id="bottom-right" style="padding-left: 554px;
margin-top: -91px;">
<h2>Пријавени полнолетни граѓани</h2>
<table>
<th>Име</th>
<th>Презиме</th>
<th>Адреса</th>
<th>Локација</th>
<th>Статус</th>
<tbody id="tabela2">
</tbody>
</table>
</div>
<div id="div-vakcinirani" style="padding-top: 210px;
margin-left: 369px;">
<label for="vakcinirani">Вакцинирани:</label>
<ul id="vakcinirani">
</ul>
</div>
</body>
</html>Editor is loading...