From 72201a8576f9192ba8e9d65f2e9e16a75e0d412e Mon Sep 17 00:00:00 2001 From: Mohammed Numaan <138296610+mohammednumaan@users.noreply.github.com> Date: Thu, 15 Feb 2024 11:59:56 +0530 Subject: [PATCH 1/2] code: updated ui and added new features --- assets/drawing.png | Bin 0 -> 6667 bytes assets/eraser.png | Bin 0 -> 819 bytes assets/sketch-black.png | Bin 2080 -> 0 bytes assets/sketch-white.png | Bin 2289 -> 0 bytes index.html | 33 +++++-------- script.js | 97 ++++++++++++++++++------------------- style.css | 103 ++++++++++++++-------------------------- 7 files changed, 94 insertions(+), 139 deletions(-) create mode 100644 assets/drawing.png create mode 100644 assets/eraser.png delete mode 100644 assets/sketch-black.png delete mode 100644 assets/sketch-white.png diff --git a/assets/drawing.png b/assets/drawing.png new file mode 100644 index 0000000000000000000000000000000000000000..e50400894402af80e47b8aa612572f077f20630d GIT binary patch literal 6667 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 RtABTV16`9lbvpKl{{pdFBO?F+ literal 0 HcmV?d00001 diff --git a/assets/eraser.png b/assets/eraser.png new file mode 100644 index 0000000000000000000000000000000000000000..c256b11985114a1e03cdbf662e358a45aee7c333 GIT binary patch literal 819 zcmV-31I+x1P)DW` zK~#90?V7oY6j2n0zv^~DLIN<)vN%E7Ob_h9>fz z3t^IG;++a%3VZq1hu}lLwITSFZ(Rt-@h{(+5JJkU41_uYon> zhgxdUVKweU{z8eoB-;mO6^K^VAy@fnqv0I+5_XY3@IZlVS?za`zi2co?s=0w@KAxU zSzB%8FExxoVP~P~00c#{_n7#o-+ zeF)cxBrjY=R|xA^y3jfma)V`u-ZRp?pSKoxW6W|o#)dV7kW5}k8A5V-Aw>vkZ@&oSJYpf(OPe-z~7)T)qGR002ovPDHLkV1nAfZ?pga literal 0 HcmV?d00001 diff --git a/assets/sketch-black.png b/assets/sketch-black.png deleted file mode 100644 index 3d103d1db3cf551b370e6c0f2097d891ba28357c..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2080 zcmaJ?dpHyNA71V$mL#P)PNGAuF-IC((em4J=`1rPm(!3-3ukVbxfY^yS|)NmrPxAA zw9)30jz()axy@n|n#PPA!i=-$Ip=x$ou}vb`~2~Fzwe*#=Xt;Hd-bG;tA@IsIsgFB zK>X(z3II?jl)qtWD)N2o8LdeUN_c04mzsQ%)Pk}B0M$Xnv7=rICE}5TQ96Sq6&X-__2&!LFWFGyX?c< zLKI9ZvQ6AFP_N|Zh(*;nhKxd{pZ7rGvKC{k|r#r+}ao&Q_2#iN}XO-Z$uU?m*Kwb?gO>BaaSGG_|p&of@H+j)pnD^eVg`t zBLwQe-{g$BV~RfQ6v_68&S~Mv zf%w>JaJ%E?l3Fdb$7l*4)s@|q@NoKw5duH%+UEwz1%Y*1k+2xbIdh)HU`$UNEB~S~Il3ms#zup!*eold2McJ>vM*B! zX9yMKr?t_$@qWA}TC01G(=RQPckaAa8G%9Y<-BFxZzcV$j|vxvD;Q!J7^YI@l{2|x zJ|)pfG0EYNrL8oKY2IE3MNrY)du=<#u=?(0&F#`QequI!#X})dMeLf<^vI+|g5wY- zOy(UImDwd=PM$(l#!{0|wrPAJxB&gTM5gtDu&^V+%QO$QJK}vqg;k1LZMOnz}9 zSUkI^o0HV%+KCp4`1^0^ z@)zqFLIOAvTG)yGAe33RZo*!t9e|>mca~v46HbK}Cq}%t6QS4Rod!!Q{pS@!j)wa`Q6*AB>mHtlGrfmgSz1iHjz_P)k@k;HF8p%+Nmz!G%4|FRSzm(Jy{2HTm^6&bigDe6RVV+Y} zABXPA@=y2~kG2w~l9kuaSBeALAnkPBRA9!EhDZ$mj;r_vBa#};+j1Y&e!p*ZMNH1J zZ8U3BC9l3QInGtO=$C>Sa8uZg&GQUUvqTlg zxhgDeQfdzAkEk3lJ6o}G#bz9;89WMwzcE0CbN434`UKG*OI)`Kp%(+;n4GXR3 zD=+`g(X?OpfL|UY8bmTWeC&J+C=1;A+f-H~PG47Nd4_~fS@*+%7bXvka9TFDe(<>) zI8AezHIzLn-2&EWy%X68g}_WUcf9oeYP5g3jvDhrIkaT&s0ZbvrOiUnm3a%@h~cVP zO=XvP2iXOC`|FRSnicyt0RGdEY|I=#9nTN?EIu3nC?{vVYZ2zN7tA_&V+_ByU7EKf zD)w9C-)a-ESu^N(?H?C%xnz1bE@W@}noMQeAr@OYv8@^8iCe>>IYJ2*k@aYL8hu0q35;kb%?qdmQP*!3&19{<;H1g7s=Wyt_6L8pH z@y&pStJNjvwZo;o%F}xqXW38(Rzzl~<$>C=NZ)aP;PCM8>n{qJp8BBG0nVO13GksZmTq{Zp%Gu!`}?xKDb_gL@SU8wu@=6_ljh>_TvMjE`><^X*7>Diyn zdy8@4z;)&Silu+KCA@xaO<&NUmzI=u#uv!^{=1%ofx+F(R>RRN!m)fAk`(gJrP&V_ zv2$fc`$q89Pw{4n9t|hnSBGK_hCQe`NNn^qkj^1VeO0+`t;wSj$8hu*X5yOy`lpTV zqbIW3HRq(J(u4x7Y$Js21oYjb@|~6QxU diff --git a/assets/sketch-white.png b/assets/sketch-white.png deleted file mode 100644 index feeb8625e29e9aa6be58d75d3f2495776744ddba..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2289 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 F?=SU?RUQBU diff --git a/index.html b/index.html index 47e288d..7238ffd 100644 --- a/index.html +++ b/index.html @@ -3,35 +3,28 @@ - Etch-A-Sketch. - + Etch-A-Sketch - - +
- +

