Lekcja 4
This commit is contained in:
aplikacje committed
1 parent
cbe12f41d3
commit
11eb98f6b7
4 files changed
+10073
No files matched your search
Vendored
+9680
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,124 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="pl">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Ćwiczenie 1</title>
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: white;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: rgb(40, 40, 45);
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
border: none;
|
||||||
|
font-size: 2em;
|
||||||
|
background-color: cornflowerblue;
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
background-color: purple;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
div {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: fit-content;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
margin: 0 auto;
|
||||||
|
font-size: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
padding: 1em;
|
||||||
|
border: 1px solid white;
|
||||||
|
background-color: gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
padding: 1em;
|
||||||
|
border: 1px solid white;
|
||||||
|
background-color: darkslategray;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script src="lib/jquery.js"></script>
|
||||||
|
<script>
|
||||||
|
$(document).ready(function () {
|
||||||
|
const data = {
|
||||||
|
header: {
|
||||||
|
lps: ["lp", "cena", "produkt"],
|
||||||
|
},
|
||||||
|
products: {
|
||||||
|
prices: ["5,60", "3,23", "7,45", "10,00", "3,20", "9,22"],
|
||||||
|
names: ["chleb", "mąka", "masło", "kefir", "dżem", "inne"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$("#generuj").on("click", function () {
|
||||||
|
const tabela = $("<table>")
|
||||||
|
|
||||||
|
let sum = 0
|
||||||
|
|
||||||
|
for (let i = 0; i < data.products.prices.length + 1; i++) {
|
||||||
|
const row = $("<tr>")
|
||||||
|
|
||||||
|
for (let j = 0; j < data.header.lps.length; j++) {
|
||||||
|
if (i == 0) {
|
||||||
|
const hdr = $("<th>").text(data.header.lps[j])
|
||||||
|
row.append(hdr)
|
||||||
|
} else {
|
||||||
|
const td = $("<td>")
|
||||||
|
switch (j) {
|
||||||
|
case 0:
|
||||||
|
td.text(i)
|
||||||
|
break
|
||||||
|
case 1:
|
||||||
|
td.text(data.products.prices[i - 1])
|
||||||
|
sum += parseFloat(data.products.prices[i - 1].replace(',', '.'))
|
||||||
|
break
|
||||||
|
case 2:
|
||||||
|
td.text(data.products.names[i - 1])
|
||||||
|
break
|
||||||
|
}
|
||||||
|
row.append(td)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
tabela.append(row)
|
||||||
|
}
|
||||||
|
|
||||||
|
const row_suma = $("<tr>")
|
||||||
|
const suma = $("<td>").attr("colspan", 2).text("suma")
|
||||||
|
const suma_val = $("<td>").text(`${sum.toFixed(2)}`.replace('.', ','))
|
||||||
|
|
||||||
|
row_suma.append(suma)
|
||||||
|
row_suma.append(suma_val)
|
||||||
|
tabela.append(row_suma)
|
||||||
|
|
||||||
|
$("#d1").append(tabela)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<h1>Tabela html - tablice</h1>
|
||||||
|
<div><button id="generuj">Generuj tabelę</button></div>
|
||||||
|
<div id="d1"></div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,173 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="pl">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Ćwiczenie 2</title>
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: white;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: rgb(40, 40, 45);
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
select {
|
||||||
|
border: none;
|
||||||
|
font-size: 1.5em;
|
||||||
|
background-color: gray;
|
||||||
|
padding: .5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
border: none;
|
||||||
|
font-size: 2em;
|
||||||
|
background-color: cornflowerblue;
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover {
|
||||||
|
background-color: purple;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
div {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: fit-content;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
margin: 0 auto;
|
||||||
|
font-size: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
padding: 1em;
|
||||||
|
border: 1px solid white;
|
||||||
|
background-color: gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
padding: 1em;
|
||||||
|
border: 1px solid white;
|
||||||
|
background-color: darkslategray;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script src="lib/jquery.js"></script>
|
||||||
|
<script>
|
||||||
|
const produkty = [
|
||||||
|
{ id: 101, nazwa: 'Laptop Pro', cena: 4500 },
|
||||||
|
{ id: 102, nazwa: 'Mysz bezprzewodowa', cena: 150 },
|
||||||
|
{ id: 103, nazwa: 'Klawiatura mechaniczna', cena: 350 },
|
||||||
|
{ id: 104, nazwa: 'Monitor 4K', cena: 1800 },
|
||||||
|
{ id: 105, nazwa: 'Monitor 5K', cena: 1000 }
|
||||||
|
];
|
||||||
|
|
||||||
|
let koszyk = [] // { id: ?, ilosc: ? }
|
||||||
|
|
||||||
|
$(document).ready(function () {
|
||||||
|
$("#dodaj").on("click", function () {
|
||||||
|
let this_id = $("#wybor-produktu").val()
|
||||||
|
|
||||||
|
const obiekt = koszyk.find(produkt => produkt.id == this_id)
|
||||||
|
obiekt ? obiekt.ilosc += 1 : koszyk.push({ id: this_id, ilosc: 1 })
|
||||||
|
|
||||||
|
// aktualizuj tabelę
|
||||||
|
$("#tabela-container").empty()
|
||||||
|
const nowa_tabela = $("<table>")
|
||||||
|
|
||||||
|
const header = $("<tr>")
|
||||||
|
|
||||||
|
let headery = ["lp", "produkt", "cena", "ilość", "razem"];
|
||||||
|
headery.forEach(e => {
|
||||||
|
const header_pole = $("<th>").text(e)
|
||||||
|
header.append(header_pole)
|
||||||
|
})
|
||||||
|
|
||||||
|
nowa_tabela.append(header)
|
||||||
|
|
||||||
|
let sum = 0;
|
||||||
|
let lp = 0;
|
||||||
|
koszyk.forEach(e => {
|
||||||
|
const wiersz = $("<tr>")
|
||||||
|
const infoprodukt = produkty[produkty.findIndex(produkt => produkt.id == e.id)]
|
||||||
|
|
||||||
|
lp++
|
||||||
|
const tlp = $("<td>").text(lp)
|
||||||
|
const tprodukt = $("<td>").text(infoprodukt.nazwa)
|
||||||
|
const tcena = $("<td>").text(infoprodukt.cena)
|
||||||
|
const tilosc = $("<td>").text(e.ilosc)
|
||||||
|
|
||||||
|
let razem = parseFloat(`${infoprodukt.cena}`.replace(",", ".")) * e.ilosc
|
||||||
|
const trazem = $("<td>").text(razem.toFixed(2).replace(".", ",") + " zł")
|
||||||
|
sum += razem
|
||||||
|
|
||||||
|
wiersz.append(tlp, tprodukt, tcena, tilosc, trazem)
|
||||||
|
|
||||||
|
nowa_tabela.append(wiersz)
|
||||||
|
})
|
||||||
|
|
||||||
|
const suma_row = $("<tr>")
|
||||||
|
const suma_tytul = $("<td>").attr("colspan", "4").text("suma")
|
||||||
|
const suma_wartosc = $("<td>").text(parseFloat(sum).toFixed(2).replace(".", ",") + " zł")
|
||||||
|
suma_row.append(suma_tytul, suma_wartosc)
|
||||||
|
nowa_tabela.append(suma_row)
|
||||||
|
|
||||||
|
$("#tabela-container").append(nowa_tabela)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<main id="main">
|
||||||
|
<h1>Tabela html - koszyk</h1>
|
||||||
|
<p>Produkt:</p>
|
||||||
|
<div id="d1">
|
||||||
|
<script>
|
||||||
|
const select = $("<select>").attr("id", "wybor-produktu")
|
||||||
|
|
||||||
|
produkty.forEach(produkt => {
|
||||||
|
const option = $("<option>").attr("value", `${produkt.id}`)
|
||||||
|
.text(`${produkt.nazwa} (${produkt.cena.toFixed(2).replace('.', ',')} zł)`)
|
||||||
|
select.append(option)
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#d1").append(select)
|
||||||
|
</script>
|
||||||
|
<button id="dodaj">dodaj</button>
|
||||||
|
</div>
|
||||||
|
<div id="tabela-container">
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<th>lp</th>
|
||||||
|
<th>produkt</th>
|
||||||
|
<th>cena</th>
|
||||||
|
<th>ilość</th>
|
||||||
|
<th>razem</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td colspan="4">suma</td>
|
||||||
|
<td>00,00 zł</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,96 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="pl">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Ćwiczenie 3</title>
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: monospace;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: rgb(30, 30, 35);
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
background-color: rgb(40, 40, 45);
|
||||||
|
width: fit-content;
|
||||||
|
margin: 1em auto;
|
||||||
|
text-align: center;
|
||||||
|
padding: 1em;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
border: 1px solid white;
|
||||||
|
border-radius: 5px;
|
||||||
|
display: flex;
|
||||||
|
margin: 1em;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plansza {
|
||||||
|
width: 50%;
|
||||||
|
aspect-ratio: 1/1;
|
||||||
|
margin: 1em;
|
||||||
|
border: 1px solid white;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pole {
|
||||||
|
width: 15%;
|
||||||
|
height: 15%;
|
||||||
|
margin: 2.5%;
|
||||||
|
background-color: gray;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pole:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: darkgray;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script src="lib/jquery.js"></script>
|
||||||
|
<script>
|
||||||
|
$(document).ready(function () {
|
||||||
|
const w = 5
|
||||||
|
const h = 5
|
||||||
|
|
||||||
|
for (let i = 0; i < h; i++) {
|
||||||
|
for (let j = 0; j < w; j++) {
|
||||||
|
const pole = $("<div>").addClass("pole").attr("id", `p${i}${j}`).text(`(${j}, ${i})`)
|
||||||
|
.on("click", function () {
|
||||||
|
$(this).css("background-color", "red")
|
||||||
|
$(`#q${j}${i}`).css("background-color", "cornflowerblue")
|
||||||
|
})
|
||||||
|
$("#d1").append(pole)
|
||||||
|
|
||||||
|
const pole2 = $("<div>").addClass("pole").attr("id", `q${w - j - 1}${i}`).text(`(${j}, ${i})`)
|
||||||
|
$("#d2").append(pole2)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<h1>Lustro - Tablice</h1>
|
||||||
|
<p>Kliknij na dowolne pole na lewej planszy. Na prawej planszy pojawia się zaznaczenie na lustrzanym polu.</p>
|
||||||
|
<div class="container">
|
||||||
|
<div class="plansza" id="d1"></div>
|
||||||
|
<div class="plansza" id="d2"></div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
Reference in new issue
Block a user