diff --git a/web/10/labor/10_loesungen/Aufgabe_1/01.js b/web/10/labor/10_loesungen/Aufgabe_1/01.js new file mode 100644 index 0000000..d80503a --- /dev/null +++ b/web/10/labor/10_loesungen/Aufgabe_1/01.js @@ -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"; + +}) \ No newline at end of file diff --git a/web/10/labor/10_loesungen/Aufgabe_1/Advent.html b/web/10/labor/10_loesungen/Aufgabe_1/Advent.html new file mode 100644 index 0000000..9e5a959 --- /dev/null +++ b/web/10/labor/10_loesungen/Aufgabe_1/Advent.html @@ -0,0 +1,16 @@ + + + + Advent + + + +

Alle Jahre wieder...

+ + + +
+ + + + \ No newline at end of file diff --git a/web/10/labor/10_loesungen/Aufgabe_1/Adventskranz.png b/web/10/labor/10_loesungen/Aufgabe_1/Adventskranz.png new file mode 100644 index 0000000..f9655a2 Binary files /dev/null and b/web/10/labor/10_loesungen/Aufgabe_1/Adventskranz.png differ diff --git a/web/10/labor/10_loesungen/Aufgabe_2/paw.js b/web/10/labor/10_loesungen/Aufgabe_2/paw.js new file mode 100644 index 0000000..77fd247 --- /dev/null +++ b/web/10/labor/10_loesungen/Aufgabe_2/paw.js @@ -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]; +}); \ No newline at end of file diff --git a/web/10/labor/10_loesungen/Aufgabe_2/pawpatrol.html b/web/10/labor/10_loesungen/Aufgabe_2/pawpatrol.html new file mode 100644 index 0000000..8e6c6d6 --- /dev/null +++ b/web/10/labor/10_loesungen/Aufgabe_2/pawpatrol.html @@ -0,0 +1,23 @@ + + + + + + + Paw Patrol - Helfer auf vier Pfoten + + + +

Lieblings-Fellfreund

+
+ + + +
+

+

+ + + + + \ No newline at end of file diff --git a/web/10/labor/10_loesungen/Aufgabe_3/bunt.html b/web/10/labor/10_loesungen/Aufgabe_3/bunt.html new file mode 100644 index 0000000..2958340 --- /dev/null +++ b/web/10/labor/10_loesungen/Aufgabe_3/bunt.html @@ -0,0 +1,26 @@ + + + + + + + Buntes HTML + + +

Jetzt wird es bunt

+

Alles in Blau-Tönen

+ Dieser Text ist darkblue. +
+ Dieser Text ist lightskyblue. +

Alles in Violett-Tönen

+

Dieser Absatz ist pink.

+

Dieser Absatz ist magenta.

+

Alles in Grün-Tönen

+

+ Hier ist alles greenyellow. +
+
+ Auch der Bereich zwischen dem Text. +

+ + \ No newline at end of file diff --git a/web/10/labor/10_loesungen/Aufgabe_3/style.css b/web/10/labor/10_loesungen/Aufgabe_3/style.css new file mode 100644 index 0000000..314105d --- /dev/null +++ b/web/10/labor/10_loesungen/Aufgabe_3/style.css @@ -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; +} \ No newline at end of file diff --git a/web/10/labor/10_loesungen/Aufgabe_4/Color.html b/web/10/labor/10_loesungen/Aufgabe_4/Color.html new file mode 100644 index 0000000..fafd5e0 --- /dev/null +++ b/web/10/labor/10_loesungen/Aufgabe_4/Color.html @@ -0,0 +1,14 @@ + + + + + + Colors + + + + + + + + \ No newline at end of file diff --git a/web/10/labor/10_loesungen/Aufgabe_4/color.js b/web/10/labor/10_loesungen/Aufgabe_4/color.js new file mode 100644 index 0000000..91d3dad --- /dev/null +++ b/web/10/labor/10_loesungen/Aufgabe_4/color.js @@ -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); +}); + +