What to make an website

Curriculum Help
1

Tell us what’s happening:

Your code so far

<!DOCTYPE html>
<html>
<head>
  <title>Local Service App</title>
  <style>
    body {
      font-family: Arial;
      background: #f5f5f5;
      margin: 0;
      padding: 0;
    }

    h1 {
      text-align: center;
      background: #2c3e50;
      color: white;
      padding: 15px;
    }

    .container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }

    .card {
      background: white;
      width: 250px;
      margin: 15px;
      padding: 15px;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }

    .card h3 {
      margin: 5px 0;
    }

    .available {
      color: green;
    }

    .not-available {
      color: red;
    }

    button {
      padding: 10px;
      background: #27ae60;
      color: white;
      border: none;
      width: 100%;
      border-radius: 5px;
      cursor: pointer;
    }

    select {
      margin: 10px;
      padding: 10px;
    }
  </style>
</head>

<body>

<h1>🔧 Local Service Finder</h1>

<center>
  <select onchange="filterService(this.value)">
    <option value="all">All Services</option>
    <option value="maid">Maid</option>
    <option value="plumber">Plumber</option>
    <option value="electrician">Electrician</option>
  </select>
</center>

<div class="container" id="workerList"></div>

<script>
  const workers = [
    {name: "Ravi", type: "plumber", price: 300, available: true, time: "30 min"},
    {name: "Sita", type: "maid", price: 200, available: false, time: "1 hour"},
    {name: "Aman", type: "electrician", price: 400, available: true, time: "20 min"},
    {name: "Pooja", type: "maid", price: 250, available: true, time: "40 min"}
  ];

  function displayWorkers(list) {
    let container = document.getElementById("workerList");
    container.innerHTML = "";

    list.forEach(worker => {
      let card = document.createElement("div");
      card.className = "card";

      card.innerHTML = `
        <h3>${worker.name}</h3>
        <p>Service: ${worker.type}</p>
        <p>Price: ₹${worker.price}</p>
        <p>Arrival: ${worker.time}</p>
        <p class="${worker.available ? 'available' : 'not-available'}">
          ${worker.available ? 'Available' : 'Not Available'}
        </p>
        <button onclick="book('${worker.name}')">Book</button>
      `;

      container.appendChild(card);
    });
  }

  function filterService(type) {
    if (type === "all") {
      displayWorkers(workers);
    } else {
      let filtered = workers.filter(w => w.type === type);
      displayWorkers(filtered);
    }
  }

  function book(name) {
    alert("Booking confirmed for " + name);
  }

  displayWorkers(workers);
</script>

</body>
</html>

Lesson URL (copy - paste from your browser’s address bar)

2

Welcome to the forum,

Do you have a question about the code you posted?

3

HI buddy here you need to tell what is the problem ?