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