JSFiddle - React, Tailwind, and code Playground

by Prathameshsb

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Menu and Order</title>
</head>

<body>
  <div class="app">
    <div class="menu">
      <h2>Menu</h2>
      <form>
        <span class="search">Search: </span>
        <input class="search-input" type="search" placeholder="Search food item..." oninput="handleSearch(event)">
      </form>
      <div id="menu-items"></div>
    </div>
    <div class="order">
      <h2>Order List</h2>
      <div id="order-items"></div>
      <h2>Order Summary</h2>
      <div id="order-summary"></div>
    </div>
  </div>
  <script src="script.js"></script>
</body>

</html>

CSS

.app {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: space-between;
  padding: 20px;
}

.order,
.menu {
  flex: 1;
  padding: 10px;
}

.upvote {
  margin-top: 10px;
}

.search {
  font-size: 18px;
  font-weight: bold;
}

.search-input {
  width: 75%;
  height: 25px;
  border: 2px solid black;
  border-radius: 5px;
  margin-bottom: 10px;
}

h2 {
  text-align: center;
}

button {
  cursor: pointer;
  border-radius: 5px;
}

.add-to-cart {
  background-color: gold;
  border: none;
  padding: 5px 10px;
}

.menu-item,
.order-item {
  background-color: #f2f2f2;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
}

.order-actions button {
  padding: 5px 10px;
  margin: 0 5px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 3px;
}

.order-actions .remove {
  background-color: #ff0000;
}

JavaScript

const menuData = [
  { "id": 1, "name": "Pizza", "price": 10 },
  { "id": 2, "name": "Burger", "price": 8 },
  { "id": 3, "name": "Pasta", "price": 12 },
  { "id": 4, "name": "Ramen", "price": 6 },
  { "id": 5, "name": "Taco", "price": 6 },
  { "id": 6, "name": "Sushi", "price": 6 },
  { "id": 7, "name": "Sandwiches", "price": 6 },
  { "id": 8, "name": "Boba", "price": 6 },
  { "id": 9, "name": "Fried Rice", "price": 6 },
  { "id": 10, "name": "Butter Chicken", "price": 6 },
  { "id": 11, "name": "Hot Dog", "price": 6 }
];

const menuItemsContainer = document.getElementById("menu-items");
const orderItemsContainer = document.getElementById("order-items");
const orderSummaryContainer = document.getElementById("order-summary");

let order = [];
let like = {};

function renderMenuItems() {
  menuItemsContainer.innerHTML = "";
  menuData.forEach(item => {
    const menuItem = document.createElement("div");
    menuItem.className = "menu-item";
    menuItem.innerHTML = `
      <p>${item.name}</p>
      <p>$${item.price}</p>
      <button class="add-to-cart" onclick="addToCart(${item.id})">Add to cart</button>
      <div class="upvote">
        <span>${like[item.name] || 0}</span>
        <button onclick="updateLike('${item.name}')">Like</button>
      </div>
    `;
    menuItemsContainer.appendChild(menuItem);
  });
}

function addToCart(itemId) {
  const selectedItem = menuData.find(item => item.id === itemId);
  const existingItem = order.find(orderItem => orderItem.id === itemId);

  if (existingItem) {
    existingItem.quantity++;
  } else {
    order.push({ ...selectedItem, quantity: 1 });
  }

  renderOrderItems();
}

function renderOrderItems() {
  orderItemsContainer.innerHTML = "";
  order.forEach(item => {
    const orderItem = document.createElement("div");
    orderItem.className = "order-item";
    orderItem.innerHTML = `
      <h3>${item.name}</h3>
      <div class="order-actions">
        <button onclick="updateOrder(${item.id}, ${item.quantity -...