3009298
/
lab-development-imb
forked from WEB-IMB-WS2526/lab-development-imb
1
0
Fork 0
Code Pull Requests Activity

12: Loesungen

main
Teena Steger 2026-01-08 22:21:37 +01:00
parent 6a132e4a0f
commit 4640fb5699
7 changed files with 155 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/12/labor/loesungen/styles_uebung01.css 100644
View File

@ -0,0 +1,6 @@
div{
background-color: #71F5D1;
width: 250px;
padding: 20px 5px 25px;
margin: 100px auto;
}

62
web/12/labor/loesungen/styles_uebung02.css 100644
View File

@ -0,0 +1,62 @@
#box1{
background-color: red;
width: 113px;
height: 207px;
position: absolute;
top: 0px;
left: 0px;
}
#box2{
background-color: yellow;
width: 93px;
height: 38px;
position: absolute;
top: 0px;
left: 113px;
}
#box3{
background-color: magenta;
width: 93px;
height: 107px;
position: absolute;
top: 38px;
left: 113px;
}
#box4{
background-color: cyan;
width: 93px;
height: 107px;
position: absolute;
top: 145px;
left:113px;
}
#box5{
background-color: green;
width: 113px;
height: 45px;
position: absolute;
top: 207px;
left: 0px;
}
#box6{
background-color: purple;
width: 166px;
height: 45px;
position: absolute;
top: 252px;
left: 0px;
}
#box7{
background-color: gray;
width: 40px;
height: 45px;
position: absolute;
top: 252px;
left: 166px;
}

17
web/12/labor/loesungen/styles_uebung03.css 100644
View File

@ -0,0 +1,17 @@
.tuerchen {
font-size: 2em;
width: 120px;
height: 120px;
border: 4px solid green;
margin: 2px;
background-color: brown;
color: white;
float: left;
display: flex;
align-items: center;
justify-content: center;
}
.offen {
background-color: gold;
}

12
web/12/labor/loesungen/uebung01.html 100644
View File

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles_uebung01.css">
<title>Übung 01</title>
</head>
<body>
<div>Übung zum Box-Modell</div>
</body>
</html>

18
web/12/labor/loesungen/uebung02.html 100644
View File

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles_uebung02.css">
<title>Übung 01</title>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box5"></div>
<div id="box6"></div>
<div id="box7"></div>
</body>
</html>

17
web/12/labor/loesungen/uebung03.html 100644
View File

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles_uebung03.css">
<title>Adventskalender</title>
</head>
<body>
<h1>Adventskalender</h1>
<div id="kalender"></div>
<script src="uebung03.js"></script>
</body>
</html>

23
web/12/labor/loesungen/uebung03.js 100644
View File

@ -0,0 +1,23 @@
const kalender = document.getElementById("kalender");
const heuteTag = new Date().getDate();
const heuteMonat = new Date().getMonth();
const geschenk = "\u{1F381}";
const baum = "\u{1F384}";
for (let i = 1; i <= 24; i++) {
const tuer = document.createElement("div");
tuer.classList.add("tuerchen");
tuer.textContent = i;
tuer.addEventListener("click", () => {
if (i <= heuteTag && heuteMonat === 11) {
tuer.classList.add("offen");
tuer.textContent = geschenk;
} else {
alert("Noch schläft das Türchen – wie ein Geschenk unter dem " + baum)
}
});
kalender.appendChild(tuer);
}