This is an app in which you can adjust the border width, color and blur of a photo. I made it as part of Wes Bos' JavaScript30 course to practice using CSS variables and then updating them with JavaScript. I really enjoyed this little project and learnt lots!
- I used the HTML range input and color input for the first time.
- I learnt that when you use
querySelector / querySelectorAll
it returns you a Node List which is very similar to an array except there are a lot less methods you can use on it.forEach
is one of the methods you can use on a Node List and I used this one today. - I learnt that there is an
EventListener
called 'change'. - I learnt that
document.documentElement
returns you the element which is the root element of the HTML document. - I learnt how to update a CSS variable with JavaScript.
- HTML
- CSS
- JavaScript
Clone the repo as instructed below
No prerequisites
- Clone the repo
git clone https://github.com/katiehawcutt/photo-frame-editor.git
- Run the index.html in a browser
Adjust the border width, border color and blur of the photo using the inputs.