JavaScript Calculator project with testable user stories - Guinea Pigs needed 🐹

[QuincyLarson]

As you may have heard, @no-stack-dub-sack and @Weezlo have been hard at work building projects with testable user stories. We are looking for a few volunteers to attempt to build these based on their automated tests.

The goal is for campers to be able to build these projects step by step following user stories. This will make the projects less intimidating and more fun. Oh, and don’t worry - we’ll still have plenty of optional projects where we don’t provide you with any tests. And if you’ve previously built these projects, you don’t need to build them again.

If you’re interested in attempting this, please reply to the thread and let us know you’ve started it. The more people who want to build this, the better, as we can start gathering feedback.

Thanks, and happy coding!

Build the project here if using codepen: http://codepen.io/freeCodeCamp/pen/MJjpwO
Here’s the example project: http://codepen.io/freeCodeCamp/pen/wgGVVX
And if you want to build the project locally, just use this CDN to pull in the test suite: https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js

User Stories

1. My calculator should contain a clickable element containing an = with a corresponding id="equals".
2. My calculator should contain 10 clickable elements containing one number each from 0-9, with the following corresponding IDs: id="zero", id="one", id="two", id="three", id="four", id="five", id="six", id="seven", id="eight", and id="nine".
3. My calculator should contain 4 clickable elements each containing one of the 4 primary mathematical operators with the following corresponding IDs: id="add", id="subtract", id="multiply", id="divide".
4. My calculator should contain A clickable element containing a . with a corresponding id="decimal".
5. My calculator should contain a clickable element with an id="clear".
6. My calculator should contain an element to display values with a corresponding id="display".
7. At any time, pressing the clear button clears the input and output values, and returns the calculator to its initialized state. 0 should be shown in the element with the id of “display”.
8. As I input numbers, I should be able to see my input in the element with the id of “display”.
9. In any order, I should be able to add, subtract, multiply and divide a chain of numbers of any length, and when I hit =, the correct result should be shown in the element with the id of “display”.
   • Note On Calculator Logic: It should be noted that there are two main schools of thought on calculator input logic: immediate execution and formula logic (our example utilizes formula logic and observes order of operation precedence, immediate execution does not). Either is acceptable, but please note that depending on which you choose, your calculator may yield different results than ours for certain equations (see below example). As long as your math can be verified by another production calculator, please do not consider this a bug.
   • EXAMPLE: 3 + 5 x 6 - 2 / 4 =
     • Immediate Execution Logic: 11.5
     • Formula/Expression Logic: 32.5
10. When inputting numbers, my calculator should not allow a number to begin with multiple zeros.
11. When the decimal element is clicked, a . should append to the currently displayed value. Two .s in one number should not be accepted.
12. I should be able to perform any operation (+, -, *, /) on numbers containing decimal points.
13. If 2 or more operators are entered consecutively, the operation performed should be the last operator entered.
14. Pressing an operator immediately following = should start a new calculation that operates on the result of the previous evaluation.
15. My calculator should have several decimal places of precision when it comes to rounding (note that there is no exact standard, but you should be able to handle calculations like 2 / 7 with reasonable precision to at least 4 decimal places).

[JohnL3]

I have just more or less finished my calculator … and im very critical of how it should work eg no extra decimals no operators follwed by another operator things like that.
so had a look at the sample calculator used for this test … you can go 6+6+ and change the + to - / * but you cant change it to = and have 6+6 = 12

Also there is no CE button ??

as for the calculator logic … didnt know they made formula/expression logic calculators … never seen or used one before. and lets just say im glad any calculator i used is immediate Execution logic. This i think will make it a lot more challenging.
there is a couple of more things i would categorise as bugs in the calculator sample but as its just a sample i leave it at what i have above.

But i would really like to give this a try and see how the automated testing works compared to all the manual testing i did when creating mine. Also i feel the test can only benefit others when working on this project.
I will also try and do the formula/expression logic … i think it will add a extra layer of difficulty that will make it more difficult for me (as operator precedence dosent come easily to me)

[JohnL3]

<div id='display' class="calc-area"> <div class="calc-area-a"> <span class="calc-num">0</span> </div> <div class="calc-area-b"> <span class="calc-num-b">0</span> </div> </div>
any thoughts on where i have my id for display should this work …
the calc-area-a div contains the span for the digits on that are displayed on the top line
the calc-area-b div contains the span that displays the digits for the bottom line
and as id are unique only logical place i could think to put it is in a div that encloses the display

