Farben für die Webseite
Als zuvorkommende Geste lassen Sie Benutzern der Webseite die Farbe für Überschriften wählen. Damit dem Benutzer seine Farbe auch beim nächsten Besuch wieder zugewiesen wird, speichert das Skript die gewählte Farbe im Local Storage des Browsers.
Das HTML-Markup für die Farbwahl
<div class="favcolor"> <span class="action">Wählen Sie Ihre Farbe</span> <div class="col" style="background: lightslategray;"></div> <div class="col" style="background: mistyrose;"></div> <div class="col" style="background: pink;"></div> <div class="col" style="background: plum;"></div> </div>
Das Skript für die Farbwahl
cols und arr sind die globalen Variablen für das Skript. cols ist die NodeList aller Farbwähler mit der Klasse col. Das Array dient nur dazu, die Position des Farbwählers zu speichern, um die gewählte Farbe bei einem erneuten Besuch der Seite zu kennzeichnen.
const cols = document.querySelectorAll(".col"); const arr = []; for (let i=0; i<cols.length; i++) { arr[i] = cols[i].style.background; }
In der for-Schleife iteriert das Skript über alle Farbwähler-Elemente und weist ihnen einen Event Listener zu.
Mit der Wahl einer Farbe ändert das Skript den Text von »Wählen Sie eine Farbe« zu »Farbeinstellung löschen«. Der neue Text sitzt in einem span-Element, dem direkt ein Event Handler zugewiesen ist: onclick='deleteColor()'.
for (const item of cols) {
item.addEventListener("click", function(evt) {
document.querySelector(".action").innerHTML =
"<span onclick='deleteColor()'>Farbeinstellung löschen</span>";
// Eintrag der Farbe in localStorage
localStorage["favorite"] = this.style.backgroundColor;
let h2 = document.querySelectorAll("h2");
for (const h of h2) {
h.setAttribute("style","color:" + localStorage["favorite"]);
}
/** Wenn bereits eine andere Farbe gewählt wurde,
wird die CSS-Klasse active von diesem Farbwähler entfernt **/
if (document.querySelector(".active") !== null) {
document.querySelector(".active").classList.remove("active")
}
// Der soeben gewählten Farbe wird jetzt die Klasse active zugewiesen
evt.target.classList.add("active");
});
}
Wenn der Benutzer die Seite ein weiteres Mal besucht, wird die aktive Farbe wieder gekennzeichnet, den Überschriften wird die Farbe zugewiesen und der Text wird in »Farbeinstellung löschen« umgewandelt (ebenfalls mit dem onclick.EventHandler).
if (localStorage["favorite"] != null) { const h2 = document.querySelectorAll("h2"); h2.forEach((item) => { item.setAttribute("style","color:" + localStorage["favorite"]); }); document.querySelector(".action").innerHTML = "<span onclick='deleteColor()'>Farbeinstellung löschen</span>"; const position = arr.indexOf(localStorage["favorite"]); cols[position].classList.add("active"); }
Fehlt nur noch die Funktion zum Löschen der Farbeinstellung und des Local Storage.
function deleteColor() { localStorage.removeItem("favorite"); const h2 = document.querySelectorAll("h2"); h2.forEach((item) => { item.removeAttribute("style"); }); document.querySelector(".active").classList.remove("active"); }