3 files changed, 34 insertions, 4 deletions
diff --git a/docker/crupest-nginx/sites/www/index.html b/docker/crupest-nginx/sites/www/index.html
index 3cb0b65..f416232 100644
--- a/docker/crupest-nginx/sites/www/index.html
+++ b/docker/crupest-nginx/sites/www/index.html
@@ -11,13 +11,14 @@
 
 <body>
   <div id="color-strip-container"></div>
-  <div id="slogan">
+  <div id="slogan" class="good">
     <span class="slogan-text">The world is full of pain, but we can fix it with love!</span>
   </div>
   <article id="main-article">
     <h1 id="title">Hello! This is crupest.</h1>
     <p>Welcome to my home page! I'm very glad to meet you here.</p>
-    <p>If you have something interesting to share with me, feel free to reach me via email at <a href="mailto:crupest@outlook.com">crupest@outlook.com</a> or, of course, <a
+    <p>If you have something interesting to share with me, feel free to reach me via email at <a
+        href="mailto:crupest@outlook.com">crupest@outlook.com</a> or, of course, <a
         href="mailto:I@crupest.life">I@crupest.life</a>. You can also fire an issue in
       any repo on GitHub. Here is the link to my GitHub profile, <a
         href="https://github.com/crupest">https://github.com/crupest</a>.</p>
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