Jquery price increase by slab-CodePudding

i am working on some project and I'm facing some issue actually i want price increase by slap like i am allowing customer to select guest for booking for e.g the main price of product is 100 and additional price of guest is 50 and limit of guest is 4 when customer select 5 guest then the main price should be add in total price after when customer select 6 guest then only add 50 price i am sharing some code but its not working properly.

main price = 100 addintion price = 50

Guest	Price
1	100
2	150
3	200
4	250
5	350 add main price again (100)
6	400
7	450
8	500
9	600 add main price again (100)
10	650

group_size = 4;
increased_group_size = 4;
total_guests = me.guests;
if(total_guests<=group_size){
    increased_group_size -= group_size;
    if(increased_group_size==0){
        increased_group_size  = group_size;
    }
}

if(total_guests>increased_group_size){
    main_price = main_price;
    increased_group_size  = group_size;
    final_price  = main_price;
}
else{
    
    final_price1 = total_guests * me.addtional_price;
}
total  = final_price1   final_price   me.price;

I tried the above code but not working properly.

CodePudding user response：

Divide the number of additional guests by the group size. For each group, add the difference between the main price and additional price.

function calculate_price(total_guests) {
  let additional_guests = total_guests - 1;
  let group_size = 4;
  let additional_groups = Math.floor(additional_guests / group_size);
  let main_price = 100;
  let additional_price = 50;

  let total_price = main_price   additional_guests * additional_price   additional_groups * (main_price - additional_price);
  return total_price;
}

for (let guests = 1; guests <= 10; guests  ) {
  console.log(`Guests = ${guests} Price = ${calculate_price(guests)}`);
}

CodePudding user response：

Essentially what you need to do is check whether the current number is divisible by your max number. Then add one number if it is, and another number if it isn't.

Here's a working example.

const guestNum = $(".guests-total");
const total = $(".total");

$(".button").on("click", (e) => {
  let numMult = 1;
  const num = parseInt(guestNum.text());
  let curTotal = parseInt(total.text());
  let testNum = num   1;

  if (e.target.classList[1] === "min") {
    numMult = -1;
    testNum = num;
    if (num === 0) {
      return;
    }
  }

  while (testNum > 0) {
    testNum = testNum - 5;
  }

  if (testNum !== 0) {
    curTotal  = numMult * 50;
    guestNum.text(num   numMult * 1);
    total.text(curTotal);
    return;
  }

  curTotal  = numMult * 100;
  guestNum.text(num   numMult * 1);
  total.text(curTotal);
  return;
});

.wrapper {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 5vw;
  gap: 2vw;
}

.row-one {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3vw;
}

.icon-test {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html lang="en">

<head>
  <title>Document</title>
</head>

<body>
  <div >
    <div >
      <div >-</div>
      <div >0</div>
      <div > </div>
    </div>
    <div >
      <div >Total: $<span >0</span></div>
    </div>
  </div>
</body>

</html>

Let's break this down.

Here we get the DOM elements for the number of guests and the sub-total of money.

const guestNum = $(".guests-total");
const total = $(".total");

Then we register an event listener for a click on the button to either add or subtract a guest.

$(".button").on("click", (e) => {

I set a variable called numMult that I will multiply all my sub-total numbers by to either subtract or add money (I'll explain that more later).

let numMult = 1;

Then I get the actual text contained in the DOM elements and convert those to integers so we can add or subtract from them.

const num = parseInt(guestNum.text());
let curTotal = parseInt(total.text());

Finally I make a new variable that will be used to test if the current number is a multiple of 5 or not.

let testNum = num   1;

Here we check if the button that was clicked is the subtract button or the add button, if it's the subtract button then we will be multiplying all our numbers by -1 so that it subtracts from the subtotal instead of adds to it.

If the current number is 0 we return because there obviously can't be negative guests.

if (e.target.classList[1] === "min") {
  numMult = -1;
  testNum = num;
  if (num === 0) {
    return;
  }
}

Here we subtract from the total number of guests until num is less than or equal to zero.

while (testNum > 0) {
  testNum = testNum - 5;
}

If our test number doesn't come out as zero, we know that the number isn't 5 or divisible by 5, so we add or subtract 50.

if (testNum !== 0) {
  curTotal  = numMult * 50;
  guestNum.text(num   numMult * 1);
  total.text(curTotal);
  return;
}

Otherwise, if our test number is 0, we know that the number of guests is either 5 or a multiple of 5, so we add 100.

curTotal  = numMult * 100;
guestNum.text(num   numMult * 1);
total.text(curTotal);
return;

I hope this helps out.