what im going to try and do is use my html and css from my original calc and adjust my javascript where needed to take the test
id for rest should be ok just not sure about the display one

[JohnL3]

ok did a quick run with my javascript code that i used on my calculator to see would the test run for that … expecting some form of fails to show as it wasnt designed to the spec provided for this calculator and got 7 out of 15

Now how do i find out what it fails on … its nice to see its working but not good without a reason for what is failing

Hang on just discovered if you click the button a list appears with errors will go through that now

[JohnL3]

Fail for this …
As I input numbers, I should be able to see my input in the element with the id of “display”

This being the reason
clickButtonsById([_1, _2, _3]);
assert.strictEqual(document.getElementById(“display”).innerHTML, “123”);

now this refers to my above post of where to place the Id ="display"
so obviously having the display id in the surrounding div is not going to work as its reading it for input

but as we have two sections that display a top line and a bottom line … looks like only one line is goint to be tested … should not both lines be checked to make sure they are displaying properly

will move my id=‘display’ and try running it from top line first and then bottom line and see how i get on

[JohnL3]

ok moved id=‘display’ to the span for displaying top line

i got 14 out of 15 in test

reason i failed one is i have a set up where if you press eg 6+6+ and then decide its meant to be - you have to press CE to delete the + and then enter -

Here is a link to the calc

Test Calc for Fcc

will now go look at seeing can i changed it to match specs and to do the formula logic and observes order of operation precedence.
(changed my mind not going to do it with the operation precedence it would be too confusing to do it this way without being able to surround the numbers in brackets eg 6+(4/2)=8 … tested my coworkers with it and none of them could use it … was trying to figure out if i ever used anything that calculates like this and could only come up with excel and even at that if i was using excel i would use brackets as i would be lost otherwise)

CHECKING HOW TESTS WORK IF YOU START FROM SCRATCH
Decided to check how tests work if you start from scratch … while it will be a great benefit to run tests on your calculator at the end and see dose it pass … it would be even more of a benefit if you could test it as you worked as if you find you fail the tests at the end … depending on how you write your code it could be very difficult to debug and fix.

