tothgergo/frontend_13
1
0
Fork 0
forked from kovacsrud/frontend_13
Code Pull Requests Activity

Compare commits

merge into: tothgergo:main
Branches Tags
tothgergo:main kovacsrud:main
...
pull from: kovacsrud:main
Branches Tags
kovacsrud:main tothgergo:main

13 Commits
main ... main

Author SHA1 Message Date
Kovács Rudolf
2ccad9bf13 React állapot 2026-09-17 11:21:39 +02:00
Kovács Rudolf
fda0dc216c React alap példa 2026-09-17 10:05:49 +02:00
Kovács Rudolf
ebfa4f46dc Promiseok használata 2026-09-17 09:30:49 +02:00
Kovács Rudolf
c3bd74c4d7 index 2026-09-17 08:48:46 +02:00
Kovács Rudolf
4cfc308162 index 2026-09-17 08:46:50 +02:00
Kovács Rudolf
f042cd8f17 Fetch használata 2026-09-14 11:56:04 +02:00
Kovács Rudolf
d54a708d42 Tailwind használata 2026-09-14 10:59:41 +02:00
Kovács Rudolf
a7523a179c Tanulói névsor 2026-09-10 11:21:23 +02:00
Kovács Rudolf
4aeb839161 Map és reduce használata 2026-09-10 10:45:33 +02:00
Kovács Rudolf
8bbe16dd85 rest és spread használata 2026-09-10 09:25:24 +02:00
Kovács Rudolf
09df904990 objektumok 2026-09-07 12:04:43 +02:00
Kovács Rudolf
4191fede99 Függvény ismétlés 2026-09-07 11:20:08 +02:00
Kovács Rudolf
91c4280a9f Nevsor 2026-09-07 10:45:43 +02:00
16 changed files with 618 additions and 0 deletions
Expand all files Collapse all files

81
ajax/ajax.js Normal file
View File

@@ -0,0 +1,81 @@
let keres=new XMLHttpRequest();
let valasz="";
let root=document.getElementById('root');
keres.open('GET','https://jsonplaceholder.typicode.com/posts',true);
keres.onload=function(){
valasz=JSON.parse(this.response);
console.log(valasz);
valasz.forEach(elem=>{
let cim=document.createElement('p');
let hozzaszolas=document.createElement('p');
cim.textContent=elem.title;
hozzaszolas.textContent=elem.body;
root.appendChild(cim);
root.appendChild(hozzaszolas);
});
}
//keres.send();
//??
console.log(valasz);
// fetch('https://jsonplaceholder.typicode.com/posts')
// .then(res=>res.json())
// .then(posts=>{
// if(Array.isArray(posts)){
// posts.forEach(post=>{
// let cim=document.createElement('p');
// let hozzaszolas=document.createElement('p');
// cim.textContent=post.title;
// hozzaszolas.textContent=post.body;
// root.appendChild(cim);
// root.appendChild(hozzaszolas);
// });
// } else {
// let p=document.createElement('p');
// p.textContent="Nincsenek adatok"
// }
// })
// .catch(err=>alert(err));
async function letoltes() {
try {
let keres=await fetch('https://jsonplaceholder.typicode.com/posts');
let valasz=await keres.json();
if(Array.isArray(valasz)){
valasz.forEach(post=>{
let cim=document.createElement('p');
let hozzaszolas=document.createElement('p');
cim.textContent=post.title;
hozzaszolas.textContent=post.body;
root.appendChild(cim);
root.appendChild(hozzaszolas);
})
} else {
let p=document.createElement('p');
p.textContent="Nincsenek adatok"
}
} catch (error) {
let p=document.createElement('p');
p.textContent=error
}
}
letoltes();

16
ajax/index.html Normal file
View File

@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>API használat</title>
<script defer src="ajax.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body>
<div id="root">
</div>
</body>
</html>

41
fuggvenyek/fuggvenyek.js Normal file
View File

@@ -0,0 +1,41 @@
function osszead(a,b){
return a+b;
}
console.log(osszead(13,67));
//overloading v. túlterhelés=>ugyanazt a függvénynevet használjuk eltérő paraméterlistával
function osszead(a,b,c){
return a+b+c;
}
console.log(osszead(10,10,10));
function szorzas(a,b,c=12){
return a*b*c;
}
console.log(szorzas(10,20));
console.log(szorzas(10,20,30));
function sokSzam(){
let osszeg=0;
for(let i=0;i<arguments.length;i++){
osszeg+=arguments[i];
}
return osszeg;
}
console.log(sokSzam(1,2,3,4,5,6));
console.log(sokSzam(1,2,3));
console.log(sokSzam(1,2,3,4,5,6,10,20,30,45));
const arosszeg=(a,b)=>a+b;
console.log(arosszeg(100,200));

