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:53] – gkochde:modul:m291:learningunits:lu03:aufgaben:a_dark_light_switch [2026/02/23 15:23] (aktuell) – gkoch
Zeile 34: 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 47: 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 57: Zeile 57:
  
 <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.//
-</WRAP> 
  
-**Umsetzung des im Bild oben gezeigten Designs mit HTML und CSS:** 
  
-<WRAP center box round 80%>+**Umsetzung des im Bild oben gezeigten Designs (The Div Soup) mit HTML und CSS:** 
 <code html> <code html>
 <body> <body>
Zeile 70: Zeile 70:
 </body> </body>
 </code> </code>
-</WRAP> 
  
-<WRAP center box round 80%> 
 <code css> <code css>
 +body {
 +  background-color: #000000;
 +}
 +
 h1 { h1 {
   color: #fff;   color: #fff;
Zeile 88: 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 139: 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 229: 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 242: 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 266: 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 274: 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 284: Zeile 286:
  
 <WRAP center round tip 70%> <WRAP center round tip 70%>
-Best Practice: Geben Sie der Checkbox eine ID, z.B. id="theme-toggle". Dann ist Ihr Code stabiler, wenn später weitere Inputs auf der Seite dazu kommen.+Best Practice: Geben Sie der Checkbox eine ID, z.B. ''id="theme-toggle"''. Dann ist Ihr Code stabiler, wenn später weitere Inputs auf der Seite dazu kommen.
 </WRAP> </WRAP>
  
-{{:de:modul:m291:learningunits:lu03:aufgaben:screenshot_2026-02-23_at_09.54.01.png?nolink&600| Image with script tag}}+{{: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%>
Zeile 299: Zeile 301:
 </code> </code>
 </WRAP> </WRAP>
- 
  
 ===== Schritt 6 Funktion zum Umschalten schreiben ===== ===== Schritt 6 Funktion zum Umschalten schreiben =====
Zeile 309: Zeile 310:
  
 <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 387: Zeile 388:
 Wenn etwas nicht geht, geben Sie testweise Ausgaben in die Console aus, z.B. ob ''checkbox.checked'' true oder false ist. Wenn etwas nicht geht, geben Sie testweise Ausgaben in die Console aus, z.B. ob ''checkbox.checked'' true oder false ist.
 </WRAP> </WRAP>
 +
  • de/modul/m291/learningunits/lu03/aufgaben/a_dark_light_switch.1771840412.txt.gz
  • Zuletzt geändert: 2026/02/23 10:53
  • von gkoch