118 lines
3.6 KiB
HTML
118 lines
3.6 KiB
HTML
<!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> |