From f4ef699d32ff2637bea2c24ee558c618782e1cb6 Mon Sep 17 00:00:00 2001
From: Editor Rust <hamza.elabi1@gmail.com>
Date: Sun, 6 Nov 2022 19:57:38 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Color=20Fun?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html |  8 ++++++++
 main.js    | 15 +++++++++++++++
 styles.css | 29 +++++++++++++++++++++++++++++
 3 files changed, 52 insertions(+)

diff --git a/index.html b/index.html
index a85bada..5e1edfe 100644
--- a/index.html
+++ b/index.html
@@ -34,6 +34,14 @@
    <p>Vegetable Dash was my next big thing, and I'm still kinda proud of it. It really helped me get a grasp on core JavaScript features, and helped push my knowledge forward with Node. The whole thing was image-based, and since I was going through my SVG craze, is a little strange. The code will cause you nightmares if Grampa Jenkins doesn't. I love you Vegetable Dash, and maybe one day I'll come back for you...</p>
    <p>Cookin' in the Kitchen is one of my more recent works. It was inspired by an old game I used to play, Cooking Fever. I have hopes of making this multiplayer and all, but I probably won't get to. It was a really cool experiment with drag and drop though.</p>
 
+   <h2>Funsies</h2>
+   <div class="funsies">
+      <p>Change the website color theme</p>
+      <button onclick="changeThme()">Random</button>
+      <button onclick="changeThmeHex()">Hex code</button>
+   </div>
+
+   <br><br>
    <div class="footer">
       <div>
          <h2>Find me</h2>
diff --git a/main.js b/main.js
index 2ed34ef..0e0c1fe 100644
--- a/main.js
+++ b/main.js
@@ -5,3 +5,18 @@ console.log("Have a great day! 💖 Editor Rust");
 window.addEventListener("scroll", () => {
    document.body.style.setProperty("--scroll", window.pageYOffset / (document.body.offsetHeight - window.innerHeight));
 }, false);
+
+function changeThme() {
+   let color = (Math.random() * 0xFFFFFF << 0).toString(16).padStart(6, "0");
+   document.documentElement.style.setProperty("--theme-color", `#${color}`);
+}
+
+function changeThmeHex() {
+   let hex = prompt("Enter valid hexidecimal code :)");
+   if (hex) {
+      if (hex.charAt(0) != "#") hex = `#${hex}`;
+      if (/^#[0-9A-F]{3}$/i.test(hex) || /^#[0-9A-F]{6}$/i.test(hex) || /^#[0-9A-F]{8}$/i.test(hex)) {
+         document.documentElement.style.setProperty("--theme-color", hex);
+      } else alert("Invalid hex code!");
+   }
+}
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 0645c96..80b6a31 100644
--- a/styles.css
+++ b/styles.css
@@ -52,10 +52,38 @@ p {
    margin: .5rem 2rem;
 }
 
+button {
+   padding: .2rem .5rem;
+   font-size: 1.1rem;
+   color: #fff;
+   background-color: var(--theme-color);
+   border: solid .2rem var(--theme-color);
+   border-radius: .5rem;
+   box-shadow: 0 .1rem .2rem #ddd;
+   transition: .15s;
+}
+
+button:hover {
+   color: var(--theme-color);
+   background-color: transparent;
+}
+
+button:active {
+   transform: scale(.98);
+}
+
 a {
    color: var(--theme-color);
 }
 
+.funsies {
+   padding: .5rem 2rem;
+}
+
+.funsies p {
+   margin: 0 .2rem .8rem .2rem;
+}
+
 .footer {
    padding: 1rem;
    display: grid;
@@ -76,6 +104,7 @@ a {
    position: fixed;
    top: 0;
    left: 0;
+   z-index: 10;
 }
 
 .progress {