Stuck with javascript code

Question

0.00/5 (No votes)

See more:

I am stuck with the Javascript code Price Calculator. I just started learning Javascript and I am trying to create a price calculator where I can subtract the discount amount the total and new price come up separately. I have tried several thigs but couldn't able to get the desired result. I have posted the code that I used.

I also want to add a checkbox where when I click on it additional services price shows up with the Grand Total.
Like this link: https://codepen.io/csinghofen/pen/oyZENO

PLEASE HELP ME.

What I have tried:

* {
  box-sizing: border-box;
  
}


.text-giant {
  font-size: 30px;
  margin: .3em;
  text-align: right;
  padding: 0;
  font-family: poppins, sans-serif;
  color: #FFA500;
  font-weight: 600;
  text-decoration: line-through #FF3028;
  
  
}

label{
  padding: 10px 10px;
  margin: 12px 0;
  display: inline-block;
  box-sizing: border-box;
  font-family: poppins, sans-serif;
  font-weight: bold;
  font-size: 18px;
  
 
}

p {

  margin: 5px 0 ;
  text-align: right;
  box-sizing: border-box;
  font-family: poppins, sans-serif;
  font-weight: 500;
  font-size: 18px;

 
}

h2 {
  font-family: poppins, sans-serif;
  text-align:center;
  font-size: 35px;
}

.form-control {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    line-height: 1.25;
    color: #464a4c;
    background-color: #fff;
    background-image: none;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 2px solid #FFA500;
    border-radius: 0.5rem; 

}

.jumbotron {

    padding: 0.5rem 2rem;
    margin-bottom: 1rem;
    background-color: #eceeef;
    border-radius: 0.3rem; 

}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #FFA500;
  cursor: pointer;
}
.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #FFA500;
  cursor: pointer;
}



 <h2>Price Calculator</h2>
<div class="jumbotron">
 
  

    <div class="form-group">
     
      
    </div>

    <div class="form-group">
    
      Quantity 
        
      
      
    </div>

  
<h1 style="text-align: right; font-size: 20px">Total:</h1> 


<div class="text-right text-giant total"> </div>
<p>Newbee Discount: <span style="text-align: right; color: rgba(255, 0, 0, 1)">25%</span></p>
<h1 style="text-align: right; font-size: 25px">Total After Discount:</h1>
<div class="text-giant discount">
</div>
  

</div>

// grab everything we need
const priceInput = document.querySelector('[name=price]');
const quantityInput = document.querySelector('[name=quantity]');
const total = document.querySelector('.total');
const quantityLabel = document.querySelector('.quantity-label');
const discount = document.querySelector('.discount');

// create functions we'll need
function calculateCost() {
  const price = priceInput.value;
  const quantity = quantityInput.value;
  const cost = price * quantity;
  const discount = cost - (cost * 0.25)
  console.log(cost);
  total.innerText = "$" + cost.toFixed(2); 
  
  }
  
 // create functions we'll need
function calculateDiscount() {
  const discount = cost - (cost * 0.25)
  console.log(discount);
  total.innerText = "$" + discount.toFixed(2); 
  
  }
 
function updateQuantityLabel() {
  const quantity = quantityInput.value;
  quantityLabel.innerText = quantity;
}


// on first run
calculateCost();

// add event listeners
priceInput.addEventListener('input', calculateCost);
quantityInput.addEventListener('input', calculateCost);
quantityInput.addEventListener('input', updateQuantityLabel);

Posted 25-Aug-22 3:29am

Harvey.S

Updated 26-Aug-22 0:04am

Add a Solution

Comments

Richard MacCutchan 25-Aug-22 10:15am

"I have tried several thigs but couldn't able to get the desired result."
Sorry, but we cannot guess what the desired result is. Please explain the actual problem when you run this code.

Harvey.S 25-Aug-22 11:39am

I didn't able to get the total after the deduction of discount amount

Richard MacCutchan 25-Aug-22 12:36pm

You never subtract the discount from the cost.

Harvey.S 25-Aug-22 12:55pm

I need to show the total amount and amount after discount separately

Richard MacCutchan 25-Aug-22 14:33pm

Fine, what is the problem?

Harvey.S 25-Aug-22 15:31pm

there is some issue with the javascript its not working

// grab everything we need
const priceInput = document.querySelector('[name=price]');
const quantityInput = document.querySelector('[name=quantity]');
const total = document.querySelector('.total');
const quantityLabel = document.querySelector('.quantity-label');
const discount = document.querySelector('.discount');

// create functions we'll need
function calculateCost() {
const price = priceInput.value;
const quantity = quantityInput.value;
const cost = price * quantity;
const discount = cost - (cost * 0.25)
console.log(cost);
total.innerText = "$" + cost.toFixed(2);

}

// create functions we'll need
function calculateDiscount() {
const discount = cost - (cost * 0.25)
console.log(discount);
total.innerText = "$" + discount.toFixed(2);

}

function updateQuantityLabel() {
const quantity = quantityInput.value;
quantityLabel.innerText = quantity;
}

// on first run
calculateCost();

// add event listeners
priceInput.addEventListener('input', calculateCost);
quantityInput.addEventListener('input', calculateCost);
quantityInput.addEventListener('input', updateQuantityLabel);

Richard MacCutchan 26-Aug-22 4:01am

"there is some issue with the javascript its not working"
All you have done there is post the same code as in your question and say, "its not working". This means nothing.

And you have taken no notice of my earlier suggestion that the code does not subtract the discount from the total cost.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Khushboo Satasiya · Answer 1 · 2022-08-26T00:04:00

Hello,

As per my understanding regarding your query, I mentioned one example below with input value and it's output.

Ex:

const price = 100; //priceInput.value;
const quantity = 5; //quantityInput.value;
const cost = price * quantity;
const discount = cost * 0.25;
console.log("Total Cost:", cost);
console.log("Discount:", discount);
console.log("Discounted Cost:", cost - discount);

Instead of const discount = cost * 0.25; line of code you wrote const discount = cost - (cost * 0.25); code.
I think this is the actual result you want i.e. "Amount after discount". But you took value in "const discount" variable. This will create confusion but the discount variable will carry the amount after the discount. If you want to check all separated(Total amount, discount, Amount after discount) then you can try my above written JS code.

Below is the output of my JS code:

Output:

Total Cost: 500
Discount: 125
Discounted Cost: 375

Let me correct if I am wrong to understand your question.