96 lines
2.5 KiB
HTML
96 lines
2.5 KiB
HTML
<!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> |