Lab 1 - Click Me!
Concept
Button labeling was brought up in class, including annoying labels such as “Click Me”, which made me think of other ways buttons could be annoying. I decided to base my first lab around the idea of an annoying button. To make the annoyance go beyond the label, I decided to make the button move to a random location on the screen when hovered over.
Window.onresize and Resizing the Button
I started by making the button. Even though I wanted to make an annoying button, I still wanted to make it responsive to the browser’s window size. The button starts in the center of the window, and is scaled based on the height and width of the window. The javascript function “resizeSquare(square)” takes in the element that needs to be resized, and makes it a square that is 10% of the length of the shortest dimension of the window. The function is called when the window.onresize event is fired. After
Mouseover and Tracking Misses
The button is randomly positioned based on percentages of the window’s height and width when the mouse hovers over it. This is done using its “top” and “left” CSS values. There is a very short animation that plays to give a sense of motion, but still make it seem impossible to catch. The javascript script also tracks how many times the user has missed the button. After 5 misses (or 5 hits), the text at the top of the screen is replaced with a bold and italicized hit and miss counter by changing the element’s “.innerHTML” value.
Onclick
I was going to make the button have no onclick event, but I didn’t know before hand that I had to use window.onresize and couldn’t add an event listener to window, so I still needed one more addEventListener() call. The onclick event listener works similar to the onmouseover one. This allows the user to press the button if they are using a touchscreen or if they are really fast with a mouse. The hit counter is incremented and the text is updated similarly to the onmouseover event.