forked from WEB-IMB-WS2526/lab-development-imb
Add lab 10 solutions
parent
082eb3009e
commit
6e90fc3725
|
|
@ -0,0 +1,20 @@
|
||||||
|
const headline = document.getElementById("headline");
|
||||||
|
const adventButton = document.getElementById("adventButton");
|
||||||
|
const imageContainer = document.getElementById("imageContainer")
|
||||||
|
|
||||||
|
adventButton.addEventListener("click", () =>{
|
||||||
|
|
||||||
|
//Überschrift ändern
|
||||||
|
headline.textContent = "Einen fröhlichen ersten Advent";
|
||||||
|
|
||||||
|
//Adventskranz erscheint
|
||||||
|
const img = document.createElement("img");
|
||||||
|
img.src ="Adventskranz.png";
|
||||||
|
img.alt = "Adventskranz";
|
||||||
|
|
||||||
|
imageContainer.appendChild(img);
|
||||||
|
|
||||||
|
//Button verschwindet
|
||||||
|
adventButton.style.display="none";
|
||||||
|
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<title>Advent</title>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1 id="headline">Alle Jahre wieder...</h1>
|
||||||
|
|
||||||
|
<button id="adventButton">Erste 🕯️ anzünden</button>
|
||||||
|
|
||||||
|
<div id="imageContainer"></div>
|
||||||
|
|
||||||
|
<script src="01.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 288 KiB |
|
|
@ -0,0 +1,44 @@
|
||||||
|
const helden = {
|
||||||
|
"Chase": "Chase ist auf Spur!",
|
||||||
|
"Marshall": "Ich bin startklar!",
|
||||||
|
"Skye": "Diese Pfote hebt ab!",
|
||||||
|
"Rocky": "Wegwerfen? Kommt nicht in die Tüte!",
|
||||||
|
"Rubble": "Rubble ist zur Stelle!",
|
||||||
|
"Zuma": "Los geht’s ins Wasser!",
|
||||||
|
"Everest": "Eis und Schnee – ich bin bereit!",
|
||||||
|
"Tracker": "Ich höre alles!",
|
||||||
|
};
|
||||||
|
|
||||||
|
//
|
||||||
|
|
||||||
|
const formular = document.getElementById("pawFormular");
|
||||||
|
|
||||||
|
const meldung = document.getElementById("meldung");
|
||||||
|
|
||||||
|
const spruch = document.getElementById("spruch");
|
||||||
|
|
||||||
|
const name = document.getElementById("name");
|
||||||
|
|
||||||
|
|
||||||
|
formular.addEventListener("submit", ev =>{
|
||||||
|
ev.preventDefault(); // verhindert neuladen
|
||||||
|
const eingabe = name.value.trim();
|
||||||
|
|
||||||
|
let gefunden = false;
|
||||||
|
|
||||||
|
for(let h in helden){
|
||||||
|
if(h.toLowerCase() === eingabe.toLowerCase()){
|
||||||
|
gefunden = true;
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if(!eingabe || !gefunden){
|
||||||
|
meldung.textContent = "Bitte gib einen echten Paw Patrol Helden an";
|
||||||
|
spruch.textContent = "";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
meldung.textContent = "Gute Wahl " + eingabe + " ist dabei!";
|
||||||
|
spruch.textContent = helden[eingabe];
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Paw Patrol - Helfer auf vier Pfoten</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<h1>Lieblings-Fellfreund</h1>
|
||||||
|
<form id="pawFormular">
|
||||||
|
<label for="name">Gib hier den Namen ein: </label>
|
||||||
|
<input type="text" id="name" name="fellfreund">
|
||||||
|
<button type="submit">Spruch ausgeben</button>
|
||||||
|
</form>
|
||||||
|
<p id="meldung"></p>
|
||||||
|
<h2 id="spruch"></h2>
|
||||||
|
|
||||||
|
<script src="paw.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
<!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="style.css">
|
||||||
|
<title>Buntes HTML</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Jetzt wird es bunt</h1>
|
||||||
|
<h2>Alles in Blau-Tönen</h2>
|
||||||
|
<span id="dark">Dieser Text ist darkblue.</span>
|
||||||
|
<br>
|
||||||
|
<span id="light">Dieser Text ist lightskyblue.</span>
|
||||||
|
<h2>Alles in Violett-Tönen</h2>
|
||||||
|
<p class="pastell">Dieser Absatz ist pink.</p>
|
||||||
|
<p class="neon">Dieser Absatz ist magenta.</p>
|
||||||
|
<h2>Alles in Grün-Tönen</h2>
|
||||||
|
<p class="frosch">
|
||||||
|
<span class="blatt">Hier ist alles greenyellow.</span>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<span class="blatt">Auch der Bereich zwischen dem Text.</span>
|
||||||
|
</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
body{
|
||||||
|
background-color: slateblue;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1{
|
||||||
|
color: lightcoral;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2{
|
||||||
|
color: whitesmoke;
|
||||||
|
}
|
||||||
|
|
||||||
|
#dark{
|
||||||
|
color: darkblue;
|
||||||
|
}
|
||||||
|
|
||||||
|
#light{
|
||||||
|
color: lightskyblue;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pastell{
|
||||||
|
color: pink;
|
||||||
|
}
|
||||||
|
|
||||||
|
.neon{
|
||||||
|
color: magenta;
|
||||||
|
}
|
||||||
|
|
||||||
|
.frosch{
|
||||||
|
color: greenyellow;
|
||||||
|
background-color: greenyellow;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Colors</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<input type="color" id="color" name="color">
|
||||||
|
<label for="color">Farbauswahl</label>
|
||||||
|
<script src="color.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
|
||||||
|
const colorInput = document.getElementById("color");
|
||||||
|
|
||||||
|
colorInput.addEventListener("input", ev =>{
|
||||||
|
const colorSelected = ev.target.value;
|
||||||
|
|
||||||
|
document.body.style.backgroundColor = colorSelected;
|
||||||
|
|
||||||
|
alert("Ihre Farbwahl: " + colorSelected);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue