Octavia/odin-etch-a-sketch
Watch
1
0
Fork
You've already forked odin-etch-a-sketch
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add reset button

Browse source
This commit is contained in:
lolabird 2023-11-10 13:28:36 -07:00
commit 4fe377d9e1
2 changed files with 17 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

17
index.html
View file

@ -12,14 +12,15 @@
<div class="area"> <div class="area">
<div class="user-input"> <div class="user-input">
<button id="rgbColor">RGB</button> <button class="pen" id="rgbColor">RGB</button>
<button id="blackColor">Black</button> <button class="pen" id="blackColor">Black</button>
<button id="whiteColor">White</button> <button class="pen" id="whiteColor">White</button>
<button id="shade">Shade</button> <button class="pen" id="shade">Shade</button>
<button id="tint">Tint</button> <button class="pen" id="tint">Tint</button>
<button id="opacity">Opacity</button> <button class="pen" id="opacity">Opacity</button>
<button id="trans">Transparent</button> <button class="pen" id="trans">Transparent</button>
<button id="erase">Erase</button> <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> <label for="custom-color">Pick a color:</label>

11
script.js
View file

@ -2,8 +2,9 @@ const container = document.querySelector(".container");
const conWidth = container.clientWidth; const conWidth = container.clientWidth;
const grid = document.createElement("div"); const grid = document.createElement("div");
const gridSlider = document.querySelector("#gridSlider"); const gridSlider = document.querySelector("#gridSlider");
const buttons = document.querySelectorAll("button"); const buttons = document.querySelectorAll(".pen");
const colorPicker = document.querySelector("#custom-color"); const colorPicker = document.querySelector("#custom-color");
const reset = document.querySelector("#reset");
let colorValue = "black"; let colorValue = "black";
let numGrid = gridSlider.value; let numGrid = gridSlider.value;
let sliderLabel = document.querySelector("#sliderLabel"); let sliderLabel = document.querySelector("#sliderLabel");
@ -20,6 +21,9 @@ let isWhite;
let isErase; let isErase;
createGrid();
buttons.forEach((button) => { buttons.forEach((button) => {
button.addEventListener ("click", changeColor); button.addEventListener ("click", changeColor);
}); });
@ -31,6 +35,8 @@ colorPicker.addEventListener("change", changeColor);
colorPicker.addEventListener("input", changeColor); colorPicker.addEventListener("input", changeColor);
colorPicker.addEventListener("click", changeColor); colorPicker.addEventListener("click", changeColor);
reset.addEventListener("click", getGridDimensions);
function createGrid() { function createGrid() {
const gridArea = numGrid ** 2; const gridArea = numGrid ** 2;
@ -191,6 +197,3 @@ function makeTransparent(value) {
return num; return num;
} }
createGrid();