README.md

Calculator

Exercise your DOM skills to build functional calculator with JavaScript.

Description

Use DOM methods to create functional calculator that has buttons for the numbers 0–9 as well as for some basic operators for addition (+), subtraction (-), multiplication (* or x), division (/), and equals (=).

In addition to those buttons, the calculator should have a display which displays the numbers or operators pressed by the user. When the user presses equals (=), the calculator should evaluate the math expression and update the display with the result.

For this exercise, create a basic functional calculator purely with JavaScript using the DOM API, and style it using CSS. Use document.createElement(tagname) to create the button elements and document.body.appendChild(element) to add them to the page. Use element.addEventListener to listen to 'click' events on the buttons. When the 'click' event fires, update the display and/or evaluate the math expression based on the button that was clicked (see event.currentTarget or event.target).

Almost any element could be used for the calculator's display. An input would work well, but it could just as well be div, span, or p.

If you use the input element, use the value property to update the display. If you use any other element the textContent property should be used.

DOM methods

This exercise is intended for you to become familiar with the DOM API. Try to build the entire user interface for the calculator using only JavaScript. I will accept some static content in index.html, but the buttons and display for the calculator interface should be created using DOM methods.

Evaluating the result

To evaluate the result, use the math.js library (mathjs.org) by calling math.eval(expression). The math.js library should be loaded on the page before calculator.js.

Styling the calculator

Please add at least basic styles to improve the usability of the calculator. The styles should lay out the calculator buttons in a logical and organized manner. Consider making the calculator usable on mobile devices as well.

Additional functionality

Feel free to add additional operators or complex functionality for the calculator. Math.js supports a wide range of operators and complex expressions.

Completing and submitting the assignment

• To begin, fork this repository.

• Create a new Cloud9 workspace from your new repository.

  • Alternatively, you may clone your new repository to your computer by running:

    git clone https://github.com/YOUR_GITHUB_USERNAME/calculator
    

• After cloning (in Cloud9 or on your computer), check out the “gh-pages” branch by running:

    git checkout gh-pages
  

• Modify the files and commit changes to complete your solution.

• Run node test to verify that all tests pass.

• Push/sync the changes up to GitHub. Your assignment will now be visible at http://YOUR_GITHUB_USERNAME.github.io/calculator/.

• Create a pull request on the original repository to turn in the assignment.

• Create a separate branch for the extra credit options.

You are also welcome commit, push, and create a pull request before you’ve completed your solution. You can ask questions or request feedback there in your pull request. Just mention @barberboy in your comments to get my attention.

References

• document.createElement
• document.createTextNode
• node.appendChild
• element.addEventListener
• event.currentTarget
• event.target
• button element
• input element
• div element
• span element
• p element
• textContent property