htamas1210/burgindia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add

Browse Source
This commit is contained in:
thewarrior1220
2022-09-20 17:46:31 +02:00
parent 508b31230b
commit ad6623fdf5
6 changed files with 304 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
burgundia gyak 1/alap.js Normal file
View File

@@ -0,0 +1,48 @@
fetch("https://raw.githubusercontent.com/Laboratoria/LIM011-data-lovers/master/src/data/potter/potter.json").then(x => x.json()).then(y => megjelenit(y));
function megjelenit(tomb){
console.log(tomb);
let szoveg = "";
for (let elem of tomb) {
szoveg += "<option value=\"\">"+elem.name+"</option>";
}
document.getElementById("lenyilo").innerHTML = szoveg;
//////////////////////////////////////////////////////////////////
let szoveg2 = "";
for(let elem of tomb){
szoveg2 += "<tr>";
szoveg2 += "<td>";
szoveg2 += elem.name;
szoveg2 += "</td>";
szoveg2 += "<td>";
szoveg2 += elem.gender;
szoveg2 += "</td>";
szoveg2 += "<td>";
szoveg2 += elem.house;
szoveg2 += "</td>";
szoveg2 += "<td>";
szoveg2 += elem.actor;
szoveg2 += "</td>";
szoveg2 += "</tr>";
}
document.getElementById("torzs").innerHTML = szoveg2;
///////////////////////////////////////////////////////////////////
let szoveg3 = "";
for (let elem of tomb) {
szoveg3 += '<div class="col-md-4 col-sm-6">';
szoveg3+= '<img class="img-fluid w-75" src="' +elem.image+ '">'
szoveg3 += '<br>';
szoveg3+= '<div style="font-style: italic; text-align:center; padding: 10px;">';
szoveg3 += elem.name
szoveg3 += '</div>';
szoveg3 += '</div>';
}
document.getElementById("kepek").innerHTML = szoveg3;
}

39
burgundia gyak 1/domhasznalat.html Normal file
View File

@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
<title>Document</title>
</head>
<body>
<select id="opciok"></select>
<div id="opciok2"></div>
<script>
let tomb = ["tejtermék", "pékáru", "édesség", "fűszer", "tisztítószer"];
let opciok = document.getElementById("opciok");
let count = 0;
for (let item of tomb) {
let option = document.createElement("option");
option.innerText = item;
option.value = count++;
opciok.appendChild(option);
}
count = 0;
for (let elem of tomb) {
let radioB = document.createElement("input");
radioB.setAttribute("type", "radio");
radioB.value = count++;
let szoveg = document.createElement("label");
szoveg.innerText = elem;
let br = document.createElement("br");
document.getElementById("opciok2").appendChild(radioB);
document.getElementById("opciok2").appendChild(szoveg);
document.getElementById("opciok2").appendChild(br);
}
</script>
</body>
</html>

51
burgundia gyak 1/feladatok_javascript_eveleji_ismetles_json_2022.txt Normal file
View File

@@ -0,0 +1,51 @@
Konzolra írass ki!
-konzol.html fájlba dolgozz!
1. Hozz létre json tömböt termékek nevével, árával, min.5db!
Írasd ki konzolra a tömböt!
Készíts függvényt, amely a paramétereként megadott számnál
drágább termékeket megszámolja! Írasd ki konzolra!
Készíts függvényt, paraméter nélkül, amely
a termékek nevét összefűziegy szöveggé, aláhúzásjellel elválasztva. Írasd ki konzolra!
Készíts NYÍL függvényt, amely a paramétereként megadott terméknévre visszaadja, logikai értékként,
hogy benne van vagy nincs! Írasd ki!
Készíts NYÍL függvényt, paraméter nélkülit, amely visszaadja
a termékek átlagárát! Írasd ki!
-------------------------------------
Űrlapok-Weblapon(design nélkül)
-urlap.html fájlba dolgozz!
2. Kérd be termék nevét, árát, készeleten lévő darabszámát,
lenyílóban jelenjen meg, hogy tejtermék/pékáru/édesség
Gombnyomásra írja vissza a gomb alá a termék nevét, árát, darabszámát, típusát,
majd alá az összértéket (ár*darab)
A termék neve beviteli mezőjének háttere legyen sárga, ha belelépünk,
és fehér, ha kilépünk.
-------------------------------------
JS-HTML-DOM használata(design nélkül)
-domhasznalat.html
3. Készíts tömböt, amely a tejtermék, pékáru, édesség, fűszer, tisztítószer
szavakat tartalmazza, majd lenyíló listában megjeleníti
Javascript programmal (createelement...appendchild)
Készíts alatta az 5 szóval radio gombokat, csak 1-et lehessen kiválasztani.
(createelement...appendchild)
-------------------------------------
Fetch, dizájnolás Bootstrap-el
-potter mappába dolgozz! Open folder , index.html, alap.js
https://github.com/Laboratoria/LIM011-data-lovers/blob/master/src/data/potter/potter.json
4. Érd el fetch-el az adatokat, írasd ki konzolra!
Írasd ki a szereplők nevét Weblapra,
lenyíló listába(bootstrapes, netes hivatkozas)!
Alatta írasd ki a szereplőket táblázatba(bootstrap)(neve, neme, háza, színészt)
Alatta rakd ki az összes képet, egyéni elrendezésben!

