JSFiddle - React, Tailwind, and code Playground

by Prathameshsb

HTML

<div class="app">
  <div class="menu">
    <!-- Menu items will be displayed here -->
  </div>
  <div class="order">
    <!-- Order list and summary will be displayed here -->
  </div>
</div>

CSS

body {
  font-family: Arial, sans-serif;
}

.app {
  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: 'Burger', price: 10 },
  { id: 2, name: 'Pizza', price: 12 },
  { id: 3, name: 'Pasta', price: 8 },
  { id: 4, name: 'Salad', price: 6 }
];

const initialState = {
  menuData: menuData,
  order: [],
  total: { amount: 0, tip: 0 },
  like: {}
};

const app = document.querySelector('.app');
const menuDiv = document.querySelector('.menu');
const orderDiv = document.querySelector('.order');

function renderMenuItem(item) {
  const menuItem = document.createElement('div');
  menuItem.className = 'menu-item';

  const itemName = document.createElement('p');
  itemName.textContent = item.name;
  menuItem.appendChild(itemName);

  const itemPrice = document.createElement('p');
  itemPrice.textContent = `$${item.price}`;
  menuItem.appendChild(itemPrice);

  const addToCartBtn = document.createElement('button');
  addToCartBtn.className = 'add-to-cart';
  addToCartBtn.textContent = 'Add to cart';
  addToCartBtn.addEventListener('click', () => addToCart(item));
  menuItem.appendChild(addToCartBtn);

  const upvoteDiv = document.createElement('div');
  upvoteDiv.className = 'upvote';
  const likeCount = document.createElement('span');
  likeCount.textContent = state.like[item.name] || 0;
  const likeBtn = document.createElement('button');
  likeBtn.textContent = 'Like';
  likeBtn.addEventListener('click', () => updateLike(item));
  upvoteDiv.appendChild(likeCount);
  upvoteDiv.appendChild(likeBtn);
  menuItem.appendChild(upvoteDiv);

  menuDiv.appendChild(menuItem);
}

function renderMenu(menu) {
  menuDiv.innerHTML = '';
  menu.forEach(renderMenuItem);
}

function renderOrderItem(item) {
  const orderItem = document.createElement('div');
  orderItem.className = 'order-item';

  const itemName = document.createElement('h3');
  itemName.textContent = item.name;
  orderItem.appendChild(itemName);

  const orderActions = document.createElement('div');
  orderActions.className = 'order-actions';

  const decreaseBtn =...