Project Description
Uses CSS variables and HTML custom data attributes to adjust the filter blur property of an image.
Setting up the base web page
Your first task is to set up the base web page.
- In your portfolio/js folder, create a new sub-folder named image-blur-filter.
- Download the following file to this new portfolio/js/image-blur-filter folder. index.html
- Give it the filename index.html.
- Update the website logo, favicon, <title> tag and the <footer> with your own details.
This file contains all the necessary HTML and CSS for this project.
Note: Ensure the file is linked to the lunadoge.min.css stylesheet, and not the older lunadoge.css version.
Adding the JavaScript code
At the bottom of your index.html web page, just before the closing </body> tag, add the following JavaScript code within a <script> tag.
// Get controls const inputs = document.querySelectorAll('.controls input'); // Attach event listeners inputs.forEach(input => input.addEventListener('change', handleUpdate)); inputs.forEach(input => input.addEventListener('mousemove', handleUpdate)); function handleUpdate() { // dataset retrieves the suffix from the data object const suffix = this.dataset.sizing || ''; // Set a style property (css variable from the page); document.querySelector(".theme-js").style.setProperty(`--${this.name}`, this.value + suffix); }
Save your file and verify it works correctly.
Upload the image-blur-filter folder as a sub-folder of the portfolio/js folder on your GitHub account.