Now we have a bad slogan.

1 files changed, 22 insertions, 0 deletions

diff --git a/docker/crupest-nginx/sites/www/src/main.js b/docker/crupest-nginx/sites/www/src/main.js
index fd09605..5488581 100644
--- a/docker/crupest-nginx/sites/www/src/main.js
+++ b/docker/crupest-nginx/sites/www/src/main.js
@@ -14,6 +14,28 @@ for (let i = 0; i < 10; i++) {
   colorStripContainer.appendChild(colorStripBlock);
 }
 
+/** @type {HTMLDivElement} */
+const sloganElement = document.querySelector("#slogan");
+const sloganTextElement = document.querySelector("#slogan .slogan-text");
+
+/** @type {"good" | "bad"} */
+let sloganState = "good";
+const slogans = {
+  "good": sloganTextElement.textContent,
+  "bad": "The world is a piece of shit, so let's make it a little better!"
+}
+
+function toggleSlogan() {
+  const newState = sloganState === "good" ? "bad" : "good";
+  sloganElement.classList.remove(sloganState)
+  sloganElement.classList.add(newState);
+  sloganTextElement.textContent = slogans[newState];
+  sloganState = newState;
+}
+
+sloganElement.addEventListener("click", toggleSlogan);
+
+
 document.addEventListener("DOMContentLoaded", async () => {
   console.log("Try to fetch GitHub project(number: 2) of crupest.");