Initial commit

jtiala · Dec 4, 2023 · c37ea23 · c37ea23
commit c37ea23
Show file tree

Hide file tree

Showing 5 changed files with 106 additions and 0 deletions.
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2023 Joonas Tiala
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,5 @@
+# 🎨 Compare Colors
+
+A simple tool to compare two colors side-by-side.
+
+[jtiala.github.io/compare-colors](https://jtiala.github.io/compare-colors)
diff --git a/index.html b/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Compare Colors</title>
+    <meta
+      name="description"
+      content="A simple tool to compare two colors side-by-side."
+    />
+    <meta name="author" content="Joonas Tiala" />
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+
+  <body>
+    <div id="color1">
+      <input placeholder="Any valid CSS color value" onClick="select()" />
+    </div>
+    <div id="color2">
+      <input placeholder="Any valid CSS color value" onClick="select()" />
+    </div>
+    <script src="scripts.js"></script>
+  </body>
+</html>
diff --git a/scripts.js b/scripts.js
@@ -0,0 +1,37 @@
+const color1div = document.querySelector("#color1");
+const color2div = document.querySelector("#color2");
+const color1input = document.querySelector("#color1 input");
+const color2input = document.querySelector("#color2 input");
+
+function setColors() {
+  color1div.style.background = color1input.value;
+  color2div.style.background = color2input.value;
+
+  let searchParams = new URLSearchParams(window.location.search);
+
+  searchParams.set("1", color1input.value);
+  searchParams.set("2", color2input.value);
+
+  history.pushState(
+    null,
+    "",
+    window.location.pathname + "?" + searchParams.toString()
+  );
+}
+
+color1input.addEventListener("change", setColors);
+color2input.addEventListener("change", setColors);
+
+function setInitialColors() {
+  const searchParams = new URLSearchParams(document.location.search);
+  const color1 = searchParams.get("1") || "tomato";
+  const color2 = searchParams.get("2") || "salmon";
+
+  color1input.value = color1;
+  color2input.value = color2;
+
+  color1div.style.background = color1;
+  color2div.style.background = color2;
+}
+
+setInitialColors();
diff --git a/styles.css b/styles.css
@@ -0,0 +1,19 @@
+body {
+  margin: 0;
+  height: 100vh;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+
+div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+input {
+  border: 5px solid rgba(0, 0, 0, 0.25);
+  font-size: 25px;
+  padding: 10px;
+  background-color: rgba(255, 255, 255, 0.75);
+}