Lab 16 Reflection

     Lab 16 was about creating a webpage with an image that had changeable blur and border properties. There were 2 major sections to the webpage: a section with 2 sliders and color input that changed the properties of the image and a section where the outcome could be seen on the image. To create the sliders, I used the <input> tag and set the type attribute to range. I again used the <input> tag to create the color input area but this time setting type to color. After setting up the input areas, I set up an <img> tag with src of the image I wanted and set up some initial CSS for it, including border-color, border-width, and blur. To set an initial blur for the image, I used the filter property of it's CSS and set it to blur(#px).  I created several functions in my JS that used DOM to modify the CSS of the image when the user interacted with the slider or color box.
     These skills are important for a web designer because they create new ways the user can interact with a website. Clicking on certain things is very common, to a point it has become boring. Letting the user use a slider on the other hand makes the experience less boring because now there is something to do besides clicking. Also, letting the user change CSS properties like color sets up the potential for more personal and customizable user experience, for example, if there were a game hosted on the webpage, these skills can be used to allow the user to customize their own character in that game.