add
This commit is contained in:
48
burgundia gyak 1/alap.js
Normal file
48
burgundia gyak 1/alap.js
Normal 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
39
burgundia gyak 1/domhasznalat.html
Normal 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>
|
||||
@@ -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
37
burgundia gyak 1/index.html
Normal 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
75
burgundia gyak 1/konzol.html
Normal 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
54
burgundia gyak 1/urlap.html
Normal 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>
|
||||
Reference in New Issue
Block a user