Creating a specific calculator using JavaScript

Question

So I'm trying to create a calculator that's based on a set of rules. Now as you can see I did most of what I wanted it to do except one thing which I'll try to explain right now.

1- let's say between value1 is equal to 1 and value2 to is equal to 1500. The calc will give a 1499 in the deduction category, and 149.9 in price category.

Value2 - Value1 = difference

then

Difference*0.1 = price

Now here where I'm stuck.

I want when ever Value 2 is higher than 1500 rather than the formula being

"Difference*0.1 = price"

it changes to

"Difference*0.2 = price"

and when value2 is higher than 2000 the formula then changes to

"Difference*0.3 = price"

now I used an if statement which worked fine

if (value2 < 1500) {
               $('#price').val(diff*0.1);
            }

but it doesn't end here.

Lets say

Value1 =  600

and

Value2 = 2100

I want the calc to do the following,

1500 - 600 = 900

900 * 0.1= 90

Then it takes

2000 - 1500 = 500
500*0.2 = 100

Then it takes

2100 - 2000 = 100
100*0.3 = 30

90+100+30 = 220 (the final price)

Hopefully the example explains what I want my calc to do. I'm sorry if it's confusing I'm more than happy to explain more if someone wants to.

<script>
      $(function(){
            $('#value1, #value2').keyup(function(){
               var value1 = parseFloat($('#value1').val()) || 0;
               var value2 = parseFloat($('#value2').val()) || 0;
               $('#diff').val(value2 - value1);


          var diff = parseFloat($('#diff').val()) || 0;
            $('#price').val(diff*0.1);
           /*if (value2 < 1500) {
               $('#price').val(diff*0.1);
            }
            if (value2 > 1500){
               $('#price').val(diff*10);
               }*/

            });


         });

      </script>

<html>
<header>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
   <script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
   </header>
<div class="container">
         <div class="row">
            <div class="col-sm-6 col-sm-offset-3 well">
               <h4 class="text-center">Live Sum of values using jQuery</h4> <hr/>
               <form class="form-horizontal">
                  <div class="form-group">
                     <label class="control-label col-sm-2" for="value1">Value 1</label>
                     <div class="col-sm-10">
                        <input type="number" name="value1" id="value1" class="form-control" min="0" placeholder="Enter first value" required  min="500" max="5000" />
                     </div>
                  </div>
                  <div class="form-group">
                     <label class="control-label col-sm-2" for="value2">Value 2</label>
                     <div class="col-sm-10">
                        <input type="number" name="value2" id="value2" class="form-control" min="0" placeholder="Enter second value"  min="500"  required   />
                     </div>
                  </div>
                  <div class="form-group">
                     <label class="control-label col-sm-2" for="diff">Difference</label>
                     <div class="col-sm-10">
                        <input type="number" name="diff" id="diff" class="form-control" readonly />
                     </div>
                     <div class="form-group">
                        <label class="control-label col-sm-2" for="price">Total Price</label>
                        <div class="col-sm-10">
                           <div class="col-sm-10">
                            <input type="number" name="price" id="price" class="form-control" readonly />
                           </div>
                     </div>
               </form>
            </div>
         </div>
      </div>
</html>

Can you write it more clearly? Like, Case 1: Condition: Value2 greater than ... this and that happens. Case 2: Condition:... — kev
– kev, Commented Dec 15, 2018 at 15:15
@kev hmm is the example not easy to understand? hmm I'll try writing it in that format give me a bit. — BK emperor
– BK emperor, Commented Dec 15, 2018 at 15:24
Thanks! I'm new myself, so it my be that I'm not seasoned enough :-) — kev
– kev, Commented Dec 15, 2018 at 15:34

Palisand · Accepted Answer · 2018-12-15 17:12:55Z

3

Is this what you're looking for?

function get_price(val1, val2) {
  if (val2 > 2000) {
    return (val2 - 2000) * .3 + get_price(val1, 2000);
  }
  if (val2 > 1500) {
    return (val2 - 1500) * .2 + get_price(val1, 1500);
  }
  return (val2 - val1) * .1;
}

get_price(600, 2100) === 220

or maybe this

function get_price(val1, val2) {
  if (val2 > 2000) {
    return (val2 - 2000) * .3 + 500 * .2 + (1500 - val1) * .1;
  }
  if (val2 > 1500) {
    return (val2 - 1500) * .2 + (1500 - val1) * .1;
  }
  return (val2 - val1) * .1;
}

or if you hate readability, you could go with this atrocity

var get_price = (v1, v2) => v2>2000?(v2-2000)*.3+500*.2+(1500-v1)*.1:(v2>1500?(v2-1500)*.2+(1500-v1)*.1:(v2-v1)*.1);

edited Dec 15, 2018 at 17:12

answered Dec 15, 2018 at 15:43

Palisand

1,3801 gold badge18 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

James Over a year ago

This looks like it will do the trick. Not a huge fan of the recursive calls, looks inefficient to run that first if block 3 times when val2 > 2k.

Palisand Over a year ago

True. I've added a non-recursive alternative. The intention is a bit more apparent with the recursive version in my opinion.

Collectives™ on Stack Overflow

Creating a specific calculator using JavaScript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related