From f7fa4dd32517fba610627b7b9edfc5acabeae0de Mon Sep 17 00:00:00 2001
From: lolabird <octavia@octavianichols.com>
Date: Fri, 10 Nov 2023 13:51:08 -0700
Subject: [PATCH] Add background color for container and add more reset values

---
 index.html |  8 +++++++-
 script.js  | 18 ++++++++++++++++--
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index af415b4..61a0985 100644
--- a/index.html
+++ b/index.html
@@ -22,11 +22,17 @@
             <button class="pen" id="erase">Erase</button>
             <button id="reset">Reset</button>
 
-            <div id = col-picker>
+            <div id = "col-picker">
                 <label for="custom-color">Pick a color:</label>
                 <input type="color" id="custom-color" value="#ff0000">
             </div>
 
+            <div id = "background-col-picker">
+                <label for="back-col-picker">Pick a color:</label>
+                <input type="color" id="back-col-picker" value="#ff0000">
+            </div>
+
+
             <div class="slider">
                 <label for="gridSlider">Grid Size: <span id="sliderLabel"></span></label>
                 <input name="gridSlider" id="gridSlider" type="range" min="1" max="100" value="16">
diff --git a/script.js b/script.js
index 67d92de..8c5536f 100644
--- a/script.js
+++ b/script.js
@@ -5,6 +5,7 @@ const gridSlider = document.querySelector("#gridSlider");
 const buttons = document.querySelectorAll(".pen");
 const colorPicker = document.querySelector("#custom-color");
 const reset = document.querySelector("#reset");
+const backColorPicker = document.querySelector("#back-col-picker")
 let colorValue = "black";
 let numGrid = gridSlider.value;
 let sliderLabel = document.querySelector("#sliderLabel");
@@ -23,7 +24,6 @@ let isErase;
 
 createGrid();
 
-
 buttons.forEach((button) => {
     button.addEventListener ("click", changeColor);
 });
@@ -35,9 +35,18 @@ colorPicker.addEventListener("change", changeColor);
 colorPicker.addEventListener("input", changeColor);
 colorPicker.addEventListener("click", changeColor);
 
+backColorPicker.addEventListener("change", pickBackground);
+backColorPicker.addEventListener("input", pickBackground);
+//backColorPicker.addEventListener("click", pickBackground);
+
 reset.addEventListener("click", getGridDimensions);
 
 
+function pickBackground() {
+    container.style.backgroundColor = backColorPicker.value;
+}
+
+
 function createGrid() {
     const gridArea = numGrid ** 2;
     const gridWidth = 100 / numGrid;
@@ -63,7 +72,12 @@ function createGrid() {
 }
 
 
-function getGridDimensions() {    
+function getGridDimensions() {   
+    gridSlider.value = 16;
+    container.style.backgroundColor = "#ffffff";
+    backColorPicker.value = "#ffffff";
+    colorPicker.value = "#000000";
+    
     numGrid = gridSlider.value;
     while (container.firstChild) {
         container.removeChild(container.lastChild);