szabomarton/Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

finished neveletkorszin

Browse Source
This commit is contained in:
Digi 2024-10-09 19:24:36 +02:00
parent 699cbed815
commit ee28149c82
2 changed files with 41 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
24_10_08/neveletkorszin.html Normal file
View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="neveletkorszin.js" defer></script>
</head>
<body>
<form>
Név: <input type="text" id="nev"> <br>
Életkor: <input type="number" id="eletkor"> <br>
Szín: <input type="color" id="szin">
</form>
<button id="mentes">Mentés</button>
<div id="mentettadatok">
</div>
</body>
</html>

21
24_10_08/neveletkorszin.js Normal file
View File

@ -0,0 +1,21 @@
document.getElementById("mentes").addEventListener("click", function(){
let nev = document.getElementById("nev");
let eletkor = document.getElementById("eletkor");
let szin = document.getElementById("szin");
if (nev.value != "", eletkor.value != ""){
createDiv(nev, eletkor, szin);
console.log("OK");
} else{
alert("Rosszul megadott adat!");
}
nev.value = null;
eletkor.value = null;
});
let createDiv = (nevObjektum, eletkorObjektum, szinObjektum) =>{
let mentettadat = document.createElement("div");
mentettadat.innerHTML = `${nevObjektum.value}, ${eletkorObjektum.value}`;
mentettadat.style.background = szinObjektum.value;
document.getElementById("mentettadatok").appendChild(mentettadat);
}