Build an Availability Table - Build an Availability Table

Curriculum Help
1

Tell us what’s happening:

hello everyone, the tests i failed are 38 and 39, one tells me to add scope=“col” to all headers in the first row and the other tells me to add scope=“row” to all headers in the first column but the top left corner cell cant have both at the same time and it fails me one of the two tests each time, i tried to turn it into data cell but another test tells me that all first row cells must be headers. can someone help me with this? thanks.

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>
            </tr>
        </thead>
        <tbody>
            <tr class="sharp">
                <th scope="row" class="time">9AM</th>
                <td class="available-0" aria-label="0 available"></td>
                <td class="available-2" aria-label="2 available"></td>
                <td class="available-3" aria-label="3 available"></td>
                <td class="available-3" aria-label="3 available"></td>
                <td class="available-5" aria-label="5+ available"></td>
            </tr>
            <tr class="half">
                <th scope="row" class="time">10AM</th>
                <td class="available-3" aria-label="3 available"></td>
                <td class="available-4" aria-label="4 available"></td>
                <td class="available-4" aria-label="4 available"></td>
                <td class="available-5" aria-label="5+ available"></td>
                <td class="available-5" aria-label="5+ available"></td>
            </tr>
            <tr class="sharp">
                <th scope="row"></th>
                <td class="available-3" aria-label="3 available"></td>
                <td class="available-4" aria-label="4 available"></td>
                <td class="available-5" aria-label="5+ available"></td>
                <td class="available-5" aria-label="5+ available"></td>
                <td class="available-5" aria-label="5+ available"></td>
            </tr>
            <tr class="half">
                <th scope="row" class="time">11AM</th>
                <td class="available-0" aria-label="0 available"></td>
                <td class="available-2" aria-label="2 available"></td>
                <td class="available-4" aria-label="4 available"></td>
                <td class="available-4" aria-label="4 available"></td>
                <td class="available-0" aria-label="0 available"></td>
            </tr>
            <tr class="sharp">
                <th scope="row"></th>
                <td class="available-3" aria-label="3 available"></td>
                <td class="available-4" aria-label="4 available"></td>
                <td class="available-2" aria-label="2 available"></td>
                <td class="available-5" aria-label="5+ available"></td>
                <td class="available-5" aria-label="5+ available"></td>
            </tr>
            <tr class="half">
                <th scope="row" class="time">12PM</th>
                <td class="available-5" aria-label="5+ available"></td>
                <td class="available-5" aria-label="5+ available"></td>
                <td class="available-3" aria-label="3 available"></td>
                <td class="available-2" aria-label="2 available"></td>
                <td class="available-0" aria-label="0 available"></td>
            </tr>
            <tr class="sharp">
                <th scope="row"></th>
                <td class="available-3" aria-label="3 available"></td>
                <td class="available-0" aria-label="0 available"></td>
                <td class="available-4" aria-label="4 available"></td>
                <td class="available-5" aria-label="5+ available"></td>
                <td class="available-5" aria-label="5+ available"></td>
            </tr>
        </tbody>
    </table>
    <div id="legend">
        <span>Availability</span>
        <span>0</span><div id="legend-gradient"></div><span>5+</span>
    </div>
</body>

</html>

/* file: styles.css */
:root {
  --solid-border: 1px solid black;
  --dashed-border: 1px dashed black;
  --color0: #ffffff;
  --color1: #c6f7b7;
  --color2: #95e37d;
  --color3: #60de3a;
  --color4: #4fa137;
  --color5: #217807;
  --bg-color: #1d262e;
}

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-color);
  color: linen;
  font-family: "Open sans", sans-serif;
  font-size: 1.1rem;
  width: 100vw;
  height: 100vh;
}

table {
  width: 500px;
  margin: 20px auto;
  border-collapse: collapse;
}

table * {
  padding: 5px 12px;
}

tbody td {
  height: 15px;
  border-left: 1px solid black;
  border-right: 1px solid black;
}

tbody tr:first-of-type td {
  border-top: 1px solid black;
}

tbody tr:first-of-type th {
  position: relative;
  top: -9px;
}

tbody tr:not(:first-of-type) th {
  position: relative;
  top: 15px;
}

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

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

#legend-gradient {
  display: inline-block;
  width: 120px;
  height: 15px;
  background-image: linear-gradient(
    90deg,
    var(--color0) 0%,
    var(--color0) 17%,
    var(--color1) 17%,
    var(--color1) 33%,
    var(--color2) 33%,
    var(--color2) 50%,
    var(--color3) 50%,
    var(--color3) 67%,
    var(--color4) 67%,
    var(--color4) 83%,
    var(--color5) 83%,
    var(--color5) 100%
  );
}

#legend {
  width: 250px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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

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

Hi @hocineneder7,

Try replacing this header cell with a .time row-scoped header cell.

Happy coding

3

The evaluation for these test cases are flawed. I know we are not supposed to copy the given example but it can’t be avoided that the top left most cell can be empty, otherwise, you have a broken layout.

Now, the test cases will either check for a scope=“col” first, then scope=“row” next for the top left most cell. Even if you have done what the user story is asking (each th on the tbody should have scope=“row”), the evaluation will still fail because of that empty top left cell.

As a workaround, I used the following to replace the top left empty cell:

<th scope="row" class="time">8AM</th>

*NOTE: the ‘8AM’ value is necessary since the time class’ evaluation (yet again, another flaw) expects a time value string.

Luckily, you can hide this 8AM text via CSS.

4

There are issues, yes. The tests will be less strict with the next deployment.