Paintr

+
+ +
+
-
-
-
- - - - -
+
+
+ + +
-
-
- - - +
- - \ No newline at end of file diff --git a/script.js b/script.js index cfafe0a..bd16c95 100644 --- a/script.js +++ b/script.js @@ -1,66 +1,61 @@ -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") +const sketchBoard = document.querySelector('.sketch-board'); +const sketchContainer = document.querySelector('.sketch-container'); +const colorPicker = document.querySelector('#color-picker') +const eraser = document.querySelector('#eraser') +const pen = document.querySelector('#pen') -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' - - +let inkMode = '#000000' - container.appendChild(cell); - cell.addEventListener("mouseover", () => { - cell.classList.add('hover') - }) +function generateGrid(size){ - defaultButton.addEventListener("click", () => { - cell.addEventListener("mouseover", () => { - cell.classList.add('hover') - cell.style.background = null - }) - }) + for (let i = 0; i < size; i++){ + for (let j = 0; j < size; j++){ + const cell = document.createElement('cell'); + cell.className = 'sketch-cell'; + cell.style.width = (500/size) - 1.6 + 'px' + cell.style.height = (500/size) - 1.6 + 'px' + sketchBoard.appendChild(cell); + } + } +} - rgbButton.addEventListener("click", () => { - cell.addEventListener('mouseover', () => { - cell.style.background = generateRandomColor() - }) - }) - clearButton.addEventListener('click', () => { - cell.classList.remove('hover') - cell.style.background = null +function handleEvents(){ + + const highlightCallback = (event) => addColorToCell(event.target, inkMode) + + pen.addEventListener('click', (e) => { + + inkMode = colorPicker.value + + sketchBoard.addEventListener('mousedown', (e) => { + e.preventDefault() + addColorToCell(e.target, inkMode) + sketchBoard.addEventListener('mouseover', highlightCallback) }) - } -} + + sketchBoard.addEventListener('mouseup', () => { + sketchBoard.removeEventListener('mouseover', highlightCallback ) + }) + + }) + + colorPicker.addEventListener('click', (e) => inkMode = e.target.value) + colorPicker.addEventListener('change', (e) => inkMode = e.target.value) + eraser.addEventListener('click', () => inkMode = '#FFFFFF') -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 getGridSize(){ - let userInput = Number(prompt('Enter Your Grid-Size (16 - 64) :')) - if (userInput < 16 || userInput > 64) { - getGridSize() - } - return userInput + +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) -}) +generateGrid(16) +handleEvents() -makeGrid(16) \ No newline at end of file +window.addEventListener('load', () => colorPicker.value = '#000000') \ No newline at end of file diff --git a/style.css b/style.css index 06e558c..a134a95 100644 --- a/style.css +++ b/style.css @@ -1,95 +1,62 @@ -body{ - margin: 0; +/* HEADER CONTAINER */ +.header{ + text-align: center; + height: 100px; } -.main-container{ - display: flex; - justify-content: center; - align-items: center; - margin-top: 0px; - min-height: 800px; - background-color: peachpuff; -} - +/* SKETCH CONTAINER */ .sketch-container{ display: flex; - flex-wrap: wrap; justify-content: center; align-items: center; - width: 635px; - height: 600px; - - - } -.header{ - background-color: orangered; - min-height: 100px; +.sketch-board{ display: flex; - justify-content: center; - align-items: center; -} - -.title-image{ - width: 450px; - height: 50px; -} - -.cell{ + flex-wrap: wrap; + width: 500px; + height: 500px; border: 1px solid black; - display: flex; - -} - -.cell:hover, -.cellV:hover{ - background-color: black; } -.hover{ - background-color: black; +.sketch-cell{ + border: 1px solid black; } +/* SKETCH OPTIONS */ -.btn{ +.sketch-btn-group{ display: flex; flex-direction: column; + justify-content: center; 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; - - + gap: 20px; - + position: absolute; + top: 300px; + + border: 2px solid black; + border-radius: 24px; + padding: 8px; } -.btn-container{ - display: flex; - flex-direction: column; - align-items: center; - padding-top: 35px; - padding-right: 10px; - gap: 40px; +#color-picker{ + width: 24px; + height: 24px; + cursor: pointer; + + border: none; + padding: 0; + background-color: transparent; } -#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; +#pen, +#eraser{ + border: 1px solid white; + cursor: pointer; + background-color: transparent; + } From b0e21ee5d827e9b3c760eb0bf39f7c61678e4093 Mon Sep 17 00:00:00 2001 From: Mohammed Numaan <138296610+mohammednumaan@users.noreply.github.com> Date: Thu, 15 Feb 2024 15:45:48 +0530 Subject: [PATCH 2/2] updated ui and code --- assets/trash.png | Bin 0 -> 12006 bytes index.html | 7 +++- script.js | 101 ++++++++++++++++++++++++++++++----------------- style.css | 32 +++++++++++---- 4 files changed, 94 insertions(+), 46 deletions(-) create mode 100644 assets/trash.png diff --git a/assets/trash.png b/assets/trash.png new file mode 100644 index 0000000000000000000000000000000000000000..3d355f2d15224004f544ce70d81bec1214afbdb2 GIT binary patch literal 12006 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 - +
+
+ Sketch Area : 16 x 16 + +
+ \ No newline at end of file diff --git a/script.js b/script.js index bd16c95..8480130 100644 --- a/script.js +++ b/script.js @@ -1,61 +1,88 @@ +// 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 eraser = document.querySelector('#eraser') -const pen = document.querySelector('#pen') +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'); + +// 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(); +} -let inkMode = '#000000' +colorPicker.onchange = (e) => setInkMode(e.target.value); +eraserTool.onclick = () => setInkMode('#FFFFFF'); +clearTool.onclick = () => Array.from(sketchBoard.children).forEach(child => child.style.backgroundColor = null) + +// function to generate the grid with the given input (size) function generateGrid(size){ - for (let i = 0; i < size; i++){ - for (let j = 0; j < size; j++){ - const cell = document.createElement('cell'); - cell.className = 'sketch-cell'; - cell.style.width = (500/size) - 1.6 + 'px' - cell.style.height = (500/size) - 1.6 + 'px' - sketchBoard.appendChild(cell); - } + sketchBoard.style.gridTemplateColumns = `repeat(${size}, 1fr)` + sketchBoard.style.gridTemplateRows = `repeat(${size}, 1fr)` + + for (let i = 0; i < size * size; i++){ + const cell = document.createElement('cell'); + cell.className = 'sketch-cell'; + sketchBoard.appendChild(cell); } } - -function handleEvents(){ +// 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); - const highlightCallback = (event) => addColorToCell(event.target, inkMode) + // attaching listeners to the sketch-board + sketchBoard.addEventListener('mousedown', (e) => { + e.preventDefault() + addColorToCell(e.target, inkMode) - pen.addEventListener('click', (e) => { - - inkMode = colorPicker.value - - sketchBoard.addEventListener('mousedown', (e) => { - e.preventDefault() - addColorToCell(e.target, inkMode) - sketchBoard.addEventListener('mouseover', highlightCallback) - }) + sketchBoard.addEventListener('mouseover', highlightCallback) + }) - sketchBoard.addEventListener('mouseup', () => { - sketchBoard.removeEventListener('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); }) - - colorPicker.addEventListener('click', (e) => inkMode = e.target.value) - colorPicker.addEventListener('change', (e) => inkMode = e.target.value) - eraser.addEventListener('click', () => inkMode = '#FFFFFF') - } - +// helper function to color the target sketch-cell function addColorToCell(cell, color){ if (!cell.classList.contains('sketch-cell')) return; cell.style.backgroundColor = color; } +// 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}` +}) -generateGrid(16) -handleEvents() - -window.addEventListener('load', () => colorPicker.value = '#000000') \ 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 a134a95..2c357a5 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,9 @@ +/* BODY */ +body{ + margin: 0; + padding: 0; + font-family: sans-serif; +} /* HEADER CONTAINER */ .header{ text-align: center; @@ -14,16 +20,12 @@ } .sketch-board{ - display: flex; - flex-wrap: wrap; + display: grid; width: 500px; height: 500px; - border: 1px solid black; + box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; } -.sketch-cell{ - border: 1px solid black; -} /* SKETCH OPTIONS */ @@ -35,7 +37,8 @@ gap: 20px; position: absolute; - top: 300px; + top: 260px; + left: 20px; border: 2px solid black; border-radius: 24px; @@ -53,10 +56,23 @@ } #pen, -#eraser{ +#eraser, +#clear{ border: 1px solid white; cursor: pointer; background-color: transparent; } +.size-controller{ + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + gap: 6px; + + position: absolute; + bottom: 40px; + left: 682px; +} +