Build an Availability Table - Build an Availability Table

HTML-CSS
1

Tell us what’s happening:

These 2 tests keep failing, Ive looke on the forum and cant find any solutions that make them pass.

  1. Your table should have at least 3 columns.

  2. You should use two color-stops (expressed in percentage) to make the transition from one color to the following color a hard line for your #legend-gradient. Remember to use your --color# variables.

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>
                Availability
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="column">Time</th>
                <th scope="column">Monday</th>
                <th scope="column">Tuesday</th>
                <th scope="column">Wednesday</th>
                <th scope="column">Thursday</th>
                <th scope="column">Friday</th>
            </tr>


            <tr class="sharp">
                <th class="time">8:00AM</th>
                <td class="available-1"></td>
                <td class="available-3"></td>
                <td class="available-4"></td>
                <td class="available-0"></td>
                <td class="available-1"></td>
            </tr>


            <tr class="half">
                <th class="time">9:00AM</th>
                <td class="available-4"></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 class="time">10:00AM</th>
                <td class="available-2"></td>
                <td class="available-1"></td>
                <td class="available-5"></td>
                <td class="available-0"></td>
                <td class="available-4"></td>
            </tr>


            <tr class="half">
                <th class="time">11:00AM</th>
                <td class="available-3"></td>
                <td class="available-5"></td>
                <td class="available-2"></td>
                <td class="available-0"></td>
                <td class="available-1"></td>
            </tr>


            <tr class="sharp">
                <th class="time">12:00AM</th>
                <td class="available-4"></td>
                <td class="available-0"></td>
                <td class="available-3"></td>
                <td class="available-1"></td>
                <td class="available-5"></td>
            </tr>


            <tr class="half">
                <th class="time">1:00PM</th>
                <td class="available-2"></td>
                <td class="available-5"></td>
                <td class="available-4"></td>
                <td class="available-0"></td>
                <td class="available-3"></td>
            </tr>


            <tr class="sharp">
                <th class="time">2:00PM</th>
                <td class="available-1"></td>
                <td class="available-4"></td>
                <td class="available-2"></td>
                <td class="available-1"></td>
                <td class="available-5"></td>
            </tr>
        </tbody>
    </table>
    <br>
    <br>
    <div id="legend">
        <span>Availability
            <div id="legend-gradient">
            </div>
        </span>
    </div>
</body>

</html>

/* file: styles.css */
:root {
  --color0: #f77fbe;
  --color1: #e96ca2;
  --color2: #dc5987;
  --color3: #ce476b;
  --color4: #c13450;
  --color5: #b32134;
  --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 {
  width: 200px;
  height: 40px;
  display: flex;
  align-items: center;
  background-image: linear-gradient(
    90deg,
    var(--color0) 0%,
    var(--color0) 18%,
    var(--color1) 18%,
    var(--color1) 34%,
    var(--color2) 34%,
    var(--color2) 50%,
    var(--color3) 50%,
    var(--color3) 66%,
    var(--color4) 66%,
    var(--color4) 82%,
    var(--color5) 82%,
    var(--color5) 100%
  );
}

#legend span{
  display: block;
  align-items: center;
  margin: 0 auto
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36

Challenge Information:

Build an Availability Table - Build an Availability Table
https://www.freecodecamp.org/learn/full-stack-developer/lab-availability-table/build-an-availability-table

2

for the issue about not having enough columns, this is happening because you haven’t created any inside your thead element.

Here’s a reference for how to create columns headers in HTML, take a look at it.

For the issue about the color stops. This is happening because they are expecting each line to have 2 percentage values on it, not just one.
Here’s an example of the syntax they need:
var(--color0) 0% 18%,

So even though your code works, the test seems to want this format instead.

3

thank you so much, this solved the color problem. Only the column test remains unsolved.

4

have you tried reading that reference I gave you?
If you have a question about it, let us know.

5

yes, I put a “scope” of “col” in the elements and it still didn’t work. at first I thought it was because I had my elements in the instead of the , but when that didn’t work, I changed my “availability” in the to a , and that made it pass. this was weird and I don’t understand why it wouldn’t pass until “availability” was a instead of a , can you explain this?

6

thank you by the way, I was stuck on this all day

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.