Build an Availability Table - 35th test

kabs88 · August 21, 2025, 9:50am

Tell us what’s happening:

It was a difficult lab for me, and I kept failing it: 35. 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 usually manage with comments, but this one’s tough and any help would be great.

-- 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>

  <style>

    :root {

      --color0: #f8d7da;

      --color1: #f5c6cb;

      --color2: #ffeeba;

      --color3: #fff3cd;

      --color4: #d4edda;

      --color5: #c3e6cb;

      --solid-border: 2px solid #333;

      --dashed-border: 2px dashed #333;

    }

    table {

      border-collapse: collapse;

      width: 80%;

      margin: 20px auto;

      text-align: center;

    }

    th, td {

      padding: 10px;

      border: 1px solid #999;

    }

    th.time {

      background-color: #eee;

      font-weight: bold;

    }

    /* Availability colors */

    .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); }

    /* Borders depending on row type */

    .sharp td {

      border-bottom: var(--solid-border);

    }

    .half td {

      border-bottom: var(--dashed-border);

    }

    /* Legend styles */

    #legend {

      width: 80%;

      margin: 30px auto;

      text-align: center;

    }

    #legend span {

      font-weight: bold;

      display: block;

      margin-bottom: 10px;

    }

    #legend-gradient {

      height: 25px;

      border: 1px solid #333;

      background-image: linear-gradient(

        to right,

        var(--color0) 0%, var(--color0) 16.6%,

        var(--color1) 16.6%, var(--color1) 33.2%,

        var(--color2) 33.2%, var(--color2) 49.8%,

        var(--color3) 49.8%, var(--color3) 66.4%,

        var(--color4) 66.4%, var(--color4) 83%,

        var(--color5) 83%, var(--color5) 100%

      );

    }

  </style>

</head>

<body>

  <table>

    <tr>

      <th></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-0"></td>

      <td class="available-1"></td>

      <td class="available-2"></td>

      <td class="available-3"></td>

      <td class="available-4"></td>

    </tr>

    <tr class="half">

      <th class="time">10 AM</th>

      <td class="available-5"></td>

      <td class="available-4"></td>

      <td class="available-3"></td>

      <td class="available-2"></td>

      <td class="available-1"></td>

    </tr>

    <tr class="sharp">

      <th class="time">11 AM</th>

      <td class="available-2"></td>

      <td class="available-0"></td>

      <td class="available-1"></td>

      <td class="available-5"></td>

      <td class="available-3"></td>

    </tr>

    <tr class="half">

      <th class="time">12 PM</th>

      <td class="available-4"></td>

      <td class="available-3"></td>

      <td class="available-2"></td>

      <td class="available-1"></td>

      <td class="available-0"></td>

    </tr>

    <tr class="sharp">

      <th class="time">1 PM</th>

      <td class="available-5"></td>

      <td class="available-4"></td>

      <td class="available-3"></td>

      <td class="available-2"></td>

      <td class="available-1"></td>

    </tr>

  </table>

  <div id="legend">

    <span>Availability</span>

    <div id="legend-gradient"></div>

  </div>

</body>

</html>

#legend-gradient { 

  width: 100%; 

  height: 30px; 

  border: 1px solid #333; 

  background: linear-gradient(to right, 

    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) 100% 

  ); 

}

Your browser information:

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

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

dhess · August 21, 2025, 10:56am

You should give the #legend-gradient element a linear gradient that transitions between all the colors from --color0 to --color5

Please review the above user story and refer to the reference below for a code example of this type of linear gradient.

kabs88 · August 21, 2025, 4:09pm

Thanks , I tried giving the #legend-gradient element a linear gradient that transitions between all the colors from --color0 to --color5, using two percentage stops for each color to create hard lines, but the test still fails. I’m not sure if I’m the only one having issues with test 35, but I’ve been stuck on it longer than expected and would really appreciate any insight.

dhess · August 21, 2025, 4:50pm

Please post your updated code.

kabs88 · August 21, 2025, 5:24pm

Tell us what’s happening:

Thanks so much. I’ve updated the CSS code to give the #legend-gradient element a linear gradient that transitions between all the colors from --color0 to --color5, but the test is still failing

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>

  <style>

    :root {

      --color0: #f8d7da;

      --color1: #f5c6cb;

      --color2: #ffeeba;

      --color3: #fff3cd;

      --color4: #d4edda;

      --color5: #c3e6cb;

      --solid-border: 2px solid #333;

      --dashed-border: 2px dashed #333;

    }

    table {

      border-collapse: collapse;

      width: 80%;

      margin: 20px auto;

      text-align: center;

    }

    th, td {

      padding: 10px;

      border: 1px solid #999;

    }

    th.time {

      background-color: #eee;

      font-weight: bold;

    }

    /* Availability colors */

    .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); }

    /* Borders depending on row type */

    .sharp td {

      border-bottom: var(--solid-border);

    }

    .half td {

      border-bottom: var(--dashed-border);

    }

    /* Legend styles */

    #legend {

      width: 80%;

      margin: 30px auto;

      text-align: center;

    }

    #legend span {

      font-weight: bold;

      display: block;

      margin-bottom: 10px;

    }

    #legend-gradient {

      height: 25px;

      border: 1px solid #333;

      background-image: linear-gradient(

        to right,

        var(--color0) 0%, var(--color0) 16.6%,

        var(--color1) 16.6%, var(--color1) 33.2%,

        var(--color2) 33.2%, var(--color2) 49.8%,

        var(--color3) 49.8%, var(--color3) 66.4%,

        var(--color4) 66.4%, var(--color4) 83%,

        var(--color5) 83%, var(--color5) 100%

      );

    }

  </style>

