Lab 6 Reflection

     Lab 6 was very much the same thing as Lab 5 except for one new addition - a stop animation button. We were to create the same lab as Lab 5 but this time there would have to be a new button which stopped the animation from finishing. I first made a copy of the code from Lab 5 since it had all the framework I needed and changed some of the HTML to reflect that it was Lab 6. Next I created a new button in the HTML, with id="stop", and started a .click(function(){}) for it in jQuery. From the previous lab, I stored the square in a global variable called shape, so to stop the animation of the square, I needed only this single line of jQuery inside the button's event listener, shape.stop(true);. The .stop() function stops any animation the selected element, in this case shape, is running. It takes in a boolean for its parameter and to get the animation to stop upon the click of the button, I had to specify this boolean as true.
     Now the animation would stop but some animations done afterwords would look weird. A way to resolve this was by creating a reset button. Again, I added a button to the HTML, id="reset", and opened up a .click() function for it in jQuery. However, resetting the square would be a bit more complicated than stopping animation. First, I needed to create a global variable, var shapeCopy, and store a .clone() of the shape variable, which itself stores the square. In all, it looked like var shapeCopy = shape.clone();. What .clone() does is create a clone of the selected element in the state it was in when cloned and storing it in a global variable means that the clone can be referenced to in any part of the code via the variable. This comes in handy for the reset's .click() function since now I can store a clone of this variable in a local variable, var replacement = shapeCopy.clone();, and use this line of jQuery to reset the shape, shape.replaceWith(replacement);. This line of code replaces the selected element with the element in parenthesis. The animations fail to work, however, after the replacement so using this line, shape = replacement, I enable animations to work once more. Since shape was replaced with replacement, shape.animate() didn't work since shape no longer existed but now that replacement, what replaced shape, is stored in shape, animations work once more.
     These skills are important for a web designer since sometimes the user might not have a nice experience using animations, such as when their Internet has low bandwidth and doesn't allow for it, so they must be given an option to disable it. This means websites you build can cater to all the needs and limitations of your audience, leaving as little left behind in terms of accessibility. Also, knowing how to reset elements of your page after they've been changed makes it convenient for the user to not have to refresh to go back to the original state themselves. Overall, these skills allow you to create a  smooth experience for your audience.