plan-difference-condensed.js

// combining steps 1 - 3 into single lines for less code
var currentPlan = parseFloat($('.current-plan').text().substr(1)).toFixed(2);
var newPlan = parseFloat($('.new-plan').text().substr(1)).toFixed(2);

var priceDifference = currentPlan - newPlan;

var differenceText = "";
if (priceDifference >= 0) {
  differenceText = "Your price difference "  + "$+" + priceDifference.toFixed(2);
} else {
  differenceText = "Your price difference "  + "$" + priceDifference.toFixed(2);
}

$('.plan-difference').text(differenceText);

plan-difference.js

// 1) get text values for each plan and save them
var currentPlan = $('.current-plan').text(); // saved as $249.00 in example html
var newPlan = $('.new-plan').text(); // saved as $299.99 in example html

// 2) remove first character from each (the $ sign) (google "remove first character from string" to find that .substr(1) does this to any string, which is just vanilla js)
currentPlan = currentPlan.substr(1); // currentPlan now equals 249.00
newPlan = newPlan.substr(1); // newPlan now equals 299.99

// 3) convert strings to numbers (floats) so we can do math on them
// when doing math in JavaScript you want to make sure the type of the items you're using are not string and in fact a number or floating point number (float in this case)
// .toFixed(2) just shortens "59.123451235135" to "59.12"
currentPlan = parseFloat(currentPlan).toFixed(2); // currentPlan now equals 249 (of type float which is a number that allows decimals)
newPlan = parseFloat(newPlan).toFixed(2); // newPlan now equals 299.99 (of type float which is a number that allows decimals)

// 4) Subtract newPlan from currentPlan and save as new variable
var priceDifference = currentPlan - newPlan; // priceDifference = -50.99

// 5) Create a new text variable to store the difference text and use a plus or minus sign depending on if the planDifference is negative or positive
// I also decided if the difference was zero then also show a plus sign but you can change that. Negative number/float values will already have a "-" in front of them so we dont add it in front like we do with the plus
var differenceText = "";
if (priceDifference >= 0) {
  differenceText = "Your price difference "  + "$+" + priceDifference.toFixed(2);
} else {
  differenceText = "Your price difference "  + "$" + priceDifference.toFixed(2);
}


// 7) Replace current price difference text with new text value
$('.plan-difference').text(differenceText);

Andrew,

Not sure if you have used codepen or jsfiddle in the past but here is a link to this code working. I pasted in the HTML you gave me in the HTML section, ignored the css section, and wrote the above javascript/jquery in the javascript part. It should run automatically and show the correct result. To test that its working, change the values for the plans in the HTML on the left and click "save" at the top and it should rerun and show the new value that you expect.

Note: You may have to add the $(document).on('ready', function () { // code here }); thing around this for it to run when jquery loads. It looks like code pen already does that for me behind the scenes but if you paste this in and its fucked up thats why.

Other notes: I added classes in the HTML that you should see but the first plan number has a class of current-plan, the other new-plan and the difference text has a class of plan-difference on it. You will see the jQuery selectors are using those classes to find those values so if you don't add them to the HTML it won't find anything and it will fail.

https://codepen.io/anon/pen/dLBqNR?editors=1011