Merge pull request #1 from mohammednumaan/refactor-and-features

Add new Features and Refactor some code.
mohammednumaan · Feb 15, 2024 · 0bcca91 · 0bcca91
2 parents 106cc29 + b0e21ee
commit 0bcca91
Show file tree

Hide file tree

Showing 8 changed files with 139 additions and 136 deletions.
diff --git a/assets/drawing.png b/assets/drawing.png
diff --git a/assets/eraser.png b/assets/eraser.png
diff --git a/assets/sketch-black.png b/assets/sketch-black.png
diff --git a/assets/sketch-white.png b/assets/sketch-white.png
diff --git a/assets/trash.png b/assets/trash.png
diff --git a/index.html b/index.html
@@ -3,35 +3,33 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Etch-A-Sketch.</title>
-
+    <title>Etch-A-Sketch</title>
     <link rel="stylesheet" href="style.css">
     <script src="script.js" defer></script>
-
 </head>
 <body>
-
+    
     <div class="header">
-        <img class="title-image" src="assets/sketch-white.png">
+        <h1>Paintr</h1>
+    </div>
+
+    <div class="sketch-container">
+        <div class="sketch-board"></div>
     </div>
 
-    <div class="main-container">
-        <div class="btn">
-            <div class="btn-container">
-                <button id="grid-size">Size</button>
-                <button id="clear">Clear</button>
-                <button id="default">Default</button>
-                <button id="rgb">RGB</button>
-            </div>
-
+    <div class="sketch-options">
+        <div class="sketch-btn-group">
+            <input id="color-picker" type="color" value="#000000">
+            <button id="pen"><img src="./assets/drawing.png" width="30px" height="30px"></button>
+            <button id="eraser"><img src="./assets/eraser.png" width="30px" height="30px"></button>
+            <button id="clear"><img src="./assets/trash.png" width="30px" height="30px"></button>     
         </div>
-        <div class="sketch-container"></div>
-    </div>   
-
-
-
+    </div>
+
+    <div class="size-controller">
+        <span id="size-display">Sketch Area : 16 x 16</span>
+        <input id="sketch-size" type="range"  min="16" max="64" value="16">
+    </div>
 
-
-
 </body>
 </html>
diff --git a/script.js b/script.js
@@ -1,66 +1,88 @@
-const container = document.querySelector(".sketch-container")
-const clearButton = document.querySelector("#clear")
-const defaultButton = document.querySelector("#default")
-const rgbButton = document.querySelector("#rgb")
-const size = document.querySelector("#grid-size")
+// CONSTANTS
+const DEFAULT_COLOR = '#000000'
 
+// DOM ELEMENTS
+const sketchBoard = document.querySelector('.sketch-board');
+const sketchContainer = document.querySelector('.sketch-container');
+const colorPicker = document.querySelector('#color-picker')
+const penTool = document.querySelector('#pen')
+const eraserTool = document.querySelector('#eraser')
+const clearTool = document.querySelector('#clear')
+const sketchSize = document.querySelector('#sketch-size');
+const sizeDisplay = document.querySelector('#size-display');
 
-function makeGrid(val) {  
-
-    for (i = 1; i <= (val * val); i++) {
-      const cell = document.createElement("div");
-      cell.classList.add("cell");
-      cell.style.width  = 635/val - 1.6 + 'px' 
-      cell.style.height = 600/val - 1.6 + 'px'
-
-
+// ink mode to determine which color to apply on sketch-cells
+let inkMode = DEFAULT_COLOR;
+
+// attaching required listeners initially
+window.onload = () => {
+  colorPicker.value = DEFAULT_COLOR
+  sketchSize.value = 16;
+}
+
+penTool.onclick = () => {
+  setInkMode(colorPicker.value)
+  sketchHandler();
+}
+
+colorPicker.onchange = (e) => setInkMode(e.target.value);
+eraserTool.onclick = () => setInkMode('#FFFFFF'); 
+clearTool.onclick = () => Array.from(sketchBoard.children).forEach(child => child.style.backgroundColor = null)
 
-      container.appendChild(cell);
-      cell.addEventListener("mouseover", () => {
-        cell.classList.add('hover')
-      })
 
-      defaultButton.addEventListener("click", () => {
-        cell.addEventListener("mouseover", () => {
-          cell.classList.add('hover')
-          cell.style.background = null
-        })
-      })
+// function to generate the grid with the given input (size)
+function generateGrid(size){
 
-      rgbButton.addEventListener("click", () => {
-        cell.addEventListener('mouseover', () => {
-          cell.style.background = generateRandomColor()
-        })
-      })
+  sketchBoard.style.gridTemplateColumns = `repeat(${size}, 1fr)`
+  sketchBoard.style.gridTemplateRows = `repeat(${size}, 1fr)`
 
-      clearButton.addEventListener('click', () => {
-        cell.classList.remove('hover')
-        cell.style.background = null
-    })
+  for (let i = 0; i < size * size; i++){
+    const cell = document.createElement('cell');
+    cell.className = 'sketch-cell';
+    sketchBoard.appendChild(cell);
   }
 }
 
-function generateRandomColor(){
-  let r = Math.floor(Math.random() * 256); // Random between 0-255
-  let g = Math.floor(Math.random() * 256); // Random between 0-255
-  let b = Math.floor(Math.random() * 256); // Random between 0-255
-  return 'rgb(' + r + ' , '+ g +','+ b +')'
+// function to handle sketch events
+function sketchHandler(){
+
+  // callbacks that can later be referenced to remove respective listeners
+  const highlightCallback = (e) => addColorToCell(e.target, inkMode)
+  const clearHighlightCallback = () => sketchBoard.removeEventListener('mouseover', highlightCallback);
+
+  // attaching listeners to the sketch-board 
+  sketchBoard.addEventListener('mousedown', (e) => {  
+    e.preventDefault()
+    addColorToCell(e.target, inkMode)
+
+    sketchBoard.addEventListener('mouseover', highlightCallback)
+  })
+
+  // detaching the mouseover events to prevent unnecessary sketch-cell coloring
+  // when the mousdown event is released
+  sketchBoard.addEventListener('mouseup', () => {
+    sketchBoard.removeEventListener('mouseover', highlightCallback)
+    window.removeEventListener('mouseup', clearHighlightCallback);
+  })
 }
 
-function getGridSize(){
-  let userInput = Number(prompt('Enter Your Grid-Size (16 - 64) :'))
-  if (userInput < 16 || userInput > 64) {
-    getGridSize()
-  }
-  return userInput
+// helper function to color the target sketch-cell
+function addColorToCell(cell, color){
+  if (!cell.classList.contains('sketch-cell')) return;
+  cell.style.backgroundColor = color;
 }
 
-size.addEventListener('click', () => {
-  container.innerHTML = ""
-  grid_size = getGridSize()
-  makeGrid(grid_size)
+// helper function to set ink mode
+function setInkMode(mode){
+  inkMode = mode
+}
 
+// attach listener to track slider input and update the grid respectively
+sketchSize.addEventListener('input', (e) => {
+  sketchBoard.replaceChildren()
+  generateGrid(+e.target.value)
+  sizeDisplay.textContent = `Sketch Area : ${e.target.value} x ${e.target.value}`
 })
 
-
-makeGrid(16)
+// initial grid render (16x16)
+generateGrid(16);
diff --git a/style.css b/style.css
@@ -1,95 +1,78 @@
+/* BODY */
 body{
     margin: 0;
-
+    padding: 0;
+    font-family: sans-serif;
 }
-
-.main-container{
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-top: 0px;
-    min-height: 800px;
-    background-color: peachpuff;
+/* HEADER CONTAINER */
+.header{
+    text-align: center;
+    height: 100px;
+
 }
 
+/* SKETCH CONTAINER */
 
 .sketch-container{
     display: flex;
-    flex-wrap: wrap;
     justify-content: center;
     align-items: center;
-    width: 635px;
-    height: 600px;
-
-
+}
 
+.sketch-board{
+    display: grid;
+    width: 500px;
+    height: 500px;
+    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
 }
 
-.header{
-    background-color: orangered;
-    min-height: 100px;
+
+/* SKETCH OPTIONS */
+
+.sketch-btn-group{
     display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
-}
-
-.title-image{
-    width: 450px;
-    height: 50px;
-}
+    gap: 20px;
 
-.cell{
-    border: 1px solid black;
-    display: flex;
+    position: absolute;
+    top: 260px;
+    left: 20px;
 
+    border: 2px solid black;
+    border-radius: 24px;
+    padding: 8px;
 }
 
-.cell:hover,
-.cellV:hover{
-    background-color: black;
-}
+#color-picker{
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
 
-.hover{
-    background-color: black;
+    border: none;
+    padding: 0;
+    background-color: transparent;
 }
 
+#pen,
+#eraser,
+#clear{
+    border: 1px solid white;
+    cursor: pointer;
+    background-color: transparent;
 
-.btn{
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin-right: 100px;
-    margin-left: -150px;
-    border: 3px solid black;
-    background-color: orangered;
-    border-radius: 50px;
-    gap: 10px;
-    height: 320px;
-    width: 10px;
-
-
-
-
 }
 
-.btn-container{
+.size-controller{
     display: flex;
-    flex-direction: column;
+    justify-content: center;
     align-items: center;
-    padding-top: 35px;
-    padding-right: 10px;
-    gap: 40px;
-}
-
-#grid-size,
-#clear,
-#default,
-#rgb{
-    width: 80px;
-    height: 30px;
-    border: 2px solid black;
-    border-radius: 15px;
-    font-family: sans-serif;
-    box-shadow: 8px 8px 0px #000000;
+    flex-direction: column;
+    gap: 6px;
+
+    position: absolute;
+    bottom: 40px;
+    left: 682px;
 }