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

added orai

Browse Source
This commit is contained in:
szabomarton 2024-10-15 13:15:08 +02:00
parent 71a97bc404
commit 9b693c4cf1
5 changed files with 171 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
24_10_15/24_10_15 - Frontend.pptx Normal file
View File

Binary file not shown.

36
24_10_15/feladat2.html Normal file
View File

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Feladat2</title>
</head>
<body>
<div id="todos"></div>
<script>
let url = "https://jsonplaceholder.typicode.com/todos";
fetch(url)
.then(response => response.json())
.then(data => {
let elsoot = data.slice(0, 5);
elsoot.forEach(element => {
let divelement = document.createElement("div");
let cim = document.createElement("h2");
cim.innerHTML = element.title;
let asd = document.createElement("p");
asd.innerHTML = `Az elem azonosítója: ${element.id} <br>
Az elem befejezésének állapota: ${element.completed ? "befejezve" : "nem befejezett"}`;
divelement.appendChild(cim);
divelement.appendChild(asd);
document.getElementById("todos").appendChild(divelement);
});
});
</script>
</body>
</html>

58
24_10_15/feladat3.html Normal file
View File

@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
Cím: <input type="text" id="title"> <br>
Id: <input type="number" id="id"> <br>
Befejezett: <input type="checkbox" id="completed" value="0"> <br>
</form>
<button id="bekuld">Beküld</button>
<div id="todos"></div>
<script>
let url = "https://jsonplaceholder.typicode.com/todos";
document.getElementById("bekuld").addEventListener("click", function (){
let cim = document.getElementById("title").value;
let identification = document.getElementById("id").value;
let completed = document.getElementById("completed").checked;
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
id: identification,
title: cim,
completed: completed
}),
})
.then(response => response.json())
.then(data => {
let divelement = document.createElement("div");
let cim = document.createElement("h2");
cim.innerHTML = data.title;
let asd = document.createElement("p");
asd.innerHTML = `Az elem azonosítója: ${data.id} <br>
Az elem befejezésének állapota: ${data.completed ? "befejezve" : "nem befejezett"}`;
divelement.appendChild(cim);
divelement.appendChild(asd);
document.getElementById("todos").appendChild(divelement);
});
});
</script>
</body>
</html>

54
24_10_15/fetch.js Normal file
View File

@ -0,0 +1,54 @@
let url = "https://jsonplaceholder.typicode.com/photos";
document.getElementById("lekeres").addEventListener("click", function () {
fetch(url)
.then(response => response.json())
.then(data => {
for (let index = 0; index < 3; index++) {
let cim = document.createElement("h2");
cim.innerHTML = data[index].title;
let element = document.createElement("img");
element.src = data[index].thumbnailUrl;
let divelement = document.getElementById(`img_${index}`);
divelement.appendChild(cim);
divelement.appendChild(element);
}
})
.catch(data => console.log(data));
});
// post
/*
let path = "response.json";
fetch(url, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
name: "Példa Péter",
email: "pelda_peter@gmail.com"
}),
}).then(response => response.json()).then(data => console.log(data));
//PUT
fetch(url, {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
name: "Példa Péter",
email: "pelda_peter@gmail.com"
}),
}).then(response => response.json()).then(data => console.log(data));
*/

23
24_10_15/index.html Normal file
View File

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Feladat 1</title>
<script src="fetch.js" defer></script>
</head>
<body>
<button id="lekeres">
Adat lekérése
</button>
<div id="img_0">
</div>
<div id="img_1">
</div>
<div id="img_2">
</div>
</body>
</html>