In my case i wrote my code in functions for each area
eg function for numbers 1-9
function for when the decimal is pressed
function for when the 0 is pressed
function for when the = is pressed
function for when ±/* is pressed
function for when AC is pressed
function for rendering out put to screen

so for this type of code i hope that as i write these function i pass some tests … if i fail i then only need to evaluate the specific function
and then i wont need to wait till the end to see whats failing

i failed on the decimal check when i had the function 1-9 sorted and the decimal function sorted … even though at that stage i could only enter one decimal
i passed on the decimal check when i added the 0 function

One thing i noticed so far is there is no check for overflow of numbers … as i didnt add my digitLimit function check and i can over flow without a error

will add sign function now and see what happens

added signs function but i fail sign function as i dont allow for two or more signs to be entered consecutively … the operation performed should be the last operator entered.
Think this test needs to be changed as why should you need/have to program a calculator that allows you to enter two or more signs consecutively to pass a test
when the main reason should be to make sure that a valid operation is done by the entering a operator whether it be one operator entered or more.

finished up by adding the equal function and got the 14 of 15 …

overall i think this is very good and it looks like you shouldn’t have to complete your whole calculator to find out if your are passing or failing … it could be tweaked a bit more (lol im very demanding in what i expect from my code so i would be happier with more stringent tests) but in saying that i think it will benefit those making a calculator a lot and hope to see it up and running officially real soon.

[BenGitter]

This was easier than I expected. I didn’t use any IDs for the logic, so I only had to add a few IDs and it worked. Here is the pen, though it looks better on “Full Page” view.

[JohnL3]

love this calculator its like the swiss army knife of calculators

[Quickz]

Tweaked my old calculator a bit - 15/15 tests passed.
http://codepen.io/Quickz/pen/woebZN?editors=0010

[no-stack-dub-sack]

@Quickz,@BenGitter, @JohnL3 - thanks for participating guys!

@Quickz, @BenGitter - looks like the tests are working well on yours - this is great to see!

[no-stack-dub-sack]

@JohnL3 - same goes for you, looks like tests are working well, and appreciate your detailed feedback. It should be kept in mind that these tests are designed for campers that have never completed the project before, so in working through this, if a test fails, the functionality can be added so the tests pass. In your case, the CE button could be kept in addition to the functionality that would let test 12 pass. As you can see from @BenGitter’s pen, additional functionalities should not cause the tests to fail. Campers should be able to add whatever they want, as long as the minimum requirements are met.

Also there is no CE button ??

There is no CE button because we wanted to keep the functionality fairly simple for the example, since for people new to programming, this can already be a quite complex project. Here is another version of this calc that I made with additional functionalities.

Formula/Expression calculators are more common these days. Google’s calculator uses this logic as does Apple’s calcs and several others. You can read more about it here. We wanted to be sure to allow both, as many campers raised this issue about the current example calculator (including myself when I first noticed ).

you can go 6+6+ and change the + to - / * but you cant change it to = and have 6+6 = 12

This is a good observation that I didn’t pick up on when removing the CE button for this example. I have fixed this issue. Thanks!

there is a couple of more things i would categorise as bugs in the calculator sample

Please feel free to point them out! If you don’t now, someone else will later - better to have them fixed before hand (I was hoping there wouldn’t be many, but code should always be QA’d!).

[no-stack-dub-sack]

Since it looks like most participants applied the tests to their existing code, it would be great to see someone build this from scratch with the tests in mind, as that will best simulate the experience of a camper encountering this having just gotten to this point in the curriculum - any other volunteers?

[Barbosabyte]

@no-stack-dub-sack I just reached the calculator project and I’ll try it. I can’t seem to fork the blank one. Is it OK if I use an unforked blank pen?

[no-stack-dub-sack]

@Barbosabyte My bad - it pretty much has to be done in the pen we meant for it. If you’ve already started, you can copy your code into this pen, just be sure to read the README in the JS editor. Here’s an up and running version: https://codepen.io/FCC_test_suites/pen/QGMMZO

[Barbosabyte]

I finished the calculator (yesterday, but I didn’t come to post) and I must say the tests helped me “eat the elephant”.
Using the tests I was able to break the task down into smaller ones and actually code them. If I did it on my own I would probably still be banging my head against the keyboard not knowing what to do.
The main issue I found was the crazy number input before I did the C key (@no-stack-dub-sack already told me it will be addressed).
I think the tests are really helpful for beginners and should be available for all challenges, but kept optional.
Here is the calculator link: http://codepen.io/barbosabyte/full/GNvBrY/

[no-stack-dub-sack]

Thanks for the great feedback @Barbosabyte! Glad to hear the tests were helpful and we will def use your suggestion regarding the clear button. Calc looks great by the way!

[utxeee]

@no-stack-dub-sack, I just forked the said pen and copied my htlm, css and javascript after of course commenting out the line:

const project_name = ‘javascript-calculator’;

But it seems not to be working, is there any other step that I need to do?

Cheers,
utxeee.

[no-stack-dub-sack]

Hi @utxeee! Yes, if you’ve done all of that and uncommented the project name constant, you should see a button in the top left corner of the pen read Tests 0/15. If you don’t see that - are you using Chrome? The tests will only work in chrome at the moment. Also, be sure you have read the user stories in the original post and in the tests carefully as you must have several required ids applied to your divs and other elements. Thanks! Let us know how you make out and feel free to ask more questions!

[utxeee]

Well, my bad I did not pay full attention to the test description and did not change divs IDs as requested…

One more question, have you used jsdom when developing your tests? Or was it just mocha and chai?

Cheers,
utxeee.

[no-stack-dub-sack]

@utxeee Just Mocha and Chai for the time being… I’ve never used jsdom. We’re trying to keep dependencies to a minimum and mocha/chai seem to be doing the trick.

If you’ve gotten your project to work, or are having difficulty with the tests - feel free to post it so we can take a look! As a side note, the testing experience for these is designed to be best when developing the app from scratch with the tests in mind (similar to a BDD/TDD approach), already in the blank pen with the tests running, as helpful errors should appear if tests are failing. It’s not always really easy to go back and make an existing project pass all the tests. Anyway, hope you made out ok!