Project Description
Uses CSS variables and HTML custom data attributes to adjust the filter blur property of an image.
You can view a completed version of the project here.
Your project folder
In your portfolio/js folder is a folder named image-blur-filter that contains all the files you need for this JavaScript project.
In VS Code, open the project’s index.html web page and ensure the hyperlinks and personal details have been correctly updated.
Adding the JavaScript code
Follow the steps below to add the JavaScript code to the index.html file.
- Scroll down the web page until you see an empty pair of opening <script> and closing </script> tags.
- Click inside the empty pair of tags and paste the JavaScript code below.
// 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 index.html file.
- Display the file in a web browser and verify it works correctly.
Uploading your project to GitHub
Upload the image-blur-filter folder as a sub-folder of the portfolio/js folder on your GitHub account.