index.html

<!DOCTYPE html>
<html>
<head>
  <title>FoodPanda Clone</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <header>
    <h1>FoodPanda Clone</h1>
  </header>
  
  <section id="restaurants">
    <h2>Available Restaurants</h2>
    <ul id="restaurant-list"></ul>
  </section>
  
  <section id="menu">
    <h2>Menu</h2>
    <ul id="menu-list"></ul>
  </section>
  
  <section id="cart">
    <h2>Cart</h2>
    <ul id="cart-items"></ul>
    <p id="total-price">Total Price: $0</p>
    <button id="checkout-btn">Checkout</button>
  </section>

  <script src="script.js"></script>
</body>
</html>
<style>
CSS (style.css):

css
Copy code
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

header {
  background-color: #f2f2f2;
  padding: 20px;
}

#restaurants, #menu, #cart {
  margin: 20px;
}

h2 {
  margin-top: 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin-bottom: 10px;
}

#total-price {
  font-weight: bold;
}

#checkout-btn {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>
<script>
JavaScript (script.js):

javascript
Copy code
document.addEventListener("DOMContentLoaded", function() {
  const restaurantList = document.getElementById("restaurant-list");
  const menuList = document.getElementById("menu-list");
  const cartItems = document.getElementById("cart-items");
  const totalPrice = document.getElementById("total-price");
  const checkoutBtn = document.getElementById("checkout-btn");

  const restaurants = [
    { id: 1, name: "Restaurant 1" },
    { id: 2, name: "Restaurant 2" },
    { id: 3, name: "Restaurant 3" }
  ];

  const menu = [
    { id: 1, name: "Item 1", price: 10 },
    { id: 2, name: "Item 2", price: 15 },
    { id: 3, name: "Item 3", price: 8 }
  ];

  let cart = [];

  function renderRestaurantList() {
    restaurantList.innerHTML = "";
    for (const restaurant of restaurants) {
      const li = document.createElement("li");
      li.innerText = restaurant.name;
      li.addEventListener("click", function() {
        renderMenu(restaurant.id);
      });
      restaurantList.appendChild(li);
    }
  }

  function renderMenu(restaurantId) {
    menuList.innerHTML = "";
    for (const item of menu) {
      const li = document.createElement("li");
      li.innerText = `${item.name} - $${item.price}`;
      li.addEventListener("click", function() {
        addToCart(item);
      });
      menuList.appendChild(li);
    }
  }

  function addToCart
</script>