ora 8 9
This commit is contained in:
63
ora7/roxfort.css
Normal file
63
ora7/roxfort.css
Normal file
@@ -0,0 +1,63 @@
|
||||
body {
|
||||
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
|
||||
text-shadow: 2px 2px 4px silver;
|
||||
}
|
||||
|
||||
form.fancy-form {
|
||||
background-color: #f8faff;
|
||||
border: medium solid indigo;
|
||||
max-width: 50ch;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
form.fancy-form div {
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
form.fancy-form label:has(+:is(input, select, textarea)[required])::after {
|
||||
color: red;
|
||||
content: "*";
|
||||
vertical-align: super;
|
||||
}
|
||||
|
||||
form.fancy-form input[type=checkbox]:not(:checked)+fieldset.conditional {
|
||||
display: none;
|
||||
}
|
||||
|
||||
form.fancy-form label {
|
||||
display: block;
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
|
||||
form.fancy-form > div:has(button[type=submit]){
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form.fancy-form button[type=submit]{
|
||||
background-color: slateblue;
|
||||
border: none;
|
||||
border-radius: 0.5em;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
padding: 0.5em 1.5em;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
form.fancy-form button[type=submit]:hover{
|
||||
background-color: forestgreen;
|
||||
}
|
||||
|
||||
form.fancy-form input[type=email]:invalid{
|
||||
background-color: tomato;
|
||||
color: white;
|
||||
}
|
||||
|
||||
form.fancy-form :focus{
|
||||
border-color: gold;
|
||||
border-width: thick;
|
||||
outline: none;
|
||||
}
|
||||
61
ora7/roxfort.html
Normal file
61
ora7/roxfort.html
Normal file
@@ -0,0 +1,61 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Roxfort</title>
|
||||
<link rel="stylesheet" href="roxfort.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Roxforti regisztracios urlap urlap</h1>
|
||||
<form id="hogwarts-form" class="fancy-form" method="post"
|
||||
action="https://webhook.site/a5246656-f984-4021-b7b7-f25ba55a8852">
|
||||
<div>
|
||||
<label for="name">Név</label>
|
||||
<input type="text" name="name" id="name" required placeholder="name">
|
||||
</div>
|
||||
<div>
|
||||
<label for="dateofbirth">Születési Dátum</label>
|
||||
<input type="date" name="dateofbirth" id="dateofbirth" required>
|
||||
</div>
|
||||
<div>
|
||||
<label for="house">Ház</label>
|
||||
<select name="house" id="house" required>
|
||||
<option data-color-primary="transparent">Válassz egy házat</option>
|
||||
<option data-color-primary="red" value="Griffindor">Griffindor</option>
|
||||
<option data-color-primary="yellow" value="Hufflepuff">Hufflepuff</option>
|
||||
<option data-color-primary="blue" value="Ravenclaw">Ravenclaw</option>
|
||||
<option data-color-primary="green" value="Slytherin">Slytherin</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label for="password">Jelszó</label>
|
||||
<input type="password" name="password" id="password" minlength="6" title="Legalább 6 karakter"
|
||||
pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*_=+-]).{8,12}$" required>
|
||||
</div>
|
||||
<div>
|
||||
<label for="haspet">Van állata</label>
|
||||
<input type="checkbox" name="haspet" id="haspet">
|
||||
<fieldset class="conditional">
|
||||
<legend>Kisállat</legend>
|
||||
<label>Faj <input type="text" name="petspecies" placeholder="fajta"></label>
|
||||
<label>Név <input type="text" name="petname" placeholder="nev"></label>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div>
|
||||
<label for="email">Email</label>
|
||||
<input type="email" name="email" id="email" pattern=".+@hogwarts\.ac\.uk">
|
||||
</div>
|
||||
<div>
|
||||
<label for="comments">Commentek</label>
|
||||
<textarea name="comments" id="comments" rows="5" maxlength="200" placeholder="kviddics"></textarea>
|
||||
</div>
|
||||
<div>
|
||||
<button type="submit">Küldés</button>
|
||||
</div>
|
||||
</form>
|
||||
<script src="roxfort.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
26
ora7/roxfort.js
Normal file
26
ora7/roxfort.js
Normal file
@@ -0,0 +1,26 @@
|
||||
function calculateYearsSince(dateString) {
|
||||
const date = new Date(dateString);
|
||||
const diff = Date.now() - date.getTime();
|
||||
return new Date(diff).getUTCFullYear() - 1970;
|
||||
}
|
||||
|
||||
console.log(calculate2("2001-09-01"));
|
||||
|
||||
const form = document.getElementById('hogwarts-form');
|
||||
form.dateofbirth.addEventListener("input", function(event){
|
||||
console.log(form.dateofbirth.value);
|
||||
const age = calculateYearsSince(form.dateofbirth.value);
|
||||
console.log(age);
|
||||
|
||||
if(age >= 11){
|
||||
form.dateofbirth.setCustomValidity('');
|
||||
}else{
|
||||
form.dateofbirth.setCustomValidity('young');
|
||||
}
|
||||
})
|
||||
|
||||
form.house.addEventListener('change', function (event){
|
||||
const houseColor = form.house.options[form.house.selectedIndex].dataset.colorPrimary;
|
||||
console.log(houseColor);
|
||||
document.body.style.backgroundColor = houseColor;
|
||||
})
|
||||
Reference in New Issue
Block a user