Build an Availability Table - Build an Availability Table

HTML-CSS
1

Tell us what’s happening:

My last test is not passing, I re-wrote it but it doesn’t helps. Please guide me

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>
        <tr class="sharp">
            <th></th>
            <th>Mon</td>
            <th>Tue</th>
        </tr>
        <tr class="sharp">
            <th class="time">6am</th>
            <td class="available-1"></td>
            <td class="available-3"></td>
        </tr>
        <tr class="half">
            <th class="time">7am</th>
            <td class="available-4"></td>
            <td class="available-4"></td>
        </tr>
        <tr class="sharp">
            <th class="time">8am</th>
            <td class="available-0"></td>
            <td class="available-5"></td>
        </tr>
        <tr class="half">
            <th class="time">9am</th>
            <td class="available-5"></td>
            <td class="available-2"></td>
        </tr>
    </table>
    <div id="legend">
        <span>Availability</span>
        <div id="legend-gradient"></div>
    </div>
</body>

</html>

/* file: styles.css */
:root {
  --color0: rgb(0, 100, 0);
  --color1: rgb(0, 150, 0);
  --color2: rgb(0, 200, 0);
  --color3: rgb(0, 250, 0);
  --color4: rgb(0, 200, 200);
  --color5: rgb(0, 250, 250);
  --solid-border: 2px solid black;
  --dashed-border: 2px dashed black;
}

.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 : var(--solid-border);
}
.half td {
  border-bottom: var(--dashed-border);
}

#legend-gradient {
  background-image: linear-gradient(
    90deg, 
    var(--color0) 0%,
    var(--color0) 20%,
    var(--color1) 20%,
    var(--color1) 40%,
    var(--color2) 40%,
    var(--color2) 60%,
    var(--color3) 60%,
    var(--color3) 80%,
    var(--color4) 80%,
    var(--color4) 90%,
    var(--color5) 90%,
    var(--color5) 100%
  );
}

Your browser information:

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

Challenge Information:

Build an Availability Table - Build an Availability Table

2

Sorry, i think for this

Mon
3

What ? No that is fine, I think

Screenshot 2025-04-14 164018
Screenshot 2025-04-14 164018223×249 3.04 KB

There is some problem due to bottom gradient bar,

4

Now I even made it almost equal

Screenshot 2025-04-14 164404
Screenshot 2025-04-14 164404200×244 3.03 KB

5

i think that you don´t defined widht and height #legend-gradient {
background-image:

6

Yes, there’s a problem with the color stops.
review this link and see if you find anything interesting:
CSS linear-gradient() function.
Good luck!

7

I did that later, you can see I got the output.

8

I have used it multiple times, but I am unable to find the problem here.
Thank you

9

you need to use two percentages for each color stops, look at the examples in the link shared, there is one that say “A linear gradient with two-position color stops:”

10

I saw that, but in previous lesson, it was taught how I wrote. Also stops are working as expected so what is the problem here ?

11

the test wants the two stops for each color

1 Like
12

okay, got it now, sorry my fault. Wrong interpretation

1 Like