</head>

<body>

  <table>

    <tr>

      <th></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-0"></td>

      <td class="available-1"></td>

      <td class="available-2"></td>

      <td class="available-3"></td>

      <td class="available-4"></td>

    </tr>

    <tr class="half">

      <th class="time">10 AM</th>

      <td class="available-5"></td>

      <td class="available-4"></td>

      <td class="available-3"></td>

      <td class="available-2"></td>

      <td class="available-1"></td>

    </tr>

    <tr class="sharp">

      <th class="time">11 AM</th>

      <td class="available-2"></td>

      <td class="available-0"></td>

      <td class="available-1"></td>

      <td class="available-5"></td>

      <td class="available-3"></td>

    </tr>

    <tr class="half">

      <th class="time">12 PM</th>

      <td class="available-4"></td>

      <td class="available-3"></td>

      <td class="available-2"></td>

      <td class="available-1"></td>

      <td class="available-0"></td>

    </tr>

    <tr class="sharp">

      <th class="time">1 PM</th>

      <td class="available-5"></td>

      <td class="available-4"></td>

      <td class="available-3"></td>

      <td class="available-2"></td>

      <td class="available-1"></td>

    </tr>

  </table>

  <div id="legend">

    <span>Availability</span>

    <div id="legend-gradient"></div>

  </div>

</body>

</html>

/* file: styles.css */

#legend-gradient { 
  width: 100%; 
  height: 30px; 
  border: 1px solid #333; 
  background-image: linear-gradient(
    to right,
    var(--color0) 0%,   var(--color0) 16.6%,
    var(--color1) 16.6%, var(--color1) 33.2%,
    var(--color2) 33.2%, var(--color2) 49.8%,
    var(--color3) 49.8%, var(--color3) 66.4%,
    var(--color4) 66.4%, var(--color4) 83%,
    var(--color5) 83%,  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/139.0.0.0 Safari/537.36 Edg/139.0.0.0

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

Teller · August 21, 2025, 5:44pm

Hi @kabs88

You should give the #legend-gradient element a linear gradient that transitions between all the colors from --color0 to --color5. Each color value should have two color stops (expressed as percentages) to make the transition between colors a hard line.

You should have six colours not twelve.

Happy coding

dhess · August 21, 2025, 5:45pm

Please refer again to the MDN example in your original topic on this. The percentages should be integers.

kabs88 · August 21, 2025, 6:19pm

Thank you so much everyone for your commends and tried to make changes to my codes based on the advise to use 6 colors, give the #legend-gradient element a linear gradient that transitions between all the colors from --color0 to --color5. Each color value should have two color stops (expressed as percentages) to make the transition between colors a hard line. It seems like the new codes are also failing the test.

……………………………………………………………………………………………….


#legend-gradient {

  width: 100%;

  height: 30px;

  border: 1px solid #333;

  background-image: linear-gradient(

    to right,

    var(--color0) 0%, var(--color0) 16.6667%,

    var(--color1) 16.6667%, var(--color1) 33.3333%,

    var(--color2) 33.3333%, var(--color2) 50%,

    var(--color3) 50%, var(--color3) 66.6667%,

    var(--color4) 66.6667%, var(--color4) 83.3333%,

    var(--color5) 83.3333%, var(--color5) 100%

  );

}

JeremyLT · August 21, 2025, 6:21pm

I’ve edited your post to improve the readability of the code. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

kabs88 · August 21, 2025, 6:56pm

Hi Jeremy,
I hope this finds you well. Thank you so much and I’m still new here and learning how this platform works.

Teller · August 21, 2025, 11:21pm

Hi @kabs88

There are still twelve colours in your last post.

    var(--color0) 0%, var(--color0) 16.6667%,

    var(--color1) 16.6667%, var(--color1) 33.3333%,

    var(--color2) 33.3333%, var(--color2) 50%,

    var(--color3) 50%, var(--color3) 66.6667%,

    var(--color4) 66.6667%, var(--color4) 83.3333%,

    var(--color5) 83.3333%, var(--color5) 100%

Happy coding

kabs88 · August 22, 2025, 3:47am

Thank you so much, everyone! The issue has been resolved.

Topic		Replies	Views
Build an Availability Table - Build an Availability Table HTML-CSS	10	2197	July 4, 2025
Build an Availability Table - Build an Availability Table HTML-CSS	3	42	January 1, 2026
Build an Availability Table - Build an Availability Table HTML-CSS	7	123	October 11, 2025
Build an Availability Table - Build an Availability Table HTML-CSS	19	727	November 13, 2025
Build an Availability Table HTML-CSS	10	74	January 26, 2026

Build an Availability Table - 35th test

Tell us what’s happening:

Your browser information:

Challenge Information:

Tell us what’s happening:

Your code so far

Your browser information:

Challenge Information:

Related topics