Build an Availability Table - step 11

Tell us what’s happening:

Im stuck on step 11, ive double triple checked my code… Any tips please?

Your code so far

<!-- file: index.html -->

/* file: styles.css */

Your browser information:

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

Challenge Information:

Build an Availability Table - Build an Availability Table

Hey there,

Please update the message to include your code. The code was too long to be automatically inserted by the help button.

When you enter a code, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

<!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 starts here-->
    <table class="sharp">
        <tr class="header">
            <div class="hidden"><th>Day/Time</th></div>
            <th class="day">Monday</th>
            <th class="day">Tuesday</th>
            <th class="day">Wednesday</th>
            <th class="day">Thursday</th>
            <th class="day">Friday</th>
        </tr>
        <tr class = "sharp row one">
            <th class="time">9 AM</th>
            <td class="available-0"></td>
            <td class="available-1"></td>
            <td class="available-2"></td>
            <td class="available-3"></td>
            <td class="available-4"></td>

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

        </tr>
        <tr class = "sharp row three">
            <th class="time">11AM</th>
            <td class="available-0"></td>
            <td class="available-5"></td>
            <td class="available-3"></td>
            <td class="available-4"></td>
            <td class="available-2"></td>

        </tr>
        <tr class = "half row four">
            <th class="time">12PM</th>
            <td class="available-2"></td>
            <td class="available-3"></td>
            <td class="available-2"></td>
            <td class="available-3"></td>
            <td class="available-1"></td>

        </tr>
        <tr class = "sharp row five">
            <th class="time">1 PM</th>
            <td class="available-4"></td>
            <td class="available-1"></td>
            <td class="available-3"></td>
            <td class="available-5"></td>
            <td class="available-0"></td>

        </tr>
        <tr class = "half row six">
            <th class="time">2 PM</th>
            <td class="available-0"></td>
            <td class="available-3"></td>
            <td class="available-5"></td>
            <td class="available-2"></td>
            <td class="available-3"></td>

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

        </tr>
    </table>
    <!--table ends here-->
    <div id="legend">
        <span>Availability</span>
        <div id="legend-gradient"></div>
    </div>
</body>

</html>
:root {
  --color0: lightgrey;
  --color1: #aff6fe;
  --color2: #7eecf8;
  --color3: #36e8fc;
  --color4: #0fb5c8;
  --color5: teal;
  --solid-border: 1px solid #000;
  --dashed-border: 1px dashed #777;
}
* {
  box-sizing: border-box;
}
.half td{
  border-bottom: var(--dashed-border);
}
table {
  border-collapse: collapse;
  margin: 50px auto;
  padding: 10px;
  width: 80%;
}
.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);
}

#legend {
  color: teal;
  font-size: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#legend-gradient {
  display: block;
  width: 100px; height: 20px;
  background-image: linear-gradient(90deg,
    var(--color0) 0% 17%,
    var(--color1) 17% 34%,
    var(--color2) 34% 49%,
    var(--color3) 49% 65%,
    var(--color4) 65% 82%,
    var(--color5) 82% 100%
  );
  border: var(--solid-border);

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

}

i sent it in a reply because i couldnt figure out how to update the post

the tests do not expect extra classes on the tr elements

you can report this if you think this is a bug opening a github issue

oh okay ill fix this thank you
i didnt realize tr elements were being graded in the td section

well, they are not technically graded there, but the tests need to find the right td elements. You can report this as a bug