38
fuggvenyek/map_reduce/mapreduce.js Normal file
View File

@@ -0,0 +1,38 @@
let szamok=[5,21,37,89,112,533,76];
let szamok2=szamok.map((x)=>(x*2));
console.log(szamok2);
let osszeg=szamok.reduce((osszeg,szam)=>(osszeg+szam));
console.log(osszeg);
//Írjon függvényt, amely kap három tömböt, összefűzi őket egy tömbbe és ezt a tömböt visszaadja.
let a=[1,8,3];
let b=[4,55,6];
let c=[8,96,101];
function egyesit(a,b,c){
let osszes=[...a,...b,...c];
//Nem kivonás, hanem a növekvő sorrendet jelenti az a-b kifejezés!!
return osszes.sort((a,b)=>(a-b));
}
let osszes=egyesit(a,b,c);
console.log(osszes);
//Írjon függvényt ami a paraméterül kapott számok átlagát adja vissza! A paraméterek száma tetszőleges.
function atlag(...szamok){
let szamtomb=[...szamok];
return szamtomb.reduce((osszeg,szam)=>(osszeg+szam))/szamtomb.length;
}
console.log(atlag(1,2,3,4,5,6));
console.log(atlag(111,12,39));

57
fuggvenyek/rest_spread/rest_spread.js Normal file
View File

@@ -0,0 +1,57 @@
let szamok1=[1,2,3,4,5,6];
let szamok2=[7,8,9,10];
let szamok3=[...szamok1,...szamok2];
console.log(szamok3);
//destruktúrálás tömbből
const[elso,masodik,...marad]=szamok1;
console.log(elso,masodik);
console.log(marad);
//átlépünk egy elemet
const[first,,third,...rest]=szamok1;
console.log(first,third);
console.log(rest);
//objektumokon
let dolgozo={
vezeteknev:"Kósa",
keresztnev:"Béla",
eletkor:23,
email:"kosa@bela.hu"
}
let lakcim={
telepules:"Gyula",
utca:"Béke",
hazszam:23
}
let dolgozoAdat={...dolgozo,...lakcim};
console.log(dolgozoAdat);
let update={
eletkor:25,
email:"kosa@bela.com"
}
dolgozoAdat={...dolgozoAdat,...update};
console.log(dolgozoAdat);
//destruktúrálás objektumból
const{vezeteknev,keresztnev,telepules}=dolgozoAdat;
console.log(vezeteknev,keresztnev,telepules);

48
objektumok/objektumok.js Normal file
View File

@@ -0,0 +1,48 @@
//Js objektumok
let szemely={
vezeteknev:"Nagy",
keresztnev:"Elek",
szuletesiEv:1996,
kor(){
return new Date().getFullYear()-this.szuletesiEv
},
lakcim:{
telepules:"Gyula",
utca:"Béke",
hazszam:34
}
}
console.log(szemely.vezeteknev);
console.log(szemely.kor());
console.log(szemely.lakcim.telepules);
class Szemely{
constructor(vezeteknev,keresztnev,szuletesiEv){
this.vezeteknev=vezeteknev,
this.keresztnev=keresztnev,
this.szuletesiEv=szuletesiEv
}
kor(){
return new Date().getFullYear()-this.szuletesiEv
}
}
let zoltan=new Szemely("Kiss","Zoltán",2001);
let imre=new Szemely("Horváth","Imre",1976);
console.log(zoltan.vezeteknev);
console.log(zoltan.kor());
console.log(imre.vezeteknev);
console.log(imre.kor());
//Destruktúrálás
const{vezeteknev,keresztnev,szuletesiEv}=szemely;
console.log(vezeteknev,keresztnev,szuletesiEv);
const{vezeteknev:vnev,keresztnev:knev}=zoltan;
console.log(vnev,knev);

56
promise/promise.js Normal file
View File

