v0.1 – the colorer

frontend: nice, sleek, functional and completely intuitive UI
internal: flat hierarchies; opinoinated reactivity

src/App.tsx

@@ -0,0 +1,59 @@
+import { createSignal } from "solid-js";
+
+function Colorer(props) {
+    const [h, setH] = createSignal(1);
+    const [s, setS] = createSignal(50);
+    const [l, setL] = createSignal(50);
+    const [a, setA] = createSignal(1);
+    const hslColor = () => `hsla(${h()}, ${s()}%, ${l()}%, ${a()})`;
+
+    const changeH = (e) => setH(e.currentTarget.value);
+    const changeS = (e) => setS(e.currentTarget.value);
+    const changeL = (e) => setL(e.currentTarget.value);
+    const changeA = (e) => setA(e.currentTarget.value);
+
+    return (
+        <div class="main-container">
+            <div id="colorer">
+                <label>H <input type="number" min="0" max="359"
+                    value={h()} onInput={changeH} />
+                    <input type="range" min="0" max="359"
+                        value={h()} onInput={changeH} />
+                </label>
+                <label>S <input type="number" min="0" max="100"
+                    value={s()} onInput={changeS} />
+                    <input type="range" min="0" max="100"
+                        value={s()} onInput={changeS} />
+                </label>
+                <label>L <input type="number" min="0" max="100"
+                    value={l()} onInput={changeL} />
+                    <input type="range" min="0" max="100"
+                        value={l()} onInput={changeL} />
+                </label>
+                <label>A <input type="number" min="0" max="1" step="0.01"
+                    value={a()} onInput={changeA} />
+                    <input type="range" min="0" max="1" step="0.01"
+                        value={a()} onInput={changeA} />
+                </label>
+            </div>
+            <div class="color-box" style={{
+                "background-color": hslColor()
+            }}></div>
+        </div>
+    );
+}
+
+function App() {
+    return (
+        <>
+            <header>
+                <h1>colorer</h1>
+            </header>
+            <main>
+                <Colorer />
+            </main>
+        </>
+    );
+};
+
+export default App;

src/index.css

@@ -0,0 +1,60 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+               "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+               sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  @apply bg-gray-700;
+  height: 100vh;
+}
+
+code {
+  font-family: Input, source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+               monospace;
+}
+
+#app {
+  @apply container mx-auto h-screen;
+  display: grid;
+  grid-template-rows: min-content 1fr;
+  grid-template-columns: 1fr;
+  gap: 0px 0px;
+  grid-template-areas:
+    "header"
+    "main";
+}
+
+#colorer {
+  @apply flex flex-col;
+}
+
+header { grid-area: header; color: white; }
+header h1 { @apply font-mono text-4xl text-center mt-2; }
+
+main {
+  @apply bg-white m-16 mx-auto p-4;
+  @apply flex justify-center content-center;
+  grid-area: main;
+  width: min(50%, 75vw);
+  height: min(75%, 50vh);
+}
+
+.main-container { width: 100%; }
+
+label { @apply bg-white p-1 pl-0; }
+
+label > input { @apply font-mono text-right; }
+
+#colorer { float: left; }
+
+input[type=number] {
+  width: 6ch;
+}
+
+.color-box { width: 100%; height: 100%; }

src/index.tsx

@@ -0,0 +1,8 @@
+import { render } from "solid-js/web";
+
+import "./index.css";
+import App from "./App";
+
+render(() => (
+    <App />
+), document.getElementById("app"));