Build an Availability Table - Build an Availability Table

raoaqsaofficial · May 13, 2025, 3:56pm

Tell us what’s happening:

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.
I have tried many times but it is still wrong i don’t know why

Your code so far

<!-- file: index.html -->

/* file: styles.css */

Your browser information:

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

Challenge Information:

Build an Availability Table - Build an Availability Table

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Availability Table</title>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th></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">9AM</th>
                <td class="available-0"></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">10AM</th>
                <td class="available-3"></td>
                <td class="available-4"></td>
                <td class="available-4"></td>
                <td class="available-5"></td>
                <td class="available-5"></td>
            </tr>
            <tr class="half">
                <th class="time">11AM</th>
                <td class="available-2"></td>
                <td class="available-5"></td>
                <td class="available-1"></td>
                <td class="available-4"></td>
                <td class="available-0"></td>
            </tr>
            <tr class="sharp">
                <th class="time">12PM</th>
                <td class="available-5"></td>
                <td class="available-4"></td>
                <td class="available-0"></td>
                <td class="available-2"></td>
                <td class="available-2"></td>
            </tr>
            <tr class="half">
                <th class="time">1PM</th>
                <td class="available-3"></td>
                <td class="available-3"></td>
                <td class="available-4"></td>
                <td class="available-5"></td>
                <td class="available-4"></td>
            </tr>
            <tr class="sharp">
                <th class="time">2PM</th>
                <td class="available-5"></td>
                <td class="available-5"></td>
                <td class="available-5"></td>
                <td class="available-3"></td>
                <td class="available-4"></td>
            </tr>
            <tr class="half">
                <th class="time">3PM</th>
                <td class="available-0"></td>
                <td class="available-3"></td>
                <td class="available-4"></td>
                <td class="available-5"></td>
                <td class="available-2"></td>
            </tr>
            <tr class="sharp">
                <th class="time">4PM</th>
                <td class="available-1"></td>
                <td class="available-4"></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>

  --color0: #d1d0cd;
  --color1:  #cdfdcd;
  --color2: #9bfc9b;
  --color3: #51fa51;
  --color4: #05c605;
  --color5: #037c03;
  --solid-border: 1px solid #000;
  --dashed-border: 1px dashed #000;
}
table{
  width: 70%;
}
.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);
}

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

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

#legend{
  margin: 20px;
}


#legend-gradient {
  width: 200px;
  height: 20px;
  margin-top: 5px;
  border: 1px solid #000;
  background-image: linear-gradient(to right,
    var(--color0) 0%, var(--color0) 16.66%,
    var(--color1) 16.66%, var(--color1) 33.33%,
    var(--color2) 33.33%, var(--color2) 50%,
    var(--color3) 50%, var(--color3) 66.66%,
    var(--color4) 66.66%, var(--color4) 83.33%,
    var(--color5) 83.33%, var(--color5) 100%
  );
}

fcc4b6d10c4-b540-4e2 · May 13, 2025, 4:14pm

You don’t need to repeat the color on each line…and I think you need to use integers for the percentages.

raoaqsaofficial · May 13, 2025, 4:27pm

i have also done this but it didn’t work

fcc4b6d10c4-b540-4e2 · May 13, 2025, 4:28pm

Please post your updated code.

raoaqsaofficial · May 13, 2025, 4:30pm

#legend-gradient {
  width: 200px;
  height: 20px;
  margin-top: 5px;
  border: 1px solid #000;
  background-image: linear-gradient(to right,
    var(--color0) 0%, var(--color1) 20%,
    var(--color2) 40%, var(--color3) 60%,
    var(--color4) 80%, var(--color5) 100%
  );
}

fcc4b6d10c4-b540-4e2 · May 13, 2025, 4:36pm

You were closer with your first attempt. Take a look at this W3 Schools example:

Example
A linear gradient with two-position color stops:

#grad {
background: linear-gradient(
to right,
red 17%,
orange 17% 34%,
yellow 34% 51%,
green 51% 68%,
blue 68% 84%,
indigo 84%
);
}

ghensleyiii · May 13, 2025, 4:38pm

Right now, your gradient smoothly blends one color into the next instead of forming distinct bands. To create sharp divisions, you need to duplicate each color stop percentage. When a color ends at a certain percentage, the next color should begin at the exact same point. This prevents the default smooth transition and forces an abrupt change between colors.

