Davidless / DOM-II

DOM II

Topics:

• Events
• The Event Object
• Event Handlers
• click
• mousedown
• mouseup
• scroll
• keydown

Objectives

• Manipulate the DOM in response to user events using JavaScript
• Use event listeners to handle events

Beginning Project

• You can open your index.html file in your browser to see your work, but you may also work in codepen.io first if you'd like
• All your work will be done in index.js
• Make sure to read both the index.html and styles.css files so that you know what you're working with
• Organization of your code in index.js will be up to you. There will be suggestions provided later in the day

Project Description

You will have two separate commits for this lab

rockets:

• When a block is clicked, it should go to the top of the stack

travelers:

• While a mouse is clicked down on a box, it should move to the right
• When the mouse button is released, it should travel back to its original position
• A mouse down that occurs during a transition back to the original position should send it traveling to the right again from its current position
• While a mouse is clicked down on a box, it should move to the right (It should coninuously move, there is no limit on how far it will go).

Stretch Goals

Rockets:

• Animate the rockets, visually show them being transported to the top.

Travellers:

• Give the traveller a limit on the distance it can travel.
• When the mouse button is released, it should travel back to its original position.
• A mouse down that occurs during a transition back to the original position should send it traveling to the right again from it's current position.

You will again be using window.setInterval. For this method, and any of those listed in the "Topics" section of this README, you are encouraged to use MDN as your resource for Documentation. MDN can be challenging to consume at first, so you may also use something like W3schools if the MDN documentation on a given subject is a bit too complicated.