i wanted to make a concert ticket / seat reservation, using html css and some javascript, somewhy i cannt make a seat reservation... i think my javascript code got some errors, because when i want to make the reservation the seats background turns from red to green, but it wont show me off the seats number...
INDEX
<!DOCTYPE html>
<html>
<head>
<!--
Console-ban (f12) ha bírod, hogy: localStorage.clear(); Akkor törli a foglalást.
-->
<meta charset="utf-8" />
<title>Kezdőoldal</title>
<link rel="stylesheet" href="styles/main.css" />
</head>
<body>
<a href="utasitas.html">Használati utasítás</a>
<a href="szerzorol.html">A szerzőről</a>
<a href="index.html" class="active">Kezdőoldal</a>
<div id="nagy">
<span class="ules" style="pointer-events: none;visibility: hidden;margin-right: 0;"></span>
</div>
<br /><br />
<form>
Ülés száma: <input type="text" id="ules" readonly="true" /><br />
Név és vezetéknév: <input type="text" id="nev" /><br>
E-mail: <input type="email" id="email" /><br>
<input type="button" value="Lefoglalás" id="lefoglal" />
</form>
<script type="text/javascript" src="scripts/main.js"></script>
</body>
</html>
OF THE AUTHOR
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>A szerzőről</title>
<link rel="stylesheet" href="styles/main.css" />
</head>
<body>
<a href="utasitas.html">Használati utasítás</a>
<a href="szerzorol.html" class="active">A szerzőről</a>
<a href="index.html">Kezdőoldal</a>
<p>Apró Dániel</p>
MESC 4ITM
</body>
</html>
HOW TO USE IT
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Használati utasítás</title>
<link rel="stylesheet" href="styles/main.css" />
</head>
<body>
<a href="utasitas.html" class="active">Használati utasítás</a>
<a href="szerzorol.html">A szerzőről</a>
<a href="index.html">Kezdőoldal</a>
<p>
Rákattintasz az ülésre, beviszed a kért adatokat és rákattintasz a lefoglalásra
</p>
</body>
</html>
JAVASCRIPT SNIPPET
var foglalasok = [],
nagy = document.getElementById('nagy'),
nev = document.getElementById('nev'),
email = document.getElementById('email'),
ules = document.getElementById('ules'),
szabad_ulesek,
foglalo_ules;
if (_get('foglalasok') != undefined) {
foglalasok = _get('foglalasok');
}
for (var i = 1; i < 52; i++) {
var u = document.createElement('span');
u.innerHTML = (i+1);
u.className = (foglalasok.includes(i+1+'')) ? 'foglalt ules' : 'szabad ules';
nagy.appendChild(u);
if ((i+1) % 4 == 0) nagy.appendChild(document.createElement('br'));
}
szabad_ulesek = document.getElementsByClassName('szabad')
for (var i = 0; i < szabad_ulesek.length; i++) {
szabad_ulesek[i].addEventListener('click',function(){
ules.value = this.innerHTML;
foglalo_ules = this;
});
}
document.getElementById('lefoglal').addEventListener('click',function() {
if (ules.value == '' || nev.value == '' || email.value == '') {
alert('Töltsön ki minden mezőt!');
return;
}
foglalasok.push(ules.value);
ules.value = nev.value = email.value = '';
_set('foglalasok', foglalasok);
foglalo_ules.className = 'ules foglalt';
location.reload();
});
function _set(name,value) { localStorage.setItem(name,JSON.stringify(value)); }
function _get(name) { return JSON.parse(localStorage.getItem(name)); }
STYLE
body {
font-family: Arial,sans;
}
form {line-height: 2em;}
.ules {
display: inline-block;
padding: 10px;
margin: 5px;
width: 30px;
text-align: center;
cursor: pointer;
}
.szabad {
background: lime
}
.foglalt {
background: red;
pointer-events: none;
}
#nagy {
display: inline-block;
outline: 2px solid gray;
padding: 5px;
}
a {
text-decoration: none;
display: inline-block;
float: right;
color: black;
padding: 8px;
border: 1px solid black;
margin: 0 2px;
}
.active {
text-decoration: underline;
}
Pressing in console F12 localStorage.clear(); to delete the reservation