Calc

by Matthew Vasallo

HTML

No attempt at esthetics bare bones calculator:</br>
<input type="number" class="operand" id="operand1"/>
<select id="operator">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="/">/</option>
    <option value="*">*</option>
</select>
<input type="number" class="operand" id="operand2"/>
= <span id="answer"></span> <span id="error"></span>
</br>
</br>
Free text equation calculator (using eval)</br>
<input id="evalBasedInput" type="text" style="width:300px"></input>
= <span id="evalAnswer"></span> <span id="evalError"></span>
</br>
</br>
Free text equation calculator (custom solution)</br>
<input id="customBasedInput" type="text" style="width:300px"></input>
= <span id="customAnswer"></span> <span id="customError"></span>

JavaScript

/*
 * This file is the plain js (jquery and prototypes) version of the interview programming exercises.
 * 
 * As the candidate, your tasks are
 *    1. load the html page into a browser and test its functionality
 *    2. note the bugs and fix them. Be prepared to explain your work. (use window.alert or a new span to put out error messages)
 *       - if you get stuck and can't make any progress, ask for help because getting some help and making progress is better
 *         than not getting anything done.
 *       2.1 explain the function pattern at the end
 *    3. extra credit: change the equation entry to free form text entry
 *       3.1 first, make it functionally equivalent to the existing entry
 *       3.2 second, allow any well formed equation using the given operators with the addition of parentheses
 *
 *
 * CANDIDATE EXPLANATIONS
 * BUG FIXES (Question 2)
 * 1. Added document ready event subscription, as the DOM isn't loaded and the jQuery DOM selection operations won't return anything.
 *
 * 2. Context bug where jQuery event handler call sight causes the this variable to be the DOM element and the code was expecting
 * this to be the equation variable context.  This was causing the operator/operands values to be put on the DOM element object and
 * also the failure of the compute method, which isn't available in that context.  I could have used $.proxy to create a new function
 * with the correct context, but thought being more explicit and calling the function directly on the object made it more clear.
 *
 * 3. The operator was never being set to default value in the select drop down. This meant that the initial value of the equation wouldn't compute,
 * even though the '+' operand appears to be selected.  The only work around outside of code change would be to initially reselect the intended operator value.
 *
 * NOTES: I also changed the operand's to default to NaN, so that I could easily check if they aren't a number.  (null is sadly false for...