Now we have a bad slogan.

2 files changed, 31 insertions, 2 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.");
 
diff --git a/docker/crupest-nginx/sites/www/src/style.css b/docker/crupest-nginx/sites/www/src/style.css
index 6ef26d3..445c783 100644
--- a/docker/crupest-nginx/sites/www/src/style.css
+++ b/docker/crupest-nginx/sites/www/src/style.css
@@ -35,12 +35,19 @@ body {
 
 #slogan {
   width: 100%;
-  background-color: dodgerblue;
   text-align: center;
   padding: 0.5em 1em;
   box-sizing: border-box;
 }
 
+#slogan.good {
+  background-color: dodgerblue;
+}
+
+#slogan.bad {
+  background-color: orangered;
+}
+
 .slogan-text {
   display: inline-block;
   text-align: initial;
@@ -64,4 +71,4 @@ body {
   display: block;
   text-align: center;
   font-size: 1.2em;
-}
+}
\ No newline at end of file