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 knob and reorder divs

Browse source
This commit is contained in:
lolabird 2023-11-11 07:39:44 -07:00
commit 8acb8377a6
3 changed files with 68 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

59
index.html
View file

@ -11,37 +11,48 @@
<div class="area">
<div class="user-input">
<button class="pen" id="rgbColor">RGB</button>
<button class="pen" id="blackColor">Black</button>
<button class="pen" id="whiteColor">White</button>
<button class="pen" id="shade">Shade</button>
<button class="pen" id="tint">Tint</button>
<button class="pen" id="opacity">Opacity</button>
<button class="pen" id="trans">Transparent</button>
<button class="pen" id="erase">Erase</button>
<button id="gridToggle">Grid</button>
<button id="reset">Reset</button>
<div class="pen-input">
<div class="pen-color">
<button class="pen" id="blackColor">Black</button>
<button class="pen" id="whiteColor">White</button>
<button class="pen" id="rgbColor">RGB</button>
<div id = "col-picker">
<label for="custom-color">Pick a color:</label>
<input type="color" id="custom-color" value="#ff0000">
<div class="col-picker">
<label for="custom-color">Pen color:</label>
<input type="color" id="custom-color" value="#ff0000">
</div>
<button class="pen" id="erase">Erase</button>
</div>
<div id = "background-col-picker">
<label for="back-col-picker">Pick a color:</label>
<input type="color" id="back-col-picker" value="#ff0000">
</div>
<div class="slider">
<label for="gridSlider">Grid Size: <span id="sliderLabel"></span></label>
<input name="gridSlider" id="gridSlider" type="range" min="1" max="100" value="16">
<div class="pen-tools">
<button class="pen" id="shade">Shade</button>
<button class="pen" id="tint">Tint</button>
<button class="pen" id="opacity">Opacity</button>
<button class="pen" id="trans">Transparent</button>
</div>
</div>
<div class="container">
<div class="container"></div>
<div class="grid-input">
<div class="grid-tools">
<div class="slider">
<label for="gridSlider">Grid Size: <span id="sliderLabel"></span></label>
<input name="gridSlider" id="gridSlider" type="range" min="1" max="100" value="16">
<div class="range-knob" id="knob">
<div class="range-knotch" id="knotch"></div>
</div>
</div>
<div class="background-col-picker">
<label for="back-col-picker">Canvas color:</label>
<input type="color" id="back-col-picker" value="#ff0000">
</div>
<button id="gridToggle">Grid</button>
<button id="reset">Reset</button>
</div>
</div>
</div>

3
script.js
View file

@ -36,7 +36,7 @@ colorPicker.addEventListener("change", changeColor);
backColorPicker.addEventListener("input", pickBackground);
reset.addEventListener("click", resetGrid);
gridSlider.addEventListener("input", getGridDimensions);
gridSlider.addEventListener("change", getGridDimensions);
function resetGrid() {
@ -69,7 +69,6 @@ function createGrid() {
sliderLabel.textContent = numGrid;
grid.classList.add("grid", "grid-on");
//grid.classList.add("grid-on");
grid.style.width = gridWidth + '%';
grid.style.height = gridWidth + '%';
grid.style.opacity = 0.9;

37
style.css
View file

@ -5,11 +5,18 @@ body{
}
.area{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 90vh;
}
.pen-input, .grid-input {
display: flex;
flex-direction: column;
justify-content: center;
margin: 20px;
}
.container{
border: 1px solid #bbb;
height: 500px;
@ -19,12 +26,6 @@ body{
background: white;
}
.user-input {
display: flex;
justify-content: center;
margin: 20px;
}
.slider {
display: flex;
flex-direction: column;
@ -32,6 +33,28 @@ body{
align-items: center;
}
.range-knob {
width: 50px;
height: 50px;
border-radius: 50%;
border: 1px solid #111;
cursor: pointer;
background: #bbb;
box-shadow: 1px 2px 10px 1px #555;
}
.range-knotch {
width: 10px;
height: 10px;
border-radius: 50%;
cursor: pointer;
background: #111;
position: relative;
top: 15%;
left: 50%;
transform: translate(-50%, -50%);
}
.grid {
box-sizing: border-box;
}