Build an Availability Table - Build an Availability Table

Curriculum Help
1

Tell us what’s happening:

Test case #39 is not recognizing the scope=“row” attribute that I have added to the table header cells per row as instructed. I’ve already tried running my code on any HTML validator just in case there are coding typos. Is this a bug or is there something I am not doing wrong?

Your code so far

<!-- file: index.html -->
<!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>Weekly Meeting Availability Schedule</caption>
    <thead>
      <tr>
        <th scope="col"></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>
        <th scope="col">Saturday</th>
        <th scope="col">Sunday</th>
      </tr>
    </thead>
    <tbody>
      <tr class="half">
        <th scope="row" class="time">9AM</th>
        <td aria-label=" available" class="available-5"></td>
        <td aria-label=" available" class="available-0"></td>
        <td aria-label=" available" class="available-5"></td>
        <td aria-label=" available" class="available-3"></td>
        <td aria-label=" available" class="available-2"></td>
        <td aria-label=" available" class="available-0"></td>
        <td aria-label=" available" class="available-3"></td>
      </tr>
      <tr class="sharp">
        <th scope="row" class="time">10AM</th>
        <td aria-label=" available" class="available-0"></td>
        <td aria-label=" available" class="available-5"></td>
        <td aria-label=" available" class="available-2"></td>
        <td aria-label=" available" class="available-1"></td>
        <td aria-label=" available" class="available-1"></td>
        <td aria-label=" available" class="available-2"></td>
        <td aria-label=" available" class="available-0"></td>
      </tr>
      <tr class="half">
        <th scope="row" class="time">11AM</th>
        <td aria-label=" available" class="available-1"></td>
        <td aria-label=" available" class="available-5"></td>
        <td aria-label=" available" class="available-5"></td>
        <td aria-label=" available" class="available-0"></td>
        <td aria-label=" available" class="available-4"></td>
        <td aria-label=" available" class="available-0"></td>
        <td aria-label=" available" class="available-1"></td>
      </tr>
      <tr class="sharp">
        <th scope="row" class="time">12PM</th>
        <td aria-label=" available" class="available-5"></td>
        <td aria-label=" available" class="available-0"></td>
        <td aria-label=" available" class="available-5"></td>
        <td aria-label=" available" class="available-4"></td>
        <td aria-label=" available" class="available-1"></td>
        <td aria-label=" available" class="available-3"></td>
        <td aria-label=" available" class="available-1"></td>
      </tr>
      <tr class="half">
        <th scope="row" class="time">1PM</th>
        <td aria-label=" available" class="available-1"></td>
        <td aria-label=" available" class="available-5"></td>
        <td aria-label=" available" class="available-4"></td>
        <td aria-label=" available" class="available-0"></td>
        <td aria-label=" available" class="available-4"></td>
        <td aria-label=" available" class="available-0"></td>
        <td aria-label=" available" class="available-2"></td>
      </tr>
    </tbody>
  </table>
  <div id="legend">
    <span>Availability </span>
    <div id="legend-gradient"></div>
  </div>
</body>

</html>

/* file: styles.css */
:root {
  --color0: #ffffff;
  --color1: #F0FFF0;
  --color2: #98FB98;
  --color3: #32CD32;
  --color4: #228B22;
  --color5: #003300;
  --solid-border: 1px solid black;
  --dashed-border:1px dashed black;
}

* {
  /* border: 1px solid black; */
}

.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);
}

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

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

table {
  table-layout: fixed;
  width: 100%;
  margin: 0 auto;
}

table tr td {
  height: 1em;
  border: 1px solid black;
  border-collapse: collapse;
}

#legend {
  width: 25%;
  margin: 1em auto;
}

#legend span {
  display: inline-block;
  width: 100%;
  text-align: center;
}

#legend-gradient {
  width: 50%;
  height: 1.25em;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid black;
  background-image: linear-gradient(to right, var(--color0) 0%, var(--color0) 16%, var(--color1) 16%, var(--color1) 33%, var(--color2) 33%, var(--color2) 49%, var(--color3) 49%, var(--color3) 65%, var(--color4) 65%, var(--color4) 81%, var(--color5) 81%, var(--color5) 100%);
  margin: .5em auto 0;
}

#legend-gradient::before {
  content: "0";
  position: absolute;
  left: -1.75em;
}

#legend-gradient::after {
  content: "5+";
  position: absolute;
  right: -2.25em;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/151.0.0.0 Safari/537.36

Challenge Information:

Build an Availability Table - Build an Availability Table

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-availability-table/66b36358ed4f261d64840c24.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

For added context, test 39 is:

  1. All table header cells in the first column should have a scope attribute with the value row.
3

Welcome to the forum @neahpanilag,

Try replacing your empty th with a row-scoped time.

Happy coding

4

Thanks for the response.

Unfortunately, it produced this error instead:

You should have at least four th elements with the class of time that contain time values.

I believe if it’s expecting a time-formatted element value if I add the time class.

5

Okay, I have actually managed to resolve this through a workaround but I still don’t feel this is a legitimate solution. I think the evaluation for this test case needs to be reviewed as I have seen several posts for this same issue:

<caption>Weekly Meeting Availability Schedule</caption>

<thead>

  <tr>
    /\*had to be hidden via CSS\*/

    <th scope="row" class="time">8AM</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>

    <th scope="col">Saturday</th>

    <th scope="col">Sunday</th>

  </tr>

</thead>

<tbody>

  <tr class="half">

    <th scope="row" class="time" rowspan="2">9AM</th>

    <td aria-label="5+ available" class="available-5"></td>

    <td aria-label="0 available" class="available-0"></td>

    <td aria-label="5+ available" class="available-5"></td>

    <td aria-label="3 available" class="available-3"></td>

    <td aria-label="2 available" class="available-2"></td>

    <td aria-label="0 available" class="available-0"></td>

    <td aria-label="3 available" class="available-3"></td>

  </tr>

  <tr class="sharp">

    <td aria-label="2 available" class="available-2"></td>

    <td aria-label="3 available" class="available-3"></td>

    <td aria-label="1 available" class="available-1"></td>

    <td aria-label="4 available" class="available-4"></td>

    <td aria-label="3 available" class="available-3"></td>

    <td aria-label="2 available" class="available-2"></td>

    <td aria-label="1 available" class="available-1"></td>

  </tr>
6
  1. You should have a table with at least three columns and five rows, headers included.

Please review how many rows should you have.

7

It’s all good – I have finished the test.

I just posted a shortened version of the code as I had way too many rows.

Thanks!