Skip to main content

Command Palette

Search for a command to run...

[JavaScript] PROJECT: "Bankist" App - Sorting Arrays

Published
•View as Markdown
[JavaScript] PROJECT: "Bankist" App - Sorting Arrays
const movements = [200, 450, -400, 3000, -650, -130, 70, 1300];

// Strings
const owners = ['Jonas', 'Zach', 'Adam', 'Martha'];
console.log(owners.sort());
console.log(owners);

// Numbers
console.log(movements);
console.log(movements.sort()); // want sorting numbers, but it looks like sorted strings.

// return < 0, A, B (keep order)
// return > 0, B, A (switch order)

// Ascending
// movements.sort((a, b) => {
//   if (a > b) return 1;
//   if (a < b) return -1;
// });
movements.sort((a, b) => a - b);
console.log(movements);

// Descending
// movements.sort((a, b) => {
//   if (a > b) return -1;
//   if (a < b) return 1;
// });
movements.sort((a, b) => b - a);
console.log(movements);

// Mix strings and numbers is not working with sort!

sorting.PNG

  • in Bankist App
const displayMovements = function (movements, sort = false) {
  containerMovements.innerHTML = '';
  //similar to '.textContent = 0' in pig-game

  const movs = sort ? movements.slice().sort((a, b) => a - b) : movements;

  movs.forEach(function (mov, i) {
    const type = mov > 0 ? 'deposit' : 'withdrawal';

    const html = `
      <div class="movements__row">
        <div class="movements__type movements__type--${type}">${
      i + 1
    } ${type}</div>
        <div class="movements__value">${mov}€</div>
      </div>
    `;

    containerMovements.insertAdjacentHTML('afterbegin', html);
  });
};

let sorted = false;
btnSort.addEventListener('click', function (e) {
  e.preventDefault();
  displayMovements(currentAccount.movements, !sorted);
  sorted = !sorted;
});

sorting movements.PNG

JavaScript

Part 1 of 50

More from this blog

Jayden's Blog

166 posts