Build an Availability Table

HTML-CSS
1

Problem

In lesson Build an Availability Table
my code can not pass these tests:

10. You should have at least four th elements with the class of time that contain time values.
28. You should use --solid-border to set the bottom-border of td elements that are children of .sharp elements.
30. You should use --dashed-border to set the bottom-border of td elements of .half elements.

I check my code, confirm that I should have the part that meets the requirements, and the preview also looks meet the need.

Code

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="time">Time</th>
                <th>Monsday</th>
                <th>Tuesday</th>
                <th>Wednesday</th>
                <th>Thursday</th>
                <th>Friday</th>
            </tr>
        </thead>
        <tbody>
            <tr class="half">
                <th class="time">13 PM</th>
                <td class="available-1"></td>
                <td class="available-2"></td>
                <td class="available-3"></td>
                <td class="available-4"></td>
                <td class="available-1"></td>
            </tr>
            <tr class="sharp">
                <th class="time">14 PM</th>
                <td class="available-0"></td>
                <td class="available-3"></td>
                <td class="available-4"></td>
                <td class="available-5"></td>
                <td class="available-3"></td>
            </tr>
            <tr class="half">
                <th class="time">15 PM</th>
                <td class="available-4"></td>
                <td class="available-5"></td>
                <td class="available-3"></td>
                <td class="available-3"></td>
                <td class="available-2"></td>
            </tr>
            <tr class="sharp">
                <th class="time">16 PM</th>
                <td class="available-1"></td>
                <td class="available-4"></td>
                <td class="available-2"></td>
                <td class="available-2"></td>
                <td class="available-3"></td>
            </tr>
            <tr class="half">
                <th class="time">17 PM</th>
                <td class="available-2"></td>
                <td class="available-2"></td>
                <td class="available-1"></td>
                <td class="available-4"></td>
                <td class="available-5"></td>
            </tr>
            <tr class="sharp">
                <th class="time">18 PM</th>
                <td class="available-3"></td>
                <td class="available-2"></td>
                <td class="available-0"></td>
                <td class="available-3"></td>
                <td class="available-4"></td>
            </tr>
        </tbody>
    </table>
    <div id="legend">
        <span>Availability</span>
        <div id="legend-gradient"></div>
    </div>
</body>

</html>

css

:root {
  --color0: #00ff00;
  --color1: #00cc00;
  --color2: #00bb00;
  --color3: #009900;
  --color4: #007700;
  --color5: #005500;
  --solid-border: solid;
  --dashed-border: dashed;
}

.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: 2px var(--solid-border) black;
}

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

td {
  width: 100px;
  height: 30px;
}

#legend {
  position: fixed;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px;
}

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

[/quote]

2

Hello!

Good attempt!

The issue with the 10th step may be found within the very first th.

Perhaps, attempt changing the class name in that one to something, perhaps a number on the end of the class may help.

The other two step issues appear as if there is more added to the selector than we are asked to do. Are we asked to place anything other than the

Keep up the good progress! :blush:

1 Like
3

I get it.
In Use Story, it said that

3.Cells in the first column should be table headers with a class of time and should contain time values as their text.

I reviewed the example projexct again, it’s fitrst th is time, not a title as I thought.

It seems like the test check all element with class time, so after I remove the it:

...
<thead>
  <tr class="sharp">
    <th>Time</th>
    <th>Monsday</th>
    <th>Tuesday</th>
    <th>Wednesday</th>
    <th>Thursday</th>
    <th>Friday</th>
  </tr>
</thead>
...

test 10 passed.

As for test 28 and 30, I changed my code as:

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

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

They passed. Looks like it’s really because I added extra things in there.

Thanks for you help! :blush:

1 Like
6

I am very happy to hear that you have been able to continue your good progress.

Great job! :blush: