Full Stack Dev - Build An Availability Table Test Bug

freeCodeCamp Support
1

I noticed when trying to satisfy test case 4. Your table should have at least 3 columns it fails when there is an empty first row. When I remove the empty row then it passes. The problem with this is, there is test case 6. that specifies there to be an empty first row.

Build An Availability Table

Here is my current code to test:

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

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Availability Table</title>
  <link rel="stylesheet" href="styles.css" />
</head>

<body>
  <table>
    <caption>
      Availability
    </caption>

    <thead>
      <tr>
        <th></th>
        <th>Monday</th>
        <th>Tuesday</th>
        <th>Wednesday</th>
        <th>Thursday</th>
        <th>Friday</th>
        <th>Saturday</th>
        <th>Sunday</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        
      </tr>
      <tr>
        <td class="time">5 AM</td>
        <td class="available-1"></td>
        <td class="available-1"></td>
        <td class="available-1"></td>
        <td class="available-1"></td>
        <td class="available-0"></td>
        <td class="available-0"></td>
        <td class="available-0"></td>
      </tr>

      <tr>
        <td class="time">6 AM</td>
        <td class="available-1"></td>
        <td class="available-1"></td>
        <td class="available-1"></td>
        <td class="available-1"></td>
        <td class="available-1"></td>
        <td class="available-1"></td>
        <td class="available-0"></td>
      </tr>

      <tr class="sharp">
        <td class="time">7 AM</td>
        <td class="available-5"></td>
        <td class="available-5"></td>
        <td class="available-5"></td>
        <td class="available-5"></td>
        <td class="available-4"></td>
        <td class="available-1"></td>
        <td class="available-0"></td>
      </tr>

      <tr class="sharp">
        <td class="time">8 AM</td>
        <td class="available-5"></td>
        <td class="available-5"></td>
        <td class="available-5"></td>
        <td class="available-5"></td>
        <td class="available-4"></td>
        <td class="available-2"></td>
        <td class="available-0"></td>
      </tr>

      <tr class="half">
        <td class="time">9 AM</td>
        <td class="available-5"></td>
        <td class="available-5"></td>
        <td class="available-5"></td>
        <td class="available-5"></td>
        <td class="available-4"></td>
        <td class="available-2"></td>
        <td class="available-0"></td>
      </tr>

      <tr class="half">
        <td class="time">10 AM</td>
        <td class="available-4"></td>
        <td class="available-4"></td>
        <td class="available-3"></td>
        <td class="available-3"></td>
        <td class="available-3"></td>
        <td class="available-2"></td>
        <td class="available-0"></td>
      </tr>

      <tr>
        <td class="time">11 AM</td>
        <td class="available-4"></td>
        <td class="available-5"></td>
        <td class="available-5"></td>
        <td class="available-5"></td>
        <td class="available-4"></td>
        <td class="available-2"></td>
        <td class="available-1"></td>
      </tr>

      <tr>
        <td class="time">12 PM</td>
        <td class="available-5"></td>
        <td class="available-5"></td>
        <td class="available-4"></td>
        <td class="available-5"></td>
        <td class="available-3"></td>
        <td class="available-2"></td>
        <td class="available-1"></td>
      </tr>

      <tr>
        <td class="time">1 PM</td>
        <td class="available-4"></td>
        <td class="available-4"></td>
        <td class="available-3"></td>
        <td class="available-4"></td>
        <td class="available-3"></td>
        <td class="available-2"></td>
        <td class="available-1"></td>
      </tr>

      <tr>
        <td class="time">2 PM</td>
        <td class="available-2"></td>
        <td class="available-2"></td>
        <td class="available-2"></td>
        <td class="available-2"></td>
        <td class="available-2"></td>
        <td class="available-1"></td>
        <td class="available-0"></td>
      </tr>

      <tr>
        <td class="time">3 PM</td>
        <td class="available-1"></td>
        <td class="available-1"></td>
        <td class="available-1"></td>
        <td class="available-1"></td>
        <td class="available-1"></td>
        <td class="available-1"></td>
        <td class="available-0"></td>
      </tr>
    </tbody>
  </table>
</body>

</html>
2

Thank you for reporting this issue. The problem is indeed with the 6th test.

To be clear, that tests refers to the first row in your table, that is the heading row. It’s not asking to put an empty row anywhere. For the way it’s written it fails because you used (correctly) a thead for the heading row and a tbody for the rest of your table.

We will fix the test soon. For now, if you want to keep working on this lab you should be able to remove both your thead and tbody and keep all the tr directly within the `table.

3

Thank you that worked.

1 Like