Exercise your DOM skills to build functional calculator with JavaScript.
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.
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.
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.
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.
Feel free to add additional operators or complex functionality for the calculator. Math.js supports a wide range of operators and complex expressions.
-
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 testto 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.