/bootcamp-0

boxalixious

Primary LanguageHTML

boxalicious

Challenge 0

With this exercise, you'll learn how to navigate in the terminal and use git. You'll also get exposure to HTML, CSS, and Javascript. This assignment assumes you already know a programming language like Python.

Description.

Your task is to use HTML, CSS, and Javascript to create a box that follows your mouse movements in the browser. The box should transform colors and shape. Add a pretty background too.

Boxalicious

  1. Clone this repository to your local machine. If you don't have git use your terminal to install it.
  2. Change directory in the repo and checkout a branch with your name.
  3. When on the branch open up index.html with a text editor. We recommend Atom or Sublime.
  4. Use CSS to apply shape and color transformations to the provided div. You do NOT need javascript for this!
  5. In Vanilla Javascript (that is, without using packages like jQuery) select the box by id.
  6. Add an event listener to the box and update the box location every time the mouse moves.
  7. Add your changes to git.
  8. Commit your changes to git.
  9. Push your branch up to github. DO NOT push to master.

This is assignment is hard. Don't let that discourage you. There are many ways to do complete this exercise, and it's meant to stretch your knowledge. If you get stuck for more than an hour or find yourself writing more than 10 lines of javascript reach out.

Steps 6 and 7 will be the most difficult. Be patient and use the console in Chrome or Firefox's developers tools to help you troubleshoot your javascript.

Helpful Links & Hints:

Web Console

Git Basics

CSS Keyframes

Event Listeners

Translations

Using Javascript to Update CSS