fix: submit button handler

barelyhuman · Apr 17, 2023 · 268b5c2 · 268b5c2
1 parent 8ee1b45
commit 268b5c2
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 18 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/www/index.html b/www/index.html
@@ -15,7 +15,7 @@
 				<div
 					class="h-1/4 flex order-2 sm:order-1 justify-center items-center w-full"
 				>
-				<form method="GET">
+				<form method="GET" action="javascript:void 0">
 					<div class="w-3/4 sm:w-1/2 mx-auto">
 						<label class="relative w-full">
 							<input
@@ -25,6 +25,7 @@
 								name="color"
 							/>
 							<button
+                id="color-input-button"
 								type="submit"
 								class="absolute inline-block top-1/2 right-1 px-4 py-2 rounded-md -translate-y-1/2 bg-accent text-on-accent"
 							>

diff --git a/www/js/main.js b/www/js/main.js
@@ -169,6 +169,7 @@ function renderColors({color, container} = {}) {
 
 function init() {
 	const colorInput = document.getElementById('color-input')
+	const submitButton = document.getElementById('color-input-button')
 	const colorContainer = document.getElementById('color-container')
 
 	const initialColor = '#18181b'
@@ -180,6 +181,13 @@ function init() {
 		container: colorContainer,
 	})
 
+	submitButton.addEventListener('click', e => {
+		renderColors({
+			color: colorInput.value,
+			container: colorContainer,
+		})
+	})
+
 	colorInput.addEventListener('keyup', e => {
 		if (e.key.toLowerCase() !== 'enter') {
 			return

diff --git a/www/pnpm-lock.yaml b/www/pnpm-lock.yaml
diff --git a/www/styles/global.css b/www/styles/global.css
@@ -60,4 +60,4 @@ body,
     html {
         font-family: 'Inter var', sans-serif;
     }
-}
+}