Video Lesson 05

This semester our class will be running 1x per week, online. In order to make the most of our weekly meeting, and to prevent "Zoom Fatigue", I will be teaching the class using a "flipped classroom" model. Here's how this model will operate in our class this semester:

  • Before most classes you will be asked to watch a video lesson - the lesson for this week can be found below.
  • After you watch all of the videos in today's lesson you will have a small task to perform - we will refer to these as "micro assignments". These "micro" assignments are fairly straightforward and short and are directly related to the content covered in the video lesson for the week.
  • These "micro" assignments are due before our next class meeting. You cannot turn in a "micro" assignment late. We are setting up these assignments in this way so that everyone has a baseline level of knowledge of the topics being covered in the video lesson. This will allow us to make the most of our time together during our weekly course meeting.
  • During our course meeting we will cover new topics during the first half of class. During the second half of class we will focus on working on a larger programming assignment together and in small groups.

addEventListener

setTimeout and setInterval

Minification and Obfuscation

Micro Assignment #05

Write a web page that has four buttons and a graphic (your choice of graphic). Each button will control some aspect of the page using setTimeout or setInterval

  • Create a button that will add a random box to the page after 1 second has elapsed. The box should be randomly sized and randomly colored (you can choose how to do this, I'm not super worried about the visuals - I'm mainly concerned that you can create the boxes after a delay)
  • Create a box on the screen that spins around itself. Initially the box is not spinning, but when the "spin left" or "spin right" buttons it should begin spinning slowly in that direction. Hint: use the CSS transform rule to do this. For example, to rotate a box by 45 degrees you could use this rule: transform: rotate(45deg)
  • Hint: use a variable to keep track of the current angle of your box. Update this angle every few milliseconds and change the CSS rule on the box to show this.
  • Hint 2: if you're using setInterval to do this make sure you clear your interval before you try spinning or stopping!

Here's an example of how your page should work:


When you are finished please upload a copy of this file to your i6 website using the process described in Assignment 01. Name your file micro_assignment_05.html and ensure that it is accessible from within your webdev folder. You will also want to submit a link to your work on NYU Classes under the 'Assignments' tool. You will want to include this project as a link on your homepage (also described in Assignment 01)