What method can be used to determine the discount for individual items within an array when using reduce()?

Question

What method can be used to determine the discount for individual items within an array when using reduce()?

I am trying to figure out how to calculate a 15% discount for each item in an array along with the total amount. I have already managed to calculate and display the total discount for all items using the reduce() method, but I'm stuck on how to calculate the discount for each item separately with reduce(). Is there a workaround for this or should I consider a different approach?

function getDomNodesBySelector(selector) {
  return Array.from(document.querySelectorAll(selector));
}

document.querySelector('.total__button').addEventListener('click', applyDiscount);

function applyDiscount() {
  let items = getDomNodesBySelector(".price-value");
  let numDiscount = 15;
  let totalValue = items.reduce((acc, cur) => acc + (1 - (numDiscount / 100)) * cur.innerText, 0);
  document.querySelector(".total-price-value").innerText = totalValue;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shopping Cart</title>
    <link rel="stylesheet" href="https://code.s3.yandex.net/web-code/entrance-test/lesson-2/task-2/fonts.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body class="page">
  <h1 class="page__title">Cart</h1>
  <section class="chosen-items">
    <article class="card">
      <img src="https://code.s3.yandex.net/web-code/entrance-test/jacket.png" alt="" class="card__image">
      <div class="card__description">
        <h2 class="card__title">Have A Good Time x FA Two Tone Jacket</h2>
        <p class="card__text">Color: Green/Orange</p>
        <p class="card__text">Size: M</p>
        <p class="card__text">Quantity: 1</p>
      </div>
      <div class="card__price">
        <p class="card__rub price-default"><span class="price-value">15890</span> rub.</p>
      </div>
    </article>
    <article class="card">
      <img src="https://code.s3.yandex.net/web-code/entrance-test/vans.png" alt="" class="card__image">
      <div class="card__description">
        <h2 class="card__title">Vans Old Skool Sneakers</h2>
        <p class="card__text">Color: Black/White</p>
        <p class="card__text">Size: 43</p>
        <p class="card__text">Quantity: 1</p>
      </div>
      <div class="card__price">
        <p class="card__rub price-default"><span class="price-value">6390</span> rub.</p>
      </div>
    </article>
    <article class="card">
      <img src="https://code.s3.yandex.net/web-code/entrance-test/pop-DRS.png" alt="" class="card__image">
      <div class="card__description">
        <h2 class="card__title">Pop DRS Denim Stonewashed Jeans</h2>
        <p class="card__text">Color: Blue</p>
        <p class="card__text">Size: S</p>
        <p class="card__text">Quantity: 1</p>
      </div>
      <div class="card__price">
        <p class="card__rub price-default"><span class="price-value">11290</span> rub.</p>
      </div>
    </article>
    <article class="card">
      <img src="https://code.s3.yandex.net/web-code/entrance-test/by-parra.png" alt="" class="card__image">
      <div class="card__description">
        <h2 class="card__title">By Parra Belt</h2>
        <p class="card__text">Color: Multi</p>
        <p class="card__text">Size: S</p>
        <p class="card__text">Quantity: 1</p>
      </div>
      <div class="card__price">
        <p class="card__rub price-default"><span class="price-value">8550</span> rub.</p>
      </div>
    </article>
    <article class="card">
      <img src="https://code.s3.yandex.net/web-code/entrance-test/board.png" alt="" class="card__image">
      <div class="card__description">
        <h2 class="card__title">Fucking Awesome Drawings 2 Pink Skateboard</h2>
        <p class="card__text">Color: Fluorescent Pink</p>
        <p class="card__text">Size: One Size</p>
        <p class="card__text">Quantity: 1</p>
      </div>
      <div class="card__price">
        <p class="card__rub price-default"><span class="price-value">4790</span> rub.</p>
      </div>
    </article>
  </section>
  <section class="total page__total">
    <button class="total__button">Apply 15% Discount Coupon</button>
    <div class="total__prices">
      <h2 class="total__title">Total:</h2>
      <p class="total__rub price-default"><span class="total-price-value">46910</span> rub.</p>
    </div>
  </section>
  <script src="./task.js"></script>
  </body>
</html>

javascript arrays

Answer 1

Answer №1

As you iterate through the array of price items and use the reduce function, you are already processing each item to calculate the discounted price. Before updating the accumulator in the reduce function, make sure to update the value of the item.

Make changes to each item and add to the total:

// CHANGE:
// let totalValue = items.reduce((acc, cur) => acc + (1 - (numDiscount / 100)) * cur.innerText, 0);

// TO:
let totalValue = items.reduce((acc, cur) => {
    let itemdisc = (1 - (numDiscount / 100)) * cur.innerText; // calculate item discount
    cur.innerText = itemdisc; // update item
    return acc + itemdisc; // update total
}, 0);

Prevent applying the discount multiple times:

document.querySelector('.total__button').disabled = true;

Updated script:

function getDomNodesBySelector(selector) {
  return Array.from(document.querySelectorAll(selector));
}

document.querySelector('.total__button').addEventListener('click', applyDiscount);

function applyDiscount() {
  let items = getDomNodesBySelector(".price-value");
  let numDiscount = 15;
  let totalValue = items.reduce((acc, cur) => {
      let itemdisc = (1 - (numDiscount / 100)) * cur.innerText; // calculate item discount
      cur.innerText = itemdisc; // update item
      return acc + itemdisc; // update total
  }, 0);
  document.querySelector(".total-price-value").innerText = totalValue;

  // prevent discount from being applied more than once
  document.querySelector('.total__button').disabled = true;
}

Answer 2

As you iterate through the array of price items and use the reduce function, you are already processing each item to calculate the discounted price. Before updating the accumulator in the reduce function, make sure to update the value of the item.

Make changes to each item and add to the total:

// CHANGE:
// let totalValue = items.reduce((acc, cur) => acc + (1 - (numDiscount / 100)) * cur.innerText, 0);

// TO:
let totalValue = items.reduce((acc, cur) => {
    let itemdisc = (1 - (numDiscount / 100)) * cur.innerText; // calculate item discount
    cur.innerText = itemdisc; // update item
    return acc + itemdisc; // update total
}, 0);

Prevent applying the discount multiple times:

document.querySelector('.total__button').disabled = true;

Updated script:

function getDomNodesBySelector(selector) {
  return Array.from(document.querySelectorAll(selector));
}

document.querySelector('.total__button').addEventListener('click', applyDiscount);

function applyDiscount() {
  let items = getDomNodesBySelector(".price-value");
  let numDiscount = 15;
  let totalValue = items.reduce((acc, cur) => {
      let itemdisc = (1 - (numDiscount / 100)) * cur.innerText; // calculate item discount
      cur.innerText = itemdisc; // update item
      return acc + itemdisc; // update total
  }, 0);
  document.querySelector(".total-price-value").innerText = totalValue;

  // prevent discount from being applied more than once
  document.querySelector('.total__button').disabled = true;
}

Answer 3

Answer №2

Here's a simple JavaScript function:

function extractPrices(){

   var prices = document.querySelectorAll('.price-value');
   return Array.from(prices).map(price => price.textContent);

}

console.log(extractPrices())

This function will get the individual prices from the HTML and store them in an array for easy use.

Answer 4

Here's a simple JavaScript function:

function extractPrices(){

   var prices = document.querySelectorAll('.price-value');
   return Array.from(prices).map(price => price.textContent);

}

console.log(extractPrices())

This function will get the individual prices from the HTML and store them in an array for easy use.

What method can be used to determine the discount for individual items within an array when using reduce()?

Answer №1

Answer №2

Similar questions

Hey there everyone, I was wondering how to send both single and multiple values to a database using JavaScript and JSON endpoints with a Spring Web API

browsing and extracting information from JSON datasets

There appears to be an issue where the session object cannot be retrieved by the Struts2 action

Implementing URL routing and error handling in a Node.js application using the Express framework

What is the method to retrieve the character set of response data in an Ajax request?

Reveal the table only once a search has been completed

Utilizing Angular's locale feature for currency formats

How can I invoke a function within a directive-generated HTML element's scope?

Dealing with adding up optional values from v-model in Vue.js can be a challenging task

Enable the ability to scroll and click to navigate an overlapping Div element

Automatically populate dynamic fields with ajax response

Step-by-step guide to uploading files with Dredd using Swagger

Issues with Materialize autocomplete drop-down functionality

Tips for constructing a multi-dimensional entity from an existing object?

Learn how to use jQuery to load a text file containing arrays and then format them as

Make sure to include `jquery` in the types section of your tsconfig file

Top technique for mirroring a website

Direct your attention to the submit button

Express JS with multer is unable to process multiple file uploads, resulting in an empty array being

Automatically omitting a selector that mimics a switch