Scrimba Solo Project - Restaurant Ordering App (Part 1)

• Today i working on the solo project of restaurant ordering app as part of the 'Essential JavaScript Concept' chapter's exercise on Scrimba.

• The whole page is create by JavaScript. header part is hard code and appendChild into web. Then the menu part is iterate thru menuArray as shown below and render out into page.
  

// data.js
export const menuArray = [
  {
    name: 'Pizza',
    ingredients: ['pepperoni', 'mushrom', 'mozarella'],
    id: 0,
    price: 14,
    image: 'image/pizza.png',
  },
  {
    name: 'Hamburger',
    ingredients: ['beef', 'cheese', 'lettuce'],
    price: 12,
    image: 'image/burger.png',
    id: 1,
  },
  {
    name: 'Beer',
    ingredients: ['grain, hops, yeast, water'],
    price: 12,
    image: 'image/beer.png',
    id: 2,
  },
];

• The next part is to use addEventLister on page to detect the add item button and then add the item into 'your order' section. And setup the light grey color of remove button to remove the list item.

• Then i stuck on how to calculate the total price and print on the total price part. At first I try to create an empty array, so every time user click on the add button, the item object will add into the empty array then only i do the calculation by .reduce() method.
  

function calculateTotalPrice() {
  const totalPriceElement = document.querySelector('#total-price');
  const orderItemPrices = document.querySelectorAll('.order-item-price');

  let total = 0;
  orderItemPrices.forEach((price) => {
    total += parseFloat(price.textContent.replace('$', ''));
  });

  totalPriceElement.textContent = `$${total.toFixed(2)}`;
}

• But then i only realize actually i can straight got thru all item price with document.querySelectorAll('.order-item-price') and then total up the price. Problem solve! Tomorrow will continue on this project.

let life = {
  first: 'eat',
  second: 'sleep',
  third: 'code',
  forth: 'repeat',
}

const {first, second, third, forth} = life

console.log(`${first[0].toUpperCase() + first.slice(1)}, ${second[0].toUpperCase() + second.slice(1)}, ${third[0].toUpperCase() + third.slice(1)}, ${forth[0].toUpperCase() + forth.slice(1)}!`)

Andrew Tan