Build an Availability Table - Build an Availability Table

HTML-CSS
1

Tell us what’s happening:

27-30 and 35 are all not working and I don’t understand why.

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>
<table>
    <tr>
        <th>Time</th>
        <th>Monday</th>
        <th>Tuesday</th>
        <th>Wednesday</th>
        <th>Thursday</th>
        <th>Friday</th>
    </tr>
    <tr class="sharp">
        <th class="time">9 AM</th>
        <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>
    </tr>
    <tr class="sharp">
        <th class="time">10 AM</th>
        <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>
    </tr>
    <tr class="half">
        <th class="time">11 AM</th>
        <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>
    </tr>
    <tr class="half">
        <th class="time">12 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-5"></td>
    </tr>
</table>
<div id="legend">
    <span>Availability</span>
    <div id="legend-gradient"></div>
</div>

<body>

</body>

</html>

/* file: styles.css */
:root {
  --color0: #027800;
  --color1: #029400;
  --color2: #02b100;
  --color3: #02d000;
  --color4: #02ea00;
  --color5: #02ff00;
  --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(to right, var(--color5) 0% 20%, var(--color4) 20% 40%, var(--color3) 40% 60%, var(--color2) 60% 80%, var(--color1) 80% 100%);
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:144.0) Gecko/20100101 Firefox/144.0

Challenge Information:

Build an Availability Table - Build an Availability Table

2

27-30 solved. You are not asking for direct children but just children.

3

I’ve tried many different solutions for 35, including the following, that I thought would work, but doesn’t.

#legend-gradient {

  background-image: linear-gradient(var(--color5), var(--color5) 50%, var(--color4) 50%, var(--color4));

}
4

Figured it out. i had to to to the User Stories to get the answer I needed as the Tests were missing this information. The Tests stated “You should use two color-stops”. I wasn’t sure what that meant, but I thought it meant only two colors needed to be used. I thought I was overdoing it by using 5. But if you look in User Stories, you find that you must use all 6 of the colors.

1 Like
5

It’s great that you figured it out yourself. Nicely done!

1 Like