DEV Community

anderu
anderu

Posted on

Scrimba Solo Project - Restaurant Ordering App (Part 1)

screenshot of restaurant ordering app

  • 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,
  },
];

Enter fullscreen mode Exit fullscreen mode
  • 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)}`;
}
Enter fullscreen mode Exit fullscreen mode
  • 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)}!`)
Enter fullscreen mode Exit fullscreen mode

Andrew Tan

Top comments (0)