Build an Availability Table 39 part

Curriculum Help
1

Tell us what’s happening:

Your code so far

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Weekly Meeting Availability</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>

  <main>
    <h1>Team Meeting Planner</h1>

    <table>
      <caption>Weekly Meeting Availability Schedule</caption>

      <thead>
        <tr>
          <th scope="col">Time</th>
          <th scope="col">Monday</th>
          <th scope="col">Tuesday</th>
          <th scope="col">Wednesday</th>
          <th scope="col">Thursday</th>
          <th scope="col">Friday</th>
        </tr>
      </thead>

      <tbody>

        <tr class="sharp">
          <th class="time" scope="row">9:00 AM</th>
          <td class="available-5" aria-label="5+ available">5+</td>
          <td class="available-4" aria-label="4 available">4</td>
          <td class="available-3" aria-label="3 available">3</td>
          <td class="available-2" aria-label="2 available">2</td>
          <td class="available-1" aria-label="1 available">1</td>
        </tr>

        <tr class="half">
          <th class="time" scope="row">10:00 AM</th>
          <td class="available-3" aria-label="3 available">3</td>
          <td class="available-5" aria-label="5+ available">5+</td>
          <td class="available-4" aria-label="4 available">4</td>
          <td class="available-1" aria-label="1 available">1</td>
          <td class="available-2" aria-label="2 available">2</td>
        </tr>

        <tr class="sharp">
          <th class="time" scope="row">11:00 AM</th>
          <td class="available-2" aria-label="2 available">2</td>
          <td class="available-3" aria-label="3 available">3</td>
          <td class="available-5" aria-label="5+ available">5+</td>
          <td class="available-4" aria-label="4 available">4</td>
          <td class="available-0" aria-label="0 available">0</td>
        </tr>

        <tr class="half">
          <th class="time" scope="row">1:00 PM</th>
          <td class="available-1" aria-label="1 available">1</td>
          <td class="available-2" aria-label="2 available">2</td>
          <td class="available-3" aria-label="3 available">3</td>
          <td class="available-5" aria-label="5+ available">5+</td>
          <td class="available-4" aria-label="4 available">4</td>
        </tr>

        <tr class="sharp">
          <th class="time" scope="row">2:00 PM</th>
          <td class="available-4" aria-label="4 available">4</td>
          <td class="available-1" aria-label="1 available">1</td>
          <td class="available-2" aria-label="2 available">2</td>
          <td class="available-3" aria-label="3 available">3</td>
          <td class="available-5" aria-label="5+ available">5+</td>
        </tr>

      </tbody>
    </table>

    <div id="legend">
      <span>Availability</span>
      <div id="legend-gradient"></div>
    </div>

  </main>

</body>
</html>

:root {
  --color0: #f4cccc;
  --color1: #fce5cd;
  --color2: #fff2cc;
  --color3: #d9ead3;
  --color4: #b6d7a8;
  --color5: #76a5af;

  --solid-border: 2px solid #333;
  --dashed-border: 2px dashed #333;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 40px 20px;
  font-family: Arial, sans-serif;
  background-color: #f5f7fa;
  color: #222;
}

main {
  max-width: 1000px;
  margin: auto;
}

h1 {
  text-align: center;
  margin-bottom: 30px;
}

table {
  width: 100%;
  border-collapse: collapse;
  background-color: white;
}

caption {
  font-size: 1.4rem;
  font-weight: bold;
  padding: 15px;
}

th,
td {
  padding: 15px;
  text-align: center;
  border: 1px solid #ccc;
}

thead th {
  background-color: #243447;
  color: white;
}

.time {
  background-color: #e9ecef;
  font-weight: bold;
}

/* Availability colors */

.available-0 {
  background-color: var(--color0);
}

.available-1 {
  background-color: var(--color1);
}

.available-2 {
  background-color: var(--color2);
}

.available-3 {
  background-color: var(--color3);
}

.available-4 {
  background-color: var(--color4);
}

.available-5 {
  background-color: var(--color5);
}

/* Row borders */

.sharp td {
  border-bottom: var(--solid-border);
}

.half td {
  border-bottom: var(--dashed-border);
}

/* Legend */

#legend {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 15px;
  font-weight: bold;
}

#legend-gradient {
  height: 25px;
  flex: 1;
  border: 1px solid #333;

  background-image: linear-gradient(
    to right,
    var(--color0) 0%,
    var(--color0) 16%,
    var(--color1) 16%,
    var(--color1) 33%,
    var(--color2) 33%,
    var(--color2) 50%,
    var(--color3) 50%,
    var(--color3) 66%,
    var(--color4) 66%,
    var(--color4) 83%,
    var(--color5) 83%,
    var(--color5) 100%
  );
}

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

i cant fix the 39 whats the problem in it

2

Welcome to the forum @hisaankhan113,

Try formatting this header like your other .time headers.

Happy coding