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 text and styles to footer and add reset function to slider value

Browse source
This commit is contained in:
lolabird 2023-11-13 03:52:19 -07:00
commit 2f8e7449d2
3 changed files with 9 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -69,6 +69,8 @@
<footer> <footer>
Created by <a href="https://andrindie.com">Octavia Nichols</a> Created by <a href="https://andrindie.com">Octavia Nichols</a>
for <a href="https://www.theodinproject.com/lessons/foundations-etch-a-sketch">The Odin Project</a>.
Check out the code on <a href="https://github.com/Lolabird/odin-etch-a-sketch">GitHub</a>.
</footer> </footer>

1
script.js
View file

@ -62,6 +62,7 @@ function resetGrid() {
transSlider.value = 1; transSlider.value = 1;
transSlider.style.backgroundColor = "rgb(180, 254, 235)"; transSlider.style.backgroundColor = "rgb(180, 254, 235)";
rangeSlider.style.setProperty('--canvas-color', "rgb(180, 254, 235)"); rangeSlider.style.setProperty('--canvas-color', "rgb(180, 254, 235)");
rangeSlider.style.setProperty('--range-value', `100%`);
transLabel.textContent = transSlider.value transLabel.textContent = transSlider.value
getGridDimensions(); getGridDimensions();

6
style.css
View file

@ -42,11 +42,17 @@ main {
footer { footer {
width: 100%; width: 100%;
font-size: 16px;
padding: 15px 0 10px;
background-color: #111; background-color: #111;
opacity: .8; opacity: .8;
flex: 0 0 auto; flex: 0 0 auto;
} }
a {
color: #b4feeb;
}
button, .container, .color-input, .knob-shadow, .range-slider { button, .container, .color-input, .knob-shadow, .range-slider {
box-shadow: 1px 2px 10px 1px #555; box-shadow: 1px 2px 10px 1px #555;
} }