A basic sample code structure for a restaurant cashier application

Here’s a basic sample code structure for a restaurant cashier application using Electron.js, inspired by the interface. This will allow you to manage orders, calculate totals, and simulate a simple user interface for a cashier to interact with.

Step 1: Project Setup

Initialize the project and install Electron:bashCopy codemkdir mcdonald-cashier-app cd mcdonald-cashier-app npm init -y npm install electron --save-dev
Create the following folder structure:

goCopy codemcdonald-cashier-app/
│
├── package.json
├── main.js        // Main process (back-end logic)
├── index.html     // Front-end (UI)
├── renderer.js    // Front-end logic
└── assets/        // Optional (CSS, images, etc.)

Step 2: main.js (Main Electron Process)

This file sets up the Electron window and loads the HTML:

javascriptCopy codeconst { app, BrowserWindow } = require('electron');
const path = require('path');

let win;

function createWindow() {
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'renderer.js'),
      nodeIntegration: true,
    },
  });

  win.loadFile('index.html');
  win.on('closed', () => {
    win = null;
  });
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (win === null) {
    createWindow();
  }
});

Step 3: index.html (User Interface)

This HTML simulates a McDonald's cashier interface with a menu, an order summary, and buttons for placing orders.

htmlCopy code<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>McDonald's Cashier App</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>McDonald's Cashier</h1>
  <div class="container">
    <div class="menu">
      <h2>Menu</h2>
      <button onclick="addItem('Big Mac', 5.99)">Big Mac - $5.99</button>
      <button onclick="addItem('Fries', 2.49)">Fries - $2.49</button>
      <button onclick="addItem('Coke', 1.99)">Coke - $1.99</button>
      <button onclick="addItem('McNuggets', 4.49)">McNuggets - $4.49</button>
    </div>
    <div class="order-summary">
      <h2>Order Summary</h2>
      <ul id="order-list"></ul>
      <h3>Total: $<span id="total-price">0.00</span></h3>
      <button onclick="placeOrder()">Place Order</button>
    </div>
  </div>

  <script src="renderer.js"></script>
</body>
</html>

Step 4: renderer.js (Frontend Logic)

This script handles adding items to the order, calculating the total, and placing the order.

javascriptCopy codelet order = [];
let totalPrice = 0;

function addItem(item, price) {
  order.push({ item, price });
  updateOrderSummary();
}

function updateOrderSummary() {
  const orderList = document.getElementById('order-list');
  const totalElement = document.getElementById('total-price');

  // Clear the current order list
  orderList.innerHTML = '';

  // Add each item in the order to the list
  order.forEach((orderItem, index) => {
    const listItem = document.createElement('li');
    listItem.textContent = `${orderItem.item} - $${orderItem.price.toFixed(2)}`;
    orderList.appendChild(listItem);
  });

  // Update the total price
  totalPrice = order.reduce((total, item) => total + item.price, 0);
  totalElement.textContent = totalPrice.toFixed(2);
}

function placeOrder() {
  if (order.length === 0) {
    alert('No items in the order!');
    return;
  }

  alert(`Order placed! Total: $${totalPrice.toFixed(2)}`);
  // Reset the order
  order = [];
  updateOrderSummary();
}

Step 5: Optional CSS (styles.css)

To style the interface and make it look more like a cashier system:

cssCopy codebody {
  font-family: Arial, sans-serif;
  background-color: #f8f9fa;
  margin: 0;
  padding: 20px;
}

h1 {
  text-align: center;
  color: #d9534f;
}

.container {
  display: flex;
  justify-content: space-around;
}

.menu, .order-summary {
  width: 40%;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

button {
  display: block;
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  font-size: 16px;
  background-color: #5bc0de;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #31b0d5;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  padding: 5px 0;
}

h3 {
  margin-top: 20px;
}

Running the Application

Add this to your package.json File to enable launching the app:

jsonCopy code"scripts": {
  "start": "electron ."
}

Run the app:

bashCopy codenpm start

Explanation

Style: Simple CSS to make the interface resemble a cashier system.

Menu Section: Displays buttons for popular menu items like Big Mac, Fries, etc. When clicking a button, the addItem() function is called to add the item to the order.

Order Summary Section: Displays the ordered items and their prices and calculates the total. The placeOrder() function simulates placing the order.

Rendering: renderer.js Updates the DOM dynamically as items are added to or removed from the order.