CSS Variables - Lab(Build an Availability Table) - Step 11

Everything passes except step 11.

  1. All your td elements should have the class of available-# , where # is a number from 0 to 5 .
<!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>
    <main>
        <table>
            <thead>
                <tr>
                    <th>Time</th>
                    <th>Sunday</th>
                    <th>Monday</th>
                    <th>Tuesday</th>
                    <th>Wednesday</th>
                    <th>Thursday</th>
                    <th>Friday</th> 
                    <th>Saturday</th>
                </tr>
            </thead>
            <tbody>
                <tr class="sharp">
                    <th rowspan="2" class="time">9:00 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>
                    <td class="available-5"></td>
                    <td class="available-1"></td>
                </tr>
                <tr class="half">
                    <td class="available-2"></td>
                    <td class="available-4"></td>
                    <td class="available-0"></td>
                    <td class="available-3"></td>
                    <td class="available-5"></td>
                    <td class="available-1"></td>
                    <td class="available-3"></td>
                </tr>
                <tr class="sharp">
                    <th rowspan="2" class="time">10:00 am</th>
                    <td class="available-3"></td>
                    <td class="available-0"></td>
                    <td class="available-5"></td>
                    <td class="available-2"></td>
                    <td class="available-4"></td>
                    <td class="available-1"></td>
                    <td class="available-4"></td>
                </tr>
                <tr class="half">
                    <td class="available-1"></td>
                    <td class="available-4"></td>
                    <td class="available-2"></td>
                    <td class="available-0"></td>
                    <td class="available-5"></td>
                    <td class="available-3"></td>
                    <td class="available-2"></td>
                </tr>
                <tr class="sharp">
                    <th rowspan="2" class="time">11:00 am</th>
                    <td class="available-1"></td>
                    <td class="available-2"></td>
                    <td class="available-4"></td>
                    <td class="available-3"></td>
                    <td class="available-5"></td>
                    <td class="available-0"></td>
                    <td class="available-3"></td>
                </tr>
                <tr class="half">
                    <td class="available-3"></td>
                    <td class="available-1"></td>
                    <td class="available-5"></td>
                    <td class="available-4"></td>
                    <td class="available-2"></td>
                    <td class="available-0"></td>
                    <td class="available-2"></td>
                </tr>
                <tr class="sharp">
                    <th rowspan="2" class="time">12:00 pm</th>
                    <td class="available-4"></td>
                    <td class="available-5"></td>
                    <td class="available-1"></td>
                    <td class="available-0"></td>
                    <td class="available-3"></td>
                    <td class="available-2"></td>
                    <td class="available-0"></td>
                </tr>
                <tr class="half">
                    <td class="available-0"></td>
                    <td class="available-3"></td>
                    <td class="available-5"></td>
                    <td class="available-1"></td>
                    <td class="available-2"></td>
                    <td class="available-4"></td>
                    <td class="available-1"></td>
                </tr>
                <tr class="sharp">
                    <th rowspan="2" class="time">1:00 pm</th>
                    <td class="available-2"></td>
                    <td class="available-3"></td>
                    <td class="available-1"></td>
                    <td class="available-4"></td>
                    <td class="available-5"></td>
                    <td class="available-0"></td>
                    <td class="available-3"></td>
                </tr>
                <tr class="half">
                    <td class="available-3"></td>
                    <td class="available-2"></td>
                    <td class="available-4"></td>
                    <td class="available-1"></td>
                    <td class="available-5"></td>
                    <td class="available-0"></td>
                    <td class="available-4"></td>
                </tr>
                <tr class="sharp">
                    <th rowspan="2" class="time">2:00 pm</th>
                    <td class="available-1"></td>
                    <td class="available-4"></td>
                    <td class="available-3"></td>
                    <td class="available-2"></td>
                    <td class="available-5"></td>
                    <td class="available-0"></td>
                    <td class="available-2"></td>
                </tr>
                <tr class="half">
                    <td class="available-2"></td>
                    <td class="available-5"></td>
                    <td class="available-1"></td>
                    <td class="available-4"></td>
                    <td class="available-0"></td>
                    <td class="available-3"></td>
                    <td class="available-3"></td>
                </tr>
                <tr class="sharp">
                    <th rowspan="2" class="time">3:00 pm</th>
                    <td class="available-0"></td>
                    <td class="available-1"></td>
                    <td class="available-4"></td>
                    <td class="available-2"></td>
                    <td class="available-5"></td>
                    <td class="available-3"></td>
                    <td class="available-1"></td>
                </tr>
                <tr class="half">
                    <td class="available-2"></td>
                    <td class="available-3"></td>
                    <td class="available-5"></td>
                    <td class="available-0"></td>
                    <td class="available-4"></td>
                    <td class="available-1"></td>
                    <td class="available-2"></td>
                </tr>
                <tr class="sharp">
                    <th rowspan="2" class="time">4:00 pm</th>
                    <td class="available-3"></td>
                    <td class="available-5"></td>
                    <td class="available-1"></td>
                    <td class="available-0"></td>
                    <td class="available-4"></td>
                    <td class="available-2"></td>
                    <td class="available-0"></td>
                </tr>
                <tr class="half">
                    <td class="available-0"></td>
                    <td class="available-2"></td>
                    <td class="available-4"></td>
                    <td class="available-1"></td>
                    <td class="available-5"></td>
                    <td class="available-3"></td>
                    <td class="available-4"></td>
                </tr>
                <tr class="sharp">
                    <th rowspan="2" class="time">5:00 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>
                    <td class="available-2"></td>
                    <td class="available-3"></td>
                </tr>
            </tbody>
        </table>
        <div id="legend">
            <span id="legend-title">Availability</span>
            <div id="legend-line"><span>0</span>
            <div id="legend-gradient"></div><span>5+</span></div>
        </div>
    </main>
</body>

</html>

Build an Availability Table

Please post a link to the challenge.

Thank you

Hey @jwilkins.oboe!

Thanks for the swift reply, I have updated the post with the link to the challenge.

On my end I am able to pass test 11

maybe you can try running it again

1 Like

No luck on my end.

I’ve tried running the code from the sample project as well but to no avail.

Step 11 continues to fail.

Welcome to the forum @_Matthew

Your code passes.
Reset the step and try again. If that doesn’t work, refresh the page, disable dark mode, disable ad blockers. Or, use another browser.
If the above steps do not work, you may need to restart the computer.

Happy coding

2 Likes

Hey @Teller!

Switched from Safari to Chrome, that did the trick!

Thank you @jwilkins.oboe and @Teller for your assistance!

1 Like