create event listener for background color picker

Naveduran · Oct 3, 2024 · 30f5c6b · 30f5c6b
1 parent 9f286e0
commit 30f5c6b
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -19,7 +19,8 @@ Thanks to [Monica Vera Duran](https://www.linkedin.com/in/monica-vera-duran-91b4
       OK - separate config in another file
         OK - study modules 
         OK - study cors
-      OK- for each leer "initial config" para crear el mandala
+      OK - for each leer "initial config" para crear el mandala
+      OK - modify size to fit smaller screen sizes
 
 ### OK crear boton guardar en archivo y cargar de archivo
 
@@ -35,19 +36,18 @@ Thanks to [Monica Vera Duran](https://www.linkedin.com/in/monica-vera-duran-91b4
       OK set colors for dark and light theme
       OK get dark-light theme preference from user system and apply automatically
 
-### habilitar cambiar background 
-      - crear una variable en js
-      - crear listener
-      - asignar background y font color cuando la variable cambie
-      - cambiar background del canvas
+### habilitar cambiar background
+      OK crear variable
+      OK crear event listener para el input y la funcion que corre cuando se detona el evento
+      - cambiar el background del canvas
 
 ### crear los botones de los layers de acuerdo a la config inicial
 
-### Change squares for rectangles en la config de polar
+### change squares for rectangles en la config de polar
 
 ### boton para ver una sola layer a la vez
 
-### Set history saving to make multiple redo and undo
+### set history saving to make multiple redo and undo
 
 ### crear boton reset
       - boton css

diff --git a/index.html b/index.html
@@ -10,11 +10,8 @@
   <body>
     <header>
       <div class="config">
-        <label for="backgroundColor">Theme</label>
-        <select name="theme" id="theme" form="theme">
-          <option value="dark">Dark</option>
-          <option value="light">Light</option>
-        </select>
+        <label for="backgroundColor">Background</label>
+        <input type="color" id="backgroundColor" name="backgroundColor" value="#000000" class="clickable-button "/>
         <label for="pageLanguage">Language</label>
         <select name="pageLanguage" id="pageLanguage" form="pageLanguage">
           <option value="AB">Abkhazian</option>

diff --git a/sketch2.js b/sketch2.js
@@ -1,5 +1,30 @@
 // This functions allows to create mandalas easily based on a configuration. It uses p5 and p5.polar libraries to do it.
 
+
+
+let backgroundColor;
+
+window.addEventListener("load", startup, false);
+
+function startup() {
+  backgroundColor = document.querySelector("#backgroundColor");
+  backgroundColor.addEventListener("input", updateCanvasColor, false);
+  backgroundColor.select();
+}
+
+function updateCanvasColor(event) {
+  /*
+  const p = document.querySelector("p");
+  if (p) {
+    p.style.color = event.target.value;
+  }
+    */
+  console.log(event.target.value)
+}
+
+
+
+
 // Creates the space to draw
 function setup()
 {
@@ -78,12 +103,13 @@ function figuresNumber() {return Object.keys(figures).length}
 
 // Resize the canvas when the browser's size changes.
 function windowResized() {
-  if (windowHeight > windowWidth){
-    //cell
+  if (windowHeight > windowWidth){ //phone
     resizeCanvas(windowWidth, windowWidth);
-  } else { 
-    //desktop
+  } else { //desktop
     resizeCanvas(windowHeight, windowHeight);
   }
+}
 
+function changeBackground(backgroundColor){
+  console.log(backgroundColor)
 }