de:modul:m291:learningunits:lu03:aufgaben:a_dark_light_switch

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung		 Vorhergehende Überarbeitung
de:modul:m291:learningunits:lu03:aufgaben:a_dark_light_switch [2026/02/23 10:17] – gkochde:modul:m291:learningunits:lu03:aufgaben:a_dark_light_switch [2026/02/23 15:23] (aktuell) – gkoch
Zeile 14: Zeile 14:
  
 ===== Voraussetzungen ===== ===== Voraussetzungen =====
-  * Ihr Stand nach LU02 ist vorhanden und funktioniert im Desktop und Mobile Layout.+ 
 +Ihr Stand nach LU02 ist vorhanden und funktioniert im Desktop und Mobile Layout.
  
 <WRAP center round tip 70%> <WRAP center round tip 70%>
Zeile 33: Zeile 34:
  
 **Aufgabe** **Aufgabe**
-  * Ergänzen Sie im ''<head>'' Ihrer HTML-Datei ein Favicon. +  * Ergänzen Sie im ''%%<head>%%'' Ihrer HTML-Datei ein Favicon. 
-  * Verwenden Sie dazu ein ''<link>'' Tag mit ''rel="icon"''.+  * Verwenden Sie dazu ein ''%%<link>%%'' Tag mit ''rel="icon"''.
   * Achten Sie darauf, dass der Pfad zu Ihrer Datei stimmt (z.B. ''./resources/favicon.ico'').   * Achten Sie darauf, dass der Pfad zu Ihrer Datei stimmt (z.B. ''./resources/favicon.ico'').
  
Zeile 46: Zeile 47:
  
 **Checkliste** **Checkliste**
-  * Das Icon erscheint im Browser-Tab.+  * Das Icon erscheint im Browser-Tab (auf Chrome oder Firefox testen, Safari zeigt das Favicon nicht an (weil File lokal gespeichert ist)).
   * In DevTools → Network gibt es keinen 404 Fehler für das Favicon.   * In DevTools → Network gibt es keinen 404 Fehler für das Favicon.
  
Zeile 52: Zeile 53:
  
 {{:de:modul:m291:learningunits:lu03:aufgaben:screenshot_2026-02-23_at_09.28.00.png?nolink&400|}} {{:de:modul:m291:learningunits:lu03:aufgaben:screenshot_2026-02-23_at_09.28.00.png?nolink&400|}}
- +\\ 
-Sie haben in Ihrer Info-Zeile zwei Feature-Texte, z.B. „No credit card required“. Vor jedem Text soll ein Icon erscheinen.+Sie haben in Ihrer Info-Zeile zwei Feature-Texte, z.B. „No credit card required". Vor jedem Text soll ein Icon erscheinen.
  
 <WRAP center round box 80%> <WRAP center round box 80%>
 +**Beispiel für das Anwenden von Pseudo-Elementen** (nicht so umzusetzen im Projekt Landingpage Alarado, sondern wie oben abgebildet -> Feature-Texte mit grünem Haken)
 {{:de:modul:m291:learningunits:lu03:aufgaben:1_p0ryo3ias6k1zbyv9kusva.png?nolink&400|}} {{:de:modul:m291:learningunits:lu03:aufgaben:1_p0ryo3ias6k1zbyv9kusva.png?nolink&400|}}
 \\ \\
 //Wenn wir vor oder nach einem Text ein Icon oder Emoji einblenden möchten, eignen sich Pseudo-Elemente sehr gut.// //Wenn wir vor oder nach einem Text ein Icon oder Emoji einblenden möchten, eignen sich Pseudo-Elemente sehr gut.//
  
-**Umsetzung des im Bild oben gezeigten Designs mit HTML und CSS:**+ 
 +**Umsetzung des im Bild oben gezeigten Designs (The Div Soup) mit HTML und CSS:** 
 <code html> <code html>
 <body> <body>