Think of it like painting stripes on a wall: if you don’t clearly define where one stripe stops and the next begins, the colors will blend together instead of forming clean, separate lines.

raoaqsaofficial · May 13, 2025, 4:50pm

#legend-gradient {
  width: 200px;
  height: 20px;
  margin-top: 5px;
  border: 1px solid #000;
  background-image: linear-gradient(to right,
    var(--color0) 0% 20%,
    var(--color1) 20% 40%,
    var(--color2) 40% 60%,
    var(--color3) 60% 80%,
    var(--color4) 80% 100%
  );
}

now i have write this . Is this correct?

raoaqsaofficial · May 13, 2025, 5:13pm

but it still did not work

pkdvalis · May 13, 2025, 5:48pm

Please share your updated code and any errors or hints that you are getting.

ILM · May 13, 2025, 5:52pm

are you using all the colors?

raoaqsaofficial · May 14, 2025, 5:32am

#legend-gradient {
  width: 200px;
  height: 20px;
  margin-top: 5px;
  border: 1px solid #000;
  background-image: linear-gradient(to right,
    var(--color0) 0% 20%,
    var(--color1) 20% 40%,
    var(--color2) 40% 60%,
    var(--color3) 60% 80%,
    var(--color4) 80% 100%
  );
}

no i am using 4 colors

raoaqsaofficial · May 14, 2025, 5:36am

#legend-gradient {
  width: 200px;
  height: 20px;
  margin-top: 5px;
  border: 1px solid #000;
  background-image: linear-gradient(to right,
    var(--color0) 0% 16.66%,
    var(--color1) 16.66% 33.33%,
    var(--color2) 33.33% 50%,
    var(--color3) 50% 66.66%,
    var(--color4) 66.66% 83.33%,
    var(--color5) 83.33% 100%
  );
}

now i have write this , but still it is not working

ILM · May 14, 2025, 9:24am

use integers values, decimals are not accepted for the gradient

raoaqsaofficial · May 14, 2025, 1:08pm

#legend-gradient {
  width: 200px;
  height: 20px;
  margin-top: 5px;
  border: 1px solid #000;
  background-image: linear-gradient(to right,
    var(--color0) 0%, var(--color0) 16%,
    var(--color1) 16%, var(--color1) 33%,
    var(--color2) 33%, var(--color2) 50%,
    var(--color3) 50%, var(--color3) 66%,
    var(--color4) 66%, var(--color4) 83%,
    var(--color5) 83%, var(--color5) 100%
  );
}

why is this still wrong?

ILM · May 14, 2025, 1:13pm

because it accepts only the other syntax with two color-stops for each color

raoaqsaofficial · May 14, 2025, 5:04pm

#legend-gradient {
  width: 200px;
  height: 20px;
  margin-top: 5px;
  border: 1px solid #000;
  background-image: linear-gradient(to right,
  var(--color0) 0%, var(--color0) 16%,
  var(--color1) 16%, var(--color1) 32%,
  var(--color2) 32%, var(--color2) 48%,
  var(--color3) 48%, var(--color3) 64%,
  var(--color4) 64%, var(--color4) 80%,
  var(--color5) 80%, var(--color5) 100%
);

}

Is this correct? pls let me know

fcc4b6d10c4-b540-4e2 · May 14, 2025, 5:29pm

raoaqsaofficial:

#legend-gradient {
  width: 200px;
  height: 20px;
  margin-top: 5px;
  border: 1px solid #000;
  background-image: linear-gradient(to right,
    var(--color0) 0% 20%,
    var(--color1) 20% 40%,
    var(--color2) 40% 60%,
    var(--color3) 60% 80%,
    var(--color4) 80% 100%
  );
}

This was correct. All you had to do was add --color5. And adjust the percentages, of course.

raoaqsaofficial · May 14, 2025, 5:40pm

thank you so much. It works

Topic		Replies	Views
Build an Availability Table - Build an Availability Table HTML-CSS	3	92	April 8, 2025
Build an Availability Table - Build an Availability Table HTML-CSS	4	33	June 7, 2025
Build an Availability Table - Build an Availability Table HTML-CSS	5	309	February 16, 2025
Build an Availability Table - Build an Availability Table HTML-CSS	3	59	June 4, 2025
Build an Availability Table - Build an Availability Table HTML-CSS	1	42	May 21, 2025

Build an Availability Table - Build an Availability Table

Tell us what’s happening:

Your code so far

Your browser information:

Challenge Information:

Related topics