/theDOM

Primary LanguageCSS

06/03/15

This homework is due by 8am, on 06/04/2015

Description

This exercise will help you understand how to use JavaScript functions as well as to start interacting with the DOM.

Objectives

Learning Objectives

After completing this assignment, you should…

  • Understand how JavaScript functions work
  • Understand the basics of the DOM (Document Object Model)

Performance Objectives

After completing this assignment, you be able to effectively use

  • Be able to create re-usable functions
  • Be able to create HTML elements and interact with them via JavaScript

Details

Deliverables

  • A repo containing at least:
    • main.js
    • index.html
  • A link to the deployed project

Requirements

  • No JavaScript warnings or errors

Normal Mode

  1. Use the HTML provided in index.html and set up a new project

  2. Create a main.js file and link it to your index.html file

  3. Using the DOM API and the elements on the page, set up the following:

    • You will need to create 4 buttons that will have click events attached to them, of each, they will add, subtract, multiply, and divide respectively, effectively combining the 2 input values entered on the page.
    • You'll need to convert the values to a number (think Number(value)) in order to process them.
    • Your output should be injected into the answer element

  4. Add some styles to this project and make it something pretty to look at.

Hard Mode

Taking what you have learned, create the below image in HTML/CSS and add the functionality (JS) you see below.

Mockup In Action

Additional Resources