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

Adjust tint and shade behaviors and rearrange input and canvas

Browse source
This commit is contained in:
lolabird 2023-11-12 15:36:08 -07:00
commit e026c24975
2 changed files with 12 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

5
index.html
View file

@ -34,8 +34,6 @@
</div> </div>
</div> </div>
<div class="container"></div>
<div class="grid-input"> <div class="grid-input">
<h3 class="tool-labels">Grid Tools</h3> <h3 class="tool-labels">Grid Tools</h3>
<div class="grid-tools"> <div class="grid-tools">
@ -62,6 +60,9 @@
</div> </div>
</div> </div>
</div> </div>
<div class="container"></div>
</main> </main>
<footer> <footer>

9
script.js
View file

@ -230,7 +230,12 @@ function randomizeColor() {
function tintColor(value) { function tintColor(value) {
if (!value) {
value = container.style.backgroundColor
}
let num = value.match(/\d+/g); let num = value.match(/\d+/g);
r = +num[0] + (0.25 * (255 - +num[0])); r = +num[0] + (0.25 * (255 - +num[0]));
g = +num[1] + (0.25 * (255 - +num[1])); g = +num[1] + (0.25 * (255 - +num[1]));
b = +num[2] + (0.25 * (255 - +num[2])); b = +num[2] + (0.25 * (255 - +num[2]));
@ -240,6 +245,10 @@ function tintColor(value) {
function shadeColor(value) { function shadeColor(value) {
if (!value) {
value = container.style.backgroundColor
}
let num = value.match(/\d+/g); let num = value.match(/\d+/g);
r = +num[0] * .75; r = +num[0] * .75;
g = +num[1] * .75; g = +num[1] * .75;