@@ -0,0 +1,56 @@
//Promise: egy aszinkron műveletet reprezentál
//Három állapota lehet:
//pending: fut
//fulfilled: lefutott, elvégezte a feladatát
//rejected: valamilyen hiba miatt vissza lett utasítva
let p1=new Promise((resolve,reject)=>{
resolve(150);
});
p1.then(ertek=>console.log(ertek)).catch(err=>console.log(err));
let p2=function(a,b){
return new Promise((resolve,reject)=>{
if(a>b){
resolve(a);
} else {
reject("Az a-nak nagyobbnak kell lennie mint ab!");
}
})
}
p2(100,50).then(ertek=>console.log(ertek)).catch(err=>console.log(err));
p2(50,100).then(ertek=>console.log(ertek)).catch(err=>console.log(err));
console.log("Valami");
p2(100,50).then(ertek=>p2(ertek,800)).then(ertek=>console.log(ertek)).catch(err=>console.log(err));
function novel(szam){
return szam+60;
}
//A promise összekombinálható normál függvénnyel
p2(50,5).then(ertek=>p2(ertek,10)).then(ertek=>novel(ertek)).then(ertek=>console.log(ertek)).catch(err=>console.log(err));
async function promiseok() {
try {
let adat1=await p1;
let adat2=await p2(adat1,10);
console.log('Async:'+adat2);
} catch (error) {
console.log(error);
}
}
promiseok();
//Ha a promisok egymástól függetlenek, akkor egyszerre is futtathatóak
const all=Promise.all([p1,p2(190,100)]);
all.then(ertekek=>console.log(ertekek)).catch(err=>console.log(err));

31
random_nevsor/htmlnevsor.js Normal file
View File

@@ -0,0 +1,31 @@
vezNevek=["Kiss","Kovács","Nagy","Kósa"]
keresztNevek=["Zoltán","Éva","Ella","Ubul"]
function veletlenSzam(min,max){
return Math.floor(Math.random()*(max-min))+min;
}
const root=document.getElementById('root');
const lista=document.createElement('ul');
let db=10;
let nevek=[];
for (let i = 0; i < db; i++) {
let veznev=vezNevek[veletlenSzam(0,vezNevek.length-1)] ;
let keresztnev=keresztNevek[veletlenSzam(0,keresztNevek.length-1)] ;
nevek.push(veznev+" "+keresztnev);
}
for(let i=0;i<db;i++){
const listaElem=document.createElement('li');
listaElem.textContent=nevek[i];
lista.appendChild(listaElem);
}
root.appendChild(lista);

15
random_nevsor/index.html Normal file
View File

@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Random névsor</title>
<script defer src="htmlnevsor.js"></script>
</head>
<body>
<div id="root">
</div>
</body>
</html>

21
random_nevsor/nevsor.js Normal file
View File

@@ -0,0 +1,21 @@
vezNevek=["Kiss","Kovács","Nagy","Kósa"]
keresztNevek=["Zoltán","Éva","Ella","Ubul"]
function veletlenSzam(min,max){
return Math.floor(Math.random()*(max-min))+min;
}
let db=100;
let nevek=[];
for (let i = 0; i < db; i++) {
let veznev=vezNevek[veletlenSzam(0,vezNevek.length-1)] ;
let keresztnev=keresztNevek[veletlenSzam(0,keresztNevek.length-1)] ;
nevek.push(veznev+" "+keresztnev);
}
console.log(nevek);

32
react_alap/app.js Normal file
View File

@@ -0,0 +1,32 @@
//Procedurális
const gomb=document.createElement('button');
gomb.textContent="JS gomb";
gomb.onclick=function(){
alert("Js gomb");
}
const jsgomb=document.getElementById('jsgomb');
jsgomb.appendChild(gomb);
//Deklaratív
const rgomb=React.createElement("button",{
onClick:function(){
alert("React gomb");
}
},"React gomb");
const kontener=React.createElement('div',
{
style:{
backgroundColor:"green",
width:"300px",
height:"200px"
}
},
rgomb,rgomb,rgomb,rgomb,rgomb,rgomb);
const root=ReactDOM.createRoot(document.getElementById('reactgomb'));
root.render(kontener);

18
react_alap/index.html Normal file
View File

@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React bevezető</title>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script defer src="app.js"></script>
</head>
<body>
<h2>Javascript gomb</h2>
<div id="jsgomb"></div>
<h2>React gomb</h2>
<div id="reactgomb"></div>
</body>
</html>

43
react_allapot/app.js Normal file
View File

