This is an old version of the class. Please see the 2021 version instead.

Homework 2: Handling Input Events

Assigned: 9/10/2020; Due 9/22/2020 at 1:30pm ET


In this assignment, you will be creating a placeholder (temporary) web page with advanced input handling. The events will be just manipulating html div elements, which will be replaced with handling events over graphics objects in homework 3. The goal of this assignment is to learn how to handle multiple kinds of events that may interact with each other, and deal with the required interactions among them. Like homework 1, you must write this assignment without using external packages - just regular JavaScript (and html and css).

You should build this homework as a new page in a subfolder, linked off of the CREATE YOUR OWN link on the "Scotty Shirts U Illustrate (SSUI)" web site from homework 1. We have supplied a starter html page and its CSS page. Please put the code for homework 2 into a new JavaScript file called input.js, all of which will be in your new subfolder.

Hint: Naturally, your touch event handlers will not work on a regular laptop, so that will most-likely need to be tested using a smartphone or tablet (unless you happen to have a touch screen on your laptop). The netlify link you created for your repository might be helpful for running your page on that device.


This homework will only have 1 page, which we supplied as index.html - you should put this in a subdirectory and link to it from your CREATE YOUR OWN button from homework 1. We are also supplying the inputstyle.css file that goes with it. We supplied an empty input.js file that you will put your code in. You will download the file which will contain the following starter files:

In addition, we have supplied the following for your reference, also in the zip file:

Detailed Requirements

The supplied html file contains 3 "div"s which are what your code should operate on, however your code should work no matter how many divs there are (it shouldn't be tied to these specific 3 divs), but you can assume they will all be of the same target class. Various mouse or touch events should cause different things to happen to the divs - they become selected or de-selected on clicks, they move if the user presses down and drags (or if the user double-clicks on them), and two fingers can be used to change their size. However, it gets more complicated to keep these behaviors from interfering with each other, and to support error cases and aborting. In particular:

Extra Credit

Turn In

Please have a README file in your subfolder (different from the README for hw1), which can be in plain text, Microsoft Word, or pdf format (NOT .md this time), which should contain:

Unlike homework 1, for this homework, please upload this README file to Canvas by 1:30pm on 9/22/2020, in addition to having the file in your subfolder.