37
burgundia gyak 1/index.html Normal file
View File

@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
<title>Document</title>
<script src="alap.js"></script>
</head>
<body class="m-5">
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4">
<select id="lenyilo"></select></div>
<table class="table table-dark">
<thead>
<tr>
<th>Nev</th>
<th>Neme</th>
<th>haza</th>
<th>Szinesz</th>
</tr>
</thead>
<tbody id="torzs">
</tbody>
</table>
<div class="col-sm-4"></div>
</div>
<div class="row" id="kepek">
</div>
</body>
</html>

75
burgundia gyak 1/konzol.html Normal file
View File

@@ -0,0 +1,75 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
<title>Document</title>
</head>
<body>
<script>
function dragabb(number){
let count = 0;
for(let elem of tomb){
if(elem.termekar > number){
count++;
}
}
return count;
}
function fuzo(){
let szoveg = "";
for (let elem of tomb) {
szoveg += elem.termeknev + "_";
}
/*tomb.forEach(elem => {
szoveg += elem.termeknev + "_";
});*/
szoveg = szoveg.substring(0, szoveg.length - 1);
return szoveg;
}
let van_benne = (neve) => {
for (let elem of tomb) {
if(elem.termeknev == neve){
return true;
}
}
return false;
}
let atlagar = () => {
let price = 0;
for (let elem of tomb) {
price += elem.termekar;
}
price = price / tomb.length;
return price;
}
console.log("Hello world!");
let tomb = [ //json adatszerkezet
{"termeknev":"kenyér", "termekar": 800},
{"termeknev":"kifli", "termekar": 500},
{"termeknev":"perec", "termekar": 200},
{"termeknev":"zsemle", "termekar": 100},
{"termeknev":"keksz", "termekar": 60}
];
console.log(tomb);
console.log(tomb[4].termekar);
console.log(dragabb(50));
console.log(fuzo());
if(van_benne("kenyér")){
console.log("van benne");
}else{
console.log("nincs benne");
}
console.log("atlag: " + atlagar());
</script>
</body>
</html>

54
burgundia gyak 1/urlap.html Normal file
View File

@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
<title>Document</title>
<style>
/* #nev{
background-color: yellow;
}
#nev:focus {
background-color: white;
}*/
</style>
</head>
<body style="margin: 1%;">
<label>Neve</label>
<input id="nev" type="text" style="background-color: yellow;" onblur="sarga()" onfocus="feher()"><br><br>
<label>ár</label>
<input id="ar" type="text"><br><br>
<label>darabszám</label>
<input id="darabszam" type="text"><br><br>
<select id="opciok">
<option>Tejtermék</option>
<option>Pékáru</option>
<option>Édesség</option>
</select><br><br>
<button type="submit" onclick="kiir()">Gomb</button><br><br>
<div id="kiirhelye"></div>
<script>
function kiir(){
let adatok = "";
let teljes_ar = document.getElementById("ar").value * document.getElementById("darabszam").value;
adatok += document.getElementById("nev").value;
adatok += " " + document.getElementById("ar").value;
adatok += " " + document.getElementById("darabszam").value;
adatok += " " + document.getElementById("opciok").value;
adatok += " Teljes ár: " + teljes_ar;
console.log(adatok);
document.getElementById("kiirhelye").innerHTML = adatok;
}
function feher(){
document.getElementById("nev").style.backgroundColor = "white";
}
function sarga(){
document.getElementById("nev").style.backgroundColor = "yellow";
}
</script>
</body>
</html>