@@ -0,0 +1,43 @@
function App(){
return(
React.createElement('div',{
style:{
backgroundColor:"black"
}
},
React.createElement(Box,{kezdo:5,felirat:"Box A",hatterszin:"green"}),
React.createElement(Box,{kezdo:1,felirat:"Box B",hatterszin:"yellow"}),
React.createElement(Box,{kezdo:67,felirat:"Box C",hatterszin:"red"}))
)
}
function Reset({setSzamlalo}){
return(
React.createElement('button',{
className:"btn btn-primary m-2",
onClick:(e)=>{setSzamlalo(0);e.stopPropagation()}
},"Reset")
)
}
function Box({felirat,kezdo,hatterszin}){
const[szamlalo,setSzamlalo]=React.useState(kezdo);
return(
React.createElement('div',{
style:{
width:"200px",
height:"200px",
backgroundColor:hatterszin
},
className:"p-2 m-5 rounded",
onClick:()=>setSzamlalo(prev=>prev+1)
},felirat," ",szamlalo,React.createElement(Reset,{setSzamlalo:setSzamlalo}))
)
}
const root=ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(App));

19
react_allapot/index.html Normal file
View File

@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React bevezető</title>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script defer src="app.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body>
<h2>Boxok</h2>
<div id="root"></div>
</body>
</html>

25
tanuloi_nevsor/index.html Normal file
View File

@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tanulói névsor</title>
<script defer src="nevsor.js"></script>
<<<<<<< HEAD
</head>
<body>
<h1>Tanulói névsor</h1>
<div id="root">
=======
<script defer src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body>
<h1 class="text-3xl font-bold text-center text-sky-600 bg-sky-200">Tanulói névsor</h1>
<div class="flex flex-row flex-wrap items-center justify-center" id="root">
>>>>>>> f042cd8f17ed8d3585187d1f98da52e1980de9be
</div>
</body>
</html>

77
tanuloi_nevsor/nevsor.js Normal file
View File

@@ -0,0 +1,77 @@
vezNevek=["Kiss","Kovács","Nagy","Kósa","Szigeti","Varga"]
keresztNevek=["Zoltán","Éva","Ella","Ubul","Elek","Géza","Anna"]
telepulesek=["Gyula","Békéscsaba","Csorvás","Orosháza","Szeged","Doboz"]
utcaNevek=["Fő","Dózsa","Rákóczi","Kossuth","Csabai","Csorvási"]
let darab=100;
let root=document.getElementById('root');
class Tanulo{
constructor(vezeteknev,keresztnev,telepules,utca,hazszam,eletkor){
this.vezeteknev=vezeteknev,
this.keresztnev=keresztnev,
this.telepules=telepules,
this.utca=utca,
this.hazszam=hazszam,
this.eletkor=eletkor
}
}
let tanulok=[];
function veletlenSzam(min,max){
return Math.floor(Math.random()*(max-min))+min;
}
for (let i = 0; i < darab; i++) {
let hazszam=veletlenSzam(1,99);
let eletkor=veletlenSzam(14,21);
let vezeteknev=vezNevek[veletlenSzam(0,vezNevek.length)];
let keresztnev=keresztNevek[veletlenSzam(0,keresztNevek.length)];
let telepules=telepulesek[veletlenSzam(0,telepulesek.length)];
let utca=utcaNevek[veletlenSzam(0,utcaNevek.length)];
let tanulo=new Tanulo(vezeteknev,keresztnev,telepules,utca,hazszam,eletkor);
tanulok.push(tanulo);
}
for (let i = 0; i < tanulok.length; i++) {
let tanuloKontener=document.createElement('div');
tanuloKontener.setAttribute('class','m-2 bg-sky-200 p-2 rounded-xl w-48 border-2 border-sky-800 shadow-xl' );
//let tanulo_veznev=document.createElement('p');
//tanulo_veznev.textContent=tanulok[i].vezeteknev;
//tanuloKontener.appendChild(tanulo_veznev);
let tanulo_kernev=document.createElement('p');
tanulo_kernev.textContent=tanulok[i].vezeteknev+" "+tanulok[i].keresztnev;
tanuloKontener.appendChild(tanulo_kernev);
let tanulo_telepules=document.createElement('p');
tanulo_telepules.textContent=tanulok[i].telepules;
tanuloKontener.appendChild(tanulo_telepules);
//let tanulo_utca=document.createElement('p');
//tanulo_utca.textContent=tanulok[i].utca;
//tanuloKontener.appendChild(tanulo_utca);
let tanulo_hazszam=document.createElement('p');
tanulo_hazszam.textContent=tanulok[i].utca+" "+tanulok[i].hazszam;
tanuloKontener.appendChild(tanulo_hazszam);
let tanulo_eletkor=document.createElement('p');
tanulo_eletkor.textContent=tanulok[i].eletkor;
tanuloKontener.appendChild(tanulo_eletkor);
root.appendChild(tanuloKontener);
}
console.log(tanulok.length);