Lekcja 2
This commit is contained in:
aplikacje committed
1 parent
28836af2ee
commit
a9964d8d41
3 files changed
+9904
No files matched your search
Vendored
+9680
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,106 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pl">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Lekcja 2 zad 1</title>
|
||||
<script src="lib/jquery.js"></script>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$("#generuj").on("click", function () {
|
||||
$("#k1").empty()
|
||||
|
||||
for (let i = 0; i < $("#ilosc").val(); i++) {
|
||||
const pudelko = $("<div>")
|
||||
.addClass("pudelko")
|
||||
.html(`<p class="numerek">${i + 1}</p>`)
|
||||
.on("click", function () {
|
||||
let usunac = confirm("Czy usunąć to okienko?")
|
||||
if (usunac) { $(this).remove() }
|
||||
})
|
||||
$("#k1").append(pudelko)
|
||||
}
|
||||
})
|
||||
$("#usun").on("click", function () {
|
||||
$("#k1").empty()
|
||||
})
|
||||
})
|
||||
</script>
|
||||
<style>
|
||||
* {
|
||||
font-family: Helvetica, sans-serif;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.kontrolki {
|
||||
border: 2px solid gray;
|
||||
padding: 1em;
|
||||
width: fit-content;
|
||||
margin: 1em auto;
|
||||
border-radius: 3px;
|
||||
background-color: azure;
|
||||
box-shadow: 3px 3px 0px black;
|
||||
}
|
||||
|
||||
.kontener {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
width: 36em;
|
||||
margin: 1em auto;
|
||||
min-height: 8em;
|
||||
padding: calc(.5em - 2px);
|
||||
border: 2px solid gray;
|
||||
background-color: azure;
|
||||
border-radius: 3px;
|
||||
box-shadow: 3px 3px 0px black;
|
||||
}
|
||||
|
||||
.pudelko {
|
||||
margin: .5em;
|
||||
width: 6em;
|
||||
height: 6em;
|
||||
background-color: cornflowerblue;
|
||||
border-radius: 3px;
|
||||
border: 2px solid black;
|
||||
transition: all 200ms ease;
|
||||
color: white;
|
||||
box-shadow: 3px 3px 0px gray;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pudelko:hover {
|
||||
cursor: pointer;
|
||||
border-color: red;
|
||||
background-color: brown;
|
||||
color: lightgray;
|
||||
}
|
||||
|
||||
.numerek {
|
||||
font-size: 2em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>01 - Pętla for, dynamiczne tworzenie i usuwanie html-a</h1>
|
||||
<div class="kontrolki">
|
||||
<button id="generuj">Generuj elementy</button>
|
||||
<button id="usun">Usuń wszystkie</button>
|
||||
<select name="ilosc" id="ilosc">
|
||||
<script>
|
||||
for (let i = 1; i <= 10; i++) {
|
||||
const opcja = $("<option>").html(i)
|
||||
$("#ilosc").append(opcja)
|
||||
}
|
||||
</script>
|
||||
</select>
|
||||
</div>
|
||||
<div class="kontener" id="k1"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,118 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pl">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Lekcja 2 zad 3</title>
|
||||
<script src="lib/jquery.js"></script>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$("#generuj").on("click", function () {
|
||||
$("#k1").empty()
|
||||
|
||||
for (let i = 0; i < $("#ilosc").val(); i++) {
|
||||
const pudelko = $("<div>")
|
||||
.addClass("pudelko")
|
||||
.html(`<p class="numerek">${Math.floor(Math.random() * 10) + 1}</p>`)
|
||||
.css("background-color", `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`)
|
||||
.on("click", function () {
|
||||
$("#k2").empty()
|
||||
|
||||
let ile = parseInt($(this).children(0).html())
|
||||
for (let j = 0; j < ile; j++) {
|
||||
|
||||
const pudelko2 = $("<div>")
|
||||
.addClass("pudelko")
|
||||
.html(`<p class="numerek">${j + 1}</p>`)
|
||||
.css("background-color", $(this).css("background-color"))
|
||||
$("#k2").append(pudelko2)
|
||||
}
|
||||
})
|
||||
$("#k1").append(pudelko)
|
||||
}
|
||||
})
|
||||
$("#usun").on("click", function () {
|
||||
$("#k1").empty()
|
||||
$("#k2").empty()
|
||||
})
|
||||
})
|
||||
</script>
|
||||
<style>
|
||||
* {
|
||||
font-family: Helvetica, sans-serif;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.kontrolki {
|
||||
border: 2px solid gray;
|
||||
padding: 1em;
|
||||
width: fit-content;
|
||||
margin: 1em auto;
|
||||
border-radius: 3px;
|
||||
background-color: azure;
|
||||
box-shadow: 3px 3px 0px black;
|
||||
}
|
||||
|
||||
.kontener {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
width: 36em;
|
||||
margin: 1em auto;
|
||||
min-height: 8em;
|
||||
padding: calc(.5em - 2px);
|
||||
border: 2px solid gray;
|
||||
background-color: azure;
|
||||
border-radius: 3px;
|
||||
box-shadow: 3px 3px 0px black;
|
||||
}
|
||||
|
||||
.pudelko {
|
||||
margin: .5em;
|
||||
width: 6em;
|
||||
height: 6em;
|
||||
border-radius: 3px;
|
||||
border: 2px solid black;
|
||||
transition: all 200ms ease;
|
||||
color: white;
|
||||
box-shadow: 3px 3px 0px gray;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pudelko:hover {
|
||||
cursor: pointer;
|
||||
border-color: white;
|
||||
color: lightgray;
|
||||
}
|
||||
|
||||
.numerek {
|
||||
font-size: 2em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>03 - Generator kafelków - losowość cz2</h1>
|
||||
<div class="kontrolki">
|
||||
<button id="generuj">Generuj elementy</button>
|
||||
<button id="usun">Usuń wszystkie</button>
|
||||
<select name="ilosc" id="ilosc">
|
||||
<script>
|
||||
for (let i = 1; i <= 10; i++) {
|
||||
const opcja = $("<option>").html(i)
|
||||
$("#ilosc").append(opcja)
|
||||
}
|
||||
</script>
|
||||
</select>
|
||||
</div>
|
||||
<h3>Główna galeria</h3>
|
||||
<div class="kontener" id="k1"></div>
|
||||
<h3>Wynik z kliknięcia</h3>
|
||||
<div class="kontener" id="k2"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in new issue
Block a user