Create clear button

Create button that will clear the page (without asking for users to input new canvas size)
eris6 · Oct 5, 2024 · 1e4b685 · 1e4b685
1 parent 77fde38
commit 1e4b685
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 14 deletions.
diff --git a/etchasketch.js b/etchasketch.js
@@ -1,13 +1,19 @@
 const container = document.querySelector(".container");
 const resize = document.querySelector(".resize");
+const clear = document.querySelector(".clear");
 let dimension = 16;
 
 resize.addEventListener('click', ()=>{
     let newSize = prompt("What size?");
     while(container.firstChild){
         container.removeChild(container.lastChild);
     }
-    if (newSize < 100){
+    if (newSize == 0){
+        createGrid(1);
+    }
+
+
+    if (newSize > 0 && newSize < 100){
         createGrid(newSize);
         dimension = newSize;
     }
@@ -18,6 +24,18 @@ resize.addEventListener('click', ()=>{
     }
 })
 
+clear.addEventListener('click', ()=>{
+    while(container.firstChild){
+        container.removeChild(container.lastChild);
+    }
+
+    createGrid(dimension);
+
+})
+
+
+
+
 
 function createGrid(dimension){
     boxSize = getBoxSize(dimension);
@@ -89,23 +107,13 @@ function getRandomColor(){
     return randomColor;
 }
 
-function opacify(rgb){
-    let value = rgb(10, rgb.length);
-    console.log(value);
-
-    rgb = rgb.slice(0, 10) + " / 10%" + ")";
-    // console.log(rgb);
-    return rgb;
-
-
-}
-
 
 function getBoxSize(dimension){
     return 800/dimension - 2;
 }
 
-
 createGrid(dimension);
 
 
+
+
diff --git a/index.html b/index.html
@@ -10,7 +10,10 @@
 </head>
 <body>
     <script src="etchasketch.js" defer></script>
-    <div class="playerbuttons">    
+    <div class="playerbuttons">
+    <div class="clear">
+        <button>CLEAR</button>
+    </div>    
     <div class="resize">
         <button>RESIZE</button>
     </div>