Zeile 68: Zeile 72:
  
 <code css> <code css>
 +body {
 +  background-color: #000000;
 +}
 +
 h1 { h1 {
   color: #fff;   color: #fff;
Zeile 82: Zeile 90:
 </WRAP> </WRAP>
  
-Kurze Erklärung: Wir betten die grünen OK-Haken per CSS ein und nicht als ''<img>''-Tag, weil sie keinen eigenen Inhalt transportieren. Sie sind reine Dekoration. So können wir das Icon einmal in einer CSS-Regel definieren und dann auf mehrere Elemente anwenden.+Kurze Erklärung: Wir betten die grünen OK-Haken per CSS ein und nicht als ''%%<img>%%''-Tag, weil sie keinen eigenen Inhalt transportieren. Sie sind reine Dekoration. So können wir das Icon einmal in einer CSS-Regel definieren und dann auf mehrere Elemente anwenden.
  
 **Aufgabe** **Aufgabe**
Zeile 117: Zeile 125:
  
 ===== Video Switch Dark Light Mode ===== ===== Video Switch Dark Light Mode =====
 +
 <WRAP center round box 80%> <WRAP center round box 80%>
 {{:de:modul:m291:learningunits:lu03:aufgaben:m291_lu03_dark-light-switch.mp4?1040x585|Video mit Erklärung zum Dark Light Mode.}} {{:de:modul:m291:learningunits:lu03:aufgaben:m291_lu03_dark-light-switch.mp4?1040x585|Video mit Erklärung zum Dark Light Mode.}}
Zeile 132: Zeile 141:
  
 **Aufgabe** **Aufgabe**
-  * Ergänzen Sie im HTML im ''<label class="switch">'' zwei ''<span>'' Tags (Slider und Icons). +  * Ergänzen Sie im HTML im ''%%<label class="switch">%%'' zwei %%<span>%% Tags (Slider und Icons). 
-  * Fügen Sie den CSS-Block unterhalb Ihrer bestehenden Styles ein, dort wo im Template „Switch Styles“ vorgesehen sind.+  * Fügen Sie den CSS-Block unterhalb Ihrer bestehenden Styles ein, dort wo im Template „Switch Styles" vorgesehen sind.
   * Kontrollieren Sie die Pfade zu den Icons im ''url(...)''.   * Kontrollieren Sie die Pfade zu den Icons im ''url(...)''.
  
Zeile 145: Zeile 154:
 </label> </label>
 </code> </code>
 +</WRAP>
  
 +<WRAP center box round 80%>
 **CSS** **CSS**
 <code css> <code css>
Zeile 220: Zeile 231:
 ===== Schritt 4 Dark Mode Klasse vorbereiten ===== ===== Schritt 4 Dark Mode Klasse vorbereiten =====
  
-Sie steuern den Dark Mode über eine CSS-Klasse auf dem ''<html>'' Element.+Sie steuern den Dark Mode über eine CSS-Klasse auf dem ''%%<html>%%'' Element.
  
 **Aufgabe** **Aufgabe**
Zeile 233: Zeile 244:
 Schreiben Sie die Regeln so, dass Sie nicht überall neue Farben kopieren, sondern Ihre Variablen verwenden. Schreiben Sie die Regeln so, dass Sie nicht überall neue Farben kopieren, sondern Ihre Variablen verwenden.
 \\ \\
-Setzen Sie zum Testen provisorisch die Klasse ''theme-dark'' aufs ''<html>''-Element. Entfernen Sie dies wieder, sobald Sie mit der Gestaltung fertig sind: Die Klasse wird danach dynamisch mit JavaScript gesetzt.+Setzen Sie zum Testen provisorisch die Klasse ''theme-dark'' aufs ''%%<html>%%''-Element. Entfernen Sie dies wieder, sobald Sie mit der Gestaltung fertig sind: Die Klasse wird danach dynamisch mit JavaScript gesetzt.
 </WRAP> </WRAP>
  
Zeile 257: Zeile 268:
  
 **Checkliste** **Checkliste**
-  * Wenn die Klasse ''class="theme-dark"'' im ''<html>'' steht, wird die Seite dunkel.+  * Wenn die Klasse ''class="theme-dark"'' im ''%%<html>%%'' steht, wird die Seite dunkel.
   * Text bleibt gut lesbar.   * Text bleibt gut lesbar.
   * Navigation bleibt sichtbar.   * Navigation bleibt sichtbar.
Zeile 265: Zeile 276:
 Damit Sie den Switch funktional machen können, brauchen Sie in JavaScript Zugriff auf: Damit Sie den Switch funktional machen können, brauchen Sie in JavaScript Zugriff auf:
   * die Checkbox im Switch   * die Checkbox im Switch
-  * das Root-Element ''<html>'' +  * das Root-Element ''%%<html>%%'' 
-  * das Logo-''<img>''+  * das Logo-''%%<img>%%''
  
 **Aufgabe** **Aufgabe**
Zeile 280: Zeile 291:
 {{:de:modul:m291:learningunits:lu03:aufgaben:screenshot_2026-02-23_at_09.54.01.png?nolink&600|}} {{:de:modul:m291:learningunits:lu03:aufgaben:screenshot_2026-02-23_at_09.54.01.png?nolink&600|}}
 \\ \\
-//Folgender Code muss im ''<script>''-Tag programmiert werden.//+//Folgender Code muss im ''%%<script>%%''-Tag programmiert werden.//
  
 <WRAP center box round 80%> <WRAP center box round 80%>
 <code javascript> <code javascript>
 // Aufgabe: DOM-Elemente abrufen und in Variablen speichern // Aufgabe: DOM-Elemente abrufen und in Variablen speichern
-// - checkbox (Switch) +// const checkbox = ... (Switch) 
-// - html (Root-Element) +// const html = ... (Root-Element) 
-// - logo (img)+// const logo = ... (img)
 </code> </code>
 </WRAP> </WRAP>
Zeile 294: Zeile 305:
  
 Jetzt schreiben Sie eine Funktion, die beim Umschalten drei Dinge erledigt: Jetzt schreiben Sie eine Funktion, die beim Umschalten drei Dinge erledigt:
-  * entscheidet anhand der Checkbox, ob Dark Mode aktiv sein soll +  * Entscheidet anhand der Checkbox, ob Dark Mode aktiv sein soll 
-  * fügt die Klasse ''theme-dark'' hinzu oder entfernt sie +  * Fügt die Klasse ''theme-dark'' hinzu oder entfernt sie 
-  * tauscht das Logo aus, indem Sie ''logo.src'' anpassen+  * Tauscht das Logo aus, indem Sie ''logo.src'' anpassen
  
 <WRAP center round tip 70%> <WRAP center round tip 70%>
-Nutzen Sie für das Setzen der Klasse auf dem ''<html>''-Element die Methoden ''classList.add'' und ''classList.remove''.+Nutzen Sie für das Setzen der Klasse auf dem ''%%<html>%%''-Element die Methoden ''classList.add'' und ''classList.remove''.
 </WRAP> </WRAP>
  
Zeile 329: Zeile 340:
 **Aufgabe** **Aufgabe**
   * Setzen Sie auf die Checkbox einen Event Listener.   * Setzen Sie auf die Checkbox einen Event Listener.
-  * Reagieren Sie auf das Ereignis ''change'' (empfohlen für Checkbox).+  * Reagieren Sie auf das Ereignis ''change'' (empfohlen für Checkbox). ((click funktioniert auch, change ist aber semantisch passender für Form-Inputs.))
   * Rufen Sie in der Callback-Funktion Ihre Toggle-Funktion auf.   * Rufen Sie in der Callback-Funktion Ihre Toggle-Funktion auf.
  
Zeile 352: Zeile 363:
  
 **Aufgabe** **Aufgabe**
-  * Rufen Sie Ihre Toggle-Funktion einmal beim Laden auf.+  * Rufen Sie Ihre Toggle-Funktion einmal beim Laden auf, oder schreiben Sie eine kleine Initial-Funktion.
   * Test: Seite neu laden, ohne zu klicken.   * Test: Seite neu laden, ohne zu klicken.
  
Zeile 366: Zeile 377:
 ==== Testfälle ==== ==== Testfälle ====
   * Switch klicken: Dark Mode ein, dann wieder aus   * Switch klicken: Dark Mode ein, dann wieder aus
-  * Seite neu laden: Zustand bleibt konsistent (keine „falsche“ Startfarbe)+  * Seite neu laden: Zustand bleibt konsistent (keine „falsche" Startfarbe)
   * Mobile Ansicht: Layout bleibt korrekt, Switch ist je nach Ihrem CSS sichtbar oder ausgeblendet   * Mobile Ansicht: Layout bleibt korrekt, Switch ist je nach Ihrem CSS sichtbar oder ausgeblendet
  
  • de/modul/m291/learningunits/lu03/aufgaben/a_dark_light_switch.1771838273.txt.gz
  • Zuletzt geändert: 2026/02/23 10:17
  • von gkoch