diff --git a/assets/drawing.png b/assets/drawing.png new file mode 100644 index 0000000..e504008 Binary files /dev/null and b/assets/drawing.png differ diff --git a/assets/eraser.png b/assets/eraser.png new file mode 100644 index 0000000..c256b11 Binary files /dev/null and b/assets/eraser.png differ diff --git a/assets/sketch-black.png b/assets/sketch-black.png deleted file mode 100644 index 3d103d1..0000000 Binary files a/assets/sketch-black.png and /dev/null differ diff --git a/assets/sketch-white.png b/assets/sketch-white.png deleted file mode 100644 index feeb862..0000000 Binary files a/assets/sketch-white.png and /dev/null differ diff --git a/assets/trash.png b/assets/trash.png new file mode 100644 index 0000000..3d355f2 Binary files /dev/null and b/assets/trash.png differ diff --git a/index.html b/index.html index 47e288d..b830c1d 100644 --- a/index.html +++ b/index.html @@ -3,35 +3,33 @@ - Etch-A-Sketch. - + Etch-A-Sketch - - +
- +

Paintr

+
+ +
+
-
-
-
- - - - -
- +
+
+ + + +
-
-
- - - +
+ +
+ Sketch Area : 16 x 16 + +
- - \ No newline at end of file diff --git a/script.js b/script.js index cfafe0a..8480130 100644 --- 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) \ No newline at end of file +// initial grid render (16x16) +generateGrid(16); \ No newline at end of file diff --git a/style.css b/style.css index 06e558c..2c357a5 100644 --- 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; }