Build an Availability Table - Build an Availability Table

HTML-CSS
1

Tell us what’s happening:

i get these errors every time i try to run the test
You should set the background image of #legend-gradient to a linear gradient.
Failed: 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.

This is my code

#legend-gradient {
  margin-top: 20px;
  padding: 10px;
  border: var(--solid-border);
  background-image: linear-gradient(to left,
      var(--color0) 0% 20%,
      var(--color1) 20% 40%,
      var(--color2) 40% 60%,
      var(--color3) 60% 80%,
      var(--color4) 80% 90%,
      var(--color5) 90% 100%);
}

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; rv:137.0) Gecko/20100101 Firefox/137.0

Challenge Information:

Build an Availability Table - Build an Availability Table

2

can you please post all your code? we are unable to debug only from what you shared

4 

:root {
  --color0: red;
  --color1: blue;
  --color2: green;
  --color3: yellow;
  --color4: pink;
  --color5: brown;
  --solid-border: 1px 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);
}
#legend-gradient {
  background: linear-gradient(var(--color0) 5%,var(--color5) 36%);
}
.sharp td {
border-bottom: var(--solid-border);
}
.half td {
border-bottom: var(--dashed-border);
}

#legend-gradient {
  margin-top: 20px;
  padding: 10px;
  border: var(--solid-border);
  background-image: linear-gradient(
      var(--color0) 0% 20%,
      var(--color1) 20% 40%,
      var(--color2) 40% 60%,
      var(--color3) 60% 80%,
      var(--color4) 80% 90%,
      var(--color5) 90% 100%);
}
5

Also, please share your full HTML code so we can help you debug it more effectively. That way, we can see the complete structure and identify any issues more easily.

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>
        <thead >
            <tr class="sharp">
                 <th>Time</th>
            <th>Monday</th>
            <th>Tuesday</th>
            <th>Wednesday</th>
            <th>Thursday</th>
            <th>Friday</th>
            </tr>
        </thead>
        <tbody>
            <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-5"></td>
            
            </tr>
            
            <tr class="half">
                <th class="time">10 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-5"></td>
            </tr>
            <tr class="half">
                <th class="time">11 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-5"></td>
            </tr>
            <tr>
                <th class="time">12 PM</th>
           <td class="available-0"></td>
            <td class="available-1"></td>
            <td class="available-2"></td>
            <td class="available-3"></td>
            <td class="available-5"></td>
            </tr>
            <tr>
                <th class="time">1 PM</th>
           <td class="available-0"></td>
            <td class="available-1"></td>
            <td class="available-2"></td>
            <td class="available-3"></td>
            <td class="available-5"></td>
            </tr>
            <tr>
                <th class="time">2 PM</th>
             <td class="available-0 half"></td>
            <td class="available-1"></td>
            <td class="available-2"></td>
            <td class="available-3"></td>
            <td class="available-5"></td>
            </tr>
            <tr>
                <th class="time">3 PM</th>
             <td class="available-0 half"></td>
            <td class="available-1"></td>
            <td class="available-2"></td>
            <td class="available-3"></td>
            <td class="available-5"></td>
            </tr>
            <tr>
                <th class="time">4 PM</th>
          <td class="available-0"></td>
            <td class="available-1"></td>
            <td class="available-2"></td>
            <td class="available-3"></td>
            <td class="available-5"></td>
            </tr>
            <tr>
                <th class="time">5 PM</th>
             <td class="available-0 half"></td>
            <td class="available-1"></td>
            <td class="available-2"></td>
            <td class="available-3"></td>
            <td class="available-5"></td>
            </tr>
        </tbody>
    </table>
    <div id="legend"><span>Availability </span>
    <div id="legend-gradient"></div></div>
    
</body>

</html>
7

The issue is caused by having both background and background-image properties on #legend-gradient.
Since the background shorthand can override other background-related properties, try removing or commenting out the background property — that should fix it! :white_check_mark:

1 Like
8

It worked Thank you So much.

1 Like
9

Is this a problem that is specific to today? I am facing it right now. I don’t have any background property and it still doesn’t work.
UPD
Oh my god… Two color stops syntax…

background-image: linear-gradient(
    90deg,
      var(--color0) 0% 20%,
      var(--color1) 20% 40%,
      var(--color2) 40% 60%,
      var(--color3) 60% 80%,
      var(--color4) 80% 90%,
      var(--color5) 90% 100%);
10

Hello there, welcome to the community! :blush:

To get faster and more effective help from everyone here, please create your own topic for this question.

That way, your post gets better visibility and people can assist you directly without confusion.