Build an Availability Table - Build an Availability Table

HTML-CSS
1

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.

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


/* file: styles.css */
 #legend-gradient {
    height: 10px;
    background-image: linear-gradient( 90deg,
        var(--color0) 0%, var(--color0) 16.6%, 
        var(--color1) 16.6%, var(--color1) 33.3%,
        var(--color2) 33.3%, var(--color2) 50%,
        var(--color3) 50%, var(--color3) 66.6%, 
        var(--color4) 66.6%, var(--color4) 83.3%,
        var(--color5) 83.3%, 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/132.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 Likes
2

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

3

I am unable to Pass the last test case of this lab which is 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 can’t find where I did mistake.

4

can you post all your code? it’s not possible to debug with just a snippet

5

You need the color then two color stops in percentages, do not repeat the colors

6 
<!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>
            <th class="time">08:00 AM</th>
            <th class="time">09:00 AM</th>
            <th class="time">10:00 AM</th>
        </tr>
        <tr class="sharp">
            <th class="time">11:00 AM</th>
            <td class="available-0"></td>
            <td class="available-1"></td>
            <td class="available-2"></td>
        </tr>
        <tr class="half">
            <th class="time">12:00 PM</th>
            <td class="available-3"></td>
            <td class="available-4"></td>
            <td class="available-5"></td>
        </tr>
        <tr class="sharp">
            <th class="time">01:00 PM</th>
            <td class="available-2"></td>
            <td class="available-3"></td>
            <td class="available-0"></td>
        </tr>
        <tr class="half">
            <th class="time">02:00 PM</th>
            <td class="available-4"></td>
            <td class="available-1"></td>
            <td class="available-5"></td>
        </tr>
    </table>

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

</body>
</html>

:root {
            --color0: #FF0000; 
            --color1: #FFA500; 
            --color2: #FFFF00; 
            --color3: #008000; 
            --color4: #0000FF; 
            --color5: #800080; 
            --solid-border: 2px solid #000; 
            --dashed-border: 2px dashed #000; 
        }

        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }

        table {
            width: 80%;
            margin: 20px auto;
            border-collapse: collapse;
            background-color: #fff;
        }

        th, td {
            padding: 10px;
            text-align: center;
            border: 1px solid #ddd;
        }

        th {
            background-color: #f2f2f2;
        }

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

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

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

        #legend {
            width: 60%;
            margin: 20px auto;
            padding: 10px;
            background-color: #fff;
            border: 1px solid #ddd;
        }

        #legend span {
            font-weight: bold;
            font-size: 16px;
        }

     #legend-gradient {
    height: 10px;
    background-image: linear-gradient( 90deg,
        var(--color0) 0%, var(--color0) 16.6%, 
        var(--color1) 16.6%, var(--color1) 33.3%,
        var(--color2) 33.3%, var(--color2) 50%,
        var(--color3) 50%, var(--color3) 66.6%, 
        var(--color4) 66.6%, var(--color4) 83.3%,
        var(--color5) 83.3%, var(--color5) 100%
    );
}
7

Make the angle of gradient left or right.

8

you also need to not use the same color twice, you need to use the other way to write color stops, having two color stops after the one color

If you look at the documentation on MDN it’s the last example

2 Likes
9

The lab won’t pass decimal percentages, at least that was the issue that I resolved to pass.

5 Likes
11

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Get Help > Ask for Help button located on the challenge.

image
image493×196 5.09 KB

The Ask for Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.