added color game

magmalamps · Mar 17, 2024 · 08b4f9d · 08b4f9d
1 parent 0a3dd6f
commit 08b4f9d
Show file tree

Hide file tree

Showing 3 changed files with 129 additions and 0 deletions.
diff --git a/colorgame/colorindex.html b/colorgame/colorindex.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <link rel="stylesheet" href="colorstyle.css">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Color Game!</title>
+</head>
+<body onload="javascript:loadColor()">
+    <h1>Color Game!</h1>
+
+    <div class="Color_container">
+        <div class="color" id="colorID">
+            <h2 class="placeholder">Color</h2>
+        </div>
+
+        <div class="buttons">
+            <button onclick="generate()">Generate new</button>
+            <p id="rare_p">Rarity: </p>
+        </div>
+    </div>
+
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>    
+
+    <h2>Goal:</h2>
+    <p>
+        Get the highest rareity possible and beat your friends. Blue is the most rare color. "Blue" is defined by a RGB code.
+        Your color also saves.
+    </p>
+
+    <h2>How?</h2>
+    <p>Everytime yu click the button a random color gets generated.
+        There are different rarities of colors. The rareity is based on how blue it is. More blue = higher rareity.
+        Try to get the most legendary
+        one. But you can always get a worse color!
+    </p>
+
+    <script>
+
+        function loadColor() {
+            const colorrn = document.getElementById('colorID');
+            const rare_text = document.getElementById('rare_p');
+            var color_loaded = localStorage.getItem("color")
+            var rare_loaded = localStorage.getItem("rare")
+
+            colorrn.style.backgroundColor = "#" + color_loaded;
+            rare_text.innerHTML = "Rarity: " + rare_loaded;
+        }
+
+        function generate() {
+            const colorrn = document.getElementById('colorID');
+            const rare_text = document.getElementById('rare_p');
+            const randomColor = Math.floor(Math.random() * 16777215).toString(16);
+            colorrn.style.backgroundColor = "#" + randomColor;
+
+            var hexColor = randomColor;
+            hexColor = hexColor.replace('#', '');
+
+            var r = parseInt(hexColor.substring(0, 2), 16);
+            var g = parseInt(hexColor.substring(2, 4), 16);
+            var b = parseInt(hexColor.substring(4, 6), 16);
+
+            var blueIntensity = b / 255;
+
+            rare_text.innerHTML = "Rarity: " + blueIntensity.toFixed(2);
+
+            localStorage.setItem("color", randomColor)
+            localStorage.setItem("rare", blueIntensity.toFixed(2))
+        }
+    </script>
+</body>
+</html>
diff --git a/colorgame/colorstyle.css b/colorgame/colorstyle.css
@@ -0,0 +1,52 @@
+h1 {
+    font-family: Arial, Helvetica, sans-serif;
+    text-align: center;
+    color: aliceblue;
+    text-decoration: underline;
+}
+
+h2 {
+    color: aliceblue;
+    font-family: Arial, Helvetica, sans-serif;
+    text-align: center;
+}
+
+p {
+    color: aliceblue;
+    text-align: center;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+body {
+    background-color: rgb(35, 34, 34);
+}
+
+div.Color_container {
+    background-color: rgb(46, 46, 46);
+    border-radius: 7px;
+}
+
+h2.placeholder {
+    padding: 10%;
+}
+
+div.color {
+    border-radius: 7px;
+    background-color: aquamarine;
+}
+
+div.buttons {
+    display: grid;
+    grid-template-columns: 50% 50%;
+}
+
+button {
+    margin: 10px;
+    color: aliceblue;
+    background-color: rgb(48, 48, 48);
+    border: solid;
+    border-color: rgb(75, 75, 75);
+    border-radius: 7px;
+    width: 100%;
+    height: 30px;
+}
diff --git a/index.html b/index.html
@@ -11,6 +11,7 @@
         <h1>My Projects</h1>
     </div>
     <div class="container">
+        <a href="colorgame/colorindex.html" class="items">Color Game</a>
         <a href="clipboard_saver/clipboard.html" class="items">Clipboard Creator</a>
         <a href="mindreader/reader.html" class="items">Mind Reader</a>
         <a href="magmalamps/magmalamps.html" class="items">Lava Lamps</a>