Code Monkey home page Code Monkey logo

dom-ii's Introduction

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.

Instructions

Task 1: Project Set Up

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 team lead 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>.

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 2a: Create Unique Event Listeners

  • Using your index.js file, create 10 unique event listeners. Use your creativity to make the Fun Bus site more interactive. For example you could change colors, animate objects, remove objects, etc. Here are some unique event types you could try to use:
    • mouseover
    • keydown
    • wheel
    • load
    • focus
    • resize
    • scroll
    • select
    • dblclick
    • drag / drop

Note: Drag and drop is a bit more advanced than the others as it's not actually a single type of event but several, working together.

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

Task 2b: Exit Ticket

Once you begin, you will have 15 minutes to answer the questions here.

The completion of these questions is mandatory for MVP. However, passing the quiz doesn't affect your standing as a Lambda School student whatsoever. This is Lambda School testing itself! Please answer honestly and to the best of your ability without using external references.

Task 3: Stretch

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

Stretch assignment

Submission Format

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 team lead as a reviewer on the pull-request
  • Your team lead will count the project as complete by merging the branch back into main branch.

dom-ii's People

Contributors

ladrillo avatar bigknell avatar tetondan avatar ivanmora avatar nelson-singleton avatar justsml avatar mphelps1978 avatar mixelpixel avatar zoelud avatar rodrigograca31 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.