/DOM-II

Primary LanguageCSS

DOM II - Event Exploration

Fun Bus wants you to make their site more interactive. They are relying on you to provide 10 unique events to enhance their site. Explore the many events available to you by using the MDN events reference.

Set Up The Project With Git

Follow these steps to set up and work on your project:

  • Create a forked copy of this project.
  • Add your project manager as collaborator on Github.
  • Clone your OWN version of the repository (Not Lambda's by mistake!).
  • Create a new branch: git checkout -b <firstName-lastName>.
  • Implement the project on your newly created <firstName-lastName> branch, committing changes regularly.
  • Push commits: git push origin <firstName-lastName>.

Follow these steps for completing your project.

  • Submit a Pull-Request to merge <firstName-lastName> Branch into main (student's Repo). Please don't merge your own pull request
  • Add your project manager as a reviewer on the pull-request
  • Your project manager will count the project as complete by merging the branch back into main branch.

Task 1: Launch the project with npm

  • Navigate to the root of the project with your command line.
  • Run npm install to download any dependencies listed in the package.json file.
  • Run npm start to compile your project and launch a development server.
  • Navigate Chrome to the URL indicated in the output of the npm start command.

Task 2: Create Unique Event Listeners

  • Using your index.js file, create 10 unique event listeners. using your creativity to make the Fun Bus site more interactive. Here are some unique events you could try to use:
  • mouseover
  • keydown
  • wheel
  • drag / drop
  • load
  • focus
  • resize
  • scroll
  • select
  • dblclick

Using the 10 unique events, find ways to update the DOM in creative ways. For example you could change colors, animate objects, remove objects, etc.

  • Nest two similar events somewhere in the site and prevent the event propagation properly
  • Stop the navigation items from refreshing the page by using preventDefault()

Stretch Task

  • Go look at GSAP and implement the animations found in that library with your custom events.

Stretch assignment