Assignment-07

Description

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

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
  • readme.md
  • .gitignore
• A link to the deployed project on gh-pages

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:

* When I click the "calculate" button, the values in the first box should be added, subtracted, multiplied or divided by the value in the second box.
* 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

1. 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

• Understanding the DOM

Built With

• css
• html
• javascript