kovagoadi/fullstack1zh
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added files for 1. ZH

Browse Source
This commit is contained in:
kovagoadi
2026-04-15 22:07:56 +02:00
commit d80a95a395
3 changed files with 167 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
index.html Normal file
View File

@@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Jó lesz oldal</h1>
<button id="sotet">Sötét mód</button>
<input type="text" id="nev" name="nev" placeholder="neved">
<input type="email" id="email" name="email" placeholder="email">
<input type="submit" id="submit" name="kuldes">
<div id="employees">
</div>
<div id="output">
</div>
<div class="card" style="width: 18rem;">
<img src="https://picsum.photos/200" class="card-img-top" alt="kép">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<hr>
<table class="table table-primary table-striped">
<tr>
<td><p>asd</p></td>
</tr>
<tr>
<td><p>asd2</p></td>
</tr>
</table>
<script src="script.js"></script>
<img class="kep" src="https://images.trvl-media.com/localexpert/1790496/71d84da1-ebdb-49a6-a1e2-75936c03475f.jpg?impolicy=resizecrop&rw=1005&rh=565">
<img src="https://images.trvl-media.com/localexpert/1790496/71d84da1-ebdb-49a6-a1e2-75936c03475f.jpg?impolicy=resizecrop&rw=1005&rh=565">
<p id="szoveges">asdasdasdfgnjdgndjk</p>
</body>
</html>

82
script.js Normal file
View File

@@ -0,0 +1,82 @@
let json = {
"companies": [
{
"name": "TechCorp",
"location": "Budapest",
"employees": [
{
"id": 1,
"name": "Alice",
"email": "alice@email.com"
},
{
"id": 2,
"name": "Bob",
"email": "bob@email.com"
}
]
},
{
"name": "DesignHub",
"location": "Vienna",
"employees": [
{
"id": 1,
"name": "Alice",
"email": "alice@email.com"
},
{
"id": 3,
"name": "Emma",
"email": "emma@email.com"
}
]
}
]
}
LoadEmployees(json);
function LoadEmployees(data) {
let parent = document.getElementById("employees");
employees.innerHTML = '';
data.companies.forEach(company => {
let companydiv = document.createElement("div");
let description = document.createElement("h2");
description.innerHTML = company.name + "Employees:";
companydiv.appendChild(description);
company.employees.forEach(person => {
let employeediv = document.createElement("div");
let employeedesc = document.createElement("p");
employeedesc.innerHTML = person.name + ' (' + person.email + ')';
employeediv.appendChild(employeedesc);
companydiv.appendChild(employeediv);
});
parent.appendChild(companydiv);
});
}
function SaveEmployee() {
let name = document.getElementById('nev').value;
let email = document.getElementById('email').value;
json.companies[1].employees.push({id: 43, name: name, email: email});
LoadEmployees(json);
}
document.getElementById('submit').addEventListener("click", SaveEmployee);
console.log(json.companies.filter(x => x.employees.length > 1).length);
console.log(json.companies.filter(x => x.name.startsWith('T')).map(x => x.name));
console.log(json.companies.reduce((sum, company) => sum + company.employees.length, 0) / json.companies.length);
function Sotetites() {
let hatter = document.querySelector("body");
hatter.classList.toggle("sotet");
}
document.getElementById('sotet').addEventListener("click", Sotetites);

22
style.css Normal file
View File

@@ -0,0 +1,22 @@
.kep {
border-radius: 30px;
}
.kep:hover {
border-radius: 100px;
}
img {
border: 100px;
}
#szoveges {
border: 20px solid orange;
padding: 10px 20px 30px 40px;
/* TOP RIGHT BOTTOM LEFT */
margin: 40px 30px 20px 10px;
}
.sotet {
background-color: #777;
}