Build an Availability Table - Build an Availability Table

HTML-CSS
1

Tell us what’s happening:

My code keeps failing tests 4, 10, and 35, and I don’t understand why, I have 6 columns in my table, I have ‘th’ elements with the class of time and text of time, and I have a linear gradient with 2 stop percentages in my legend div.

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>
        <thead>
            <tr class="sharp">
                <th class="column"></th>
                <th>Monday</th>
                <th>Tuesday</th>
                <th>Wednesday</th>
                <th>Thursday</th>
                <th>Friday</th>
            </tr>
        </thead>
        <tbody>
            <tr class="half">
                <th class="time">9 am</th>
                <td class="available-2"></td>
                <td class="available-4"></td>
                <td class="available-0"></td>
                <td class="available-4"></td>
                <td class="available-3"></td>
            </tr>
            <tr class="sharp">
                <th class="time"></th>
                <td class="available-5"></td>
                <td class="available-3"></td>
                <td class="available-1"></td>
                <td class="available-4"></td>
                <td class="available-2"></td>
            </tr>
            <tr class="half">
                <th class="time">10 am</th>
                <td class="available-0"></td>
                <td class="available-2"></td>
                <td class="available-5"></td>
                <td class="available-1"></td>
                <td class="available-2"></td>
            </tr>
            <tr class="sharp">
                <th class="time"></th>
                <td class="available-4"></td>
                <td class="available-2"></td>
                <td class="available-3"></td>
                <td class="available-0"></td>
                <td class="available-5"></td>
            </tr>
            <tr class="half">
                <th class="time">11 am</th>
                <td class="available-5"></td>
                <td class="available-3"></td>
                <td class="available-5"></td>
                <td class="available-1"></td>
                <td class="available-2"></td>
            </tr>
            <tr class="sharp">
                <th class="time"></th>
                <td class="available-1"></td>
                <td class="available-2"></td>
                <td class="available-0"></td>
                <td class="available-4"></td>
                <td class="available-3"></td>
            </tr>
            <tr class="half">
                <th class="time">12 pm</th>
                <td class="available-4"></td>
                <td class="available-4"></td>
                <td class="available-5"></td>
                <td class="available-0"></td>
                <td class="available-3"></td>
            </tr>
            <tr class="sharp">
                <th class="time"></th>
                <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 class="half">
                <th class="time">1 pm</th>
                <td class="available-5"></td>
                <td class="available-4"></td>
                <td class="available-2"></td>
                <td class="available-2"></td>
                <td class="available-4"></td>
            </tr>
            <tr class="sharp">
                <th class="time"></th>
                <td class="available-3"></td>
                <td class="available-0"></td>
                <td class="available-5"></td>
                <td class="available-2"></td>
                <td class="available-3"></td>
            </tr>
            <tr class="half">
                <th class="time">2 pm</th>
                <td class="available-5"></td>
                <td class="available-3"></td>
                <td class="available-3"></td>
                <td class="available-2"></td>
                <td class="available-1"></td>
            </tr>
            <tr class="sharp">
                <th class="time"></th>
                <td class="available-0"></td>
                <td class="available-2"></td>
                <td class="available-4"></td>
                <td class="available-5"></td>
                <td class="available-1"></td>
            </tr>
            <tr class="half">
                <th class="time">3 pm</th>
                <td class="available-4"></td>
                <td class="available-3"></td>
                <td class="available-0"></td>
                <td class="available-5"></td>
                <td class="available-1"></td>
            </tr>
            <tr class="sharp">
                <th class="time"></th>
                <td class="available-5"></td>
                <td class="available-5"></td>
                <td class="available-3"></td>
                <td class="available-2"></td>
                <td class="available-5"></td>
            </tr>
            <tr class="half">
                <th class="time">4 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-3"></td>
            </tr>
            <tr class="sharp">
                <th class="time"></th>
                <td class="available-5"></td>
                <td class="available-5"></td>
                <td class="available-3"></td>
                <td class="available-2"></td>
                <td class="available-5"></td>
            </tr>
            <tr class="half">
                <th class="time">5 pm</th>
            </tr>
        </tbody>
    </table>
    <div id="legend">
        <span>Availability</span>
        <div id="legend-gradient"></div>
    </div>
</body>

</html>

/* file: styles.css */
:root {
  --color0: #0C5E00;
  --color1: #0D7D00;
  --color2: #0E9E00;
  --color3: #0EBF00;
  --color4: #0ED900;
  --color5: #0EFF00;
  --solid-border: 2px solid black;
  --dashed-border: 1px dashed black;
  --main-border: 2px solid black;
  font-family: Tahoma;
}

table {
  margin: 0 auto;
  margin-top: 100px;
  border-collapse: collapse;
}

td {
  width: 100px;
  height: 20px;
  border-left: var(--main-border);
  border-right: var(--main-border);
}

thead th:not(.column) {
  padding: 10px;
  border-bottom: var(--solid-border);
}

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

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

.time {
  position: relative;
  top: -12px;
  padding-right: 10px;
}

.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 {
  margin: 30px auto;
  text-align: center;
}

#legend-gradient {
  border: var(--solid-border);
  margin: 0 auto;
  width: 120px;
  height: 20px;
  background-image: linear-gradient(
    90deg,
    var(--color0) 0% 16.7%,
    var(--color1) 16.7% 33.2%,
    var(--color2) 33.2% 49.9%,
    var(--color3) 49.9% 66.4%,
    var(--color4) 66.4% 83.1%,
    var(--color5) 83.1% 100%
  );
}

Your browser information:

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

Challenge Information:

Build an Availability Table - Build an Availability Table

2

Here are some troubleshooting steps you can follow. Focus on one test at a time:

  1. Are there any errors or messages in the console?
  2. What is the requirement of the first failing test?
  3. Check the related User Story and ensure it’s followed precisely.
  4. What line of code implements this?
  5. What is the result of the code and does it match the requirement? (Write the value of a variable to the console at that point in the code if needed.)

If this does not help you solve the problem, please reply with answers to these questions.

3

I have managed to fix tests 10 and 35, but my code still fails test 4 ‘Your table should have at least 3 columns.’ I don’t understand why this keeps failing as my table has 6 columns? Do I need to specify the columns number somehow?

4

Check every row and make sure it has column tds. One of them is missing.