Build an Availability Table - Build an Availability Table

HTML-CSS
1

Tell us what’s happening:

What exactly is wrong with my #legend-gradient, that is making it not to pass?

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>
           <th></th>
       <th></th>
       <th></th>
       </tr>
       </thead>
    <tbody>
<tr class="sharp">
    <th class="time"><time datetime="8:00">8am</time</th>
    <td class="available-0"></td>
    <td class="available-1"></td>
</tr>
         <tr class="sharp">
             <th class="time"><time datetime="10:00">10am</time></th>
             <td class="available-2"></td>
             <td class="available-3"></td>
        </tr>
        <tr class="half">
            <th class="time"><time datetime="12:00">12pm</time></th>
             <td class="available-4"></td>
            <td class="available-5"></td>
        </tr>
        <tr class="half">
        <th class="time"><time datetime="14:00">2pm</time></th>
        <td class="available-0"></td>
        <td class="available-1"></td>
 </tr>
       </tbody>  
</table>
<br><br>
<div id="legend">
    <span>Availability</span>
    <div id="legend-gradient"></div>
</div>
</body>

</html>

/* file: styles.css */
:root{--color0:#0099aa;
  --color1:#a0ffff;
--color2:#eeccff;
--color3:#d9f9c9;
--color4:#c6f7e9;
--color5:#a4d6f9;
--color6:#c4c4ff;
--solid-border:1px solid blue;
--dashed-border:1px dashed green;}

.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-image: 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%,
    var(--color5) 100%
  );
  width: 100%;
  height: 20px;
  border: var(--dashed-border);
}


tr, th, td{border:1px;
width:20%;
height:10%}

table{width:100%;
height:50vh;}

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

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

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

2

Here’s an example from W3 Schools:

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

Color 6 is not accounted for. You need to distribute the 100% equally to each colcor.

4

In your :root selector, you should define six CSS variables named --color# , where # is a number from 0 to 5

Also, the instructions did not ask for --color6 in your :root selector.

1 Like
5

You should pass if you provide two percentage values for each of the --color# variables in the format given in the example above from @fcc4b6d10c4-b540-4e2.
Note that, with 6 colours, you’ll need to divide 100% by 6, so the colour stops will not be at 20%, 40% etc… Adjust the values (rounding to the nearest whole number).

1 Like
6

Done that. removed color 6 still not working

7

Removed color 6, distributed the values between color1-5 still not working

8

Share your new code so we can see

9

still not working 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%
);
width: 100%;
height: 20px;
border: var(–dashed-border);
}

10

:root{–color0:#0099aa;
–color1:#a0ffff;
–color2:#eeccff;
–color3:#d9f9c9;
–color4:#c6f7e9;
–color5:#a4d6f9;
–solid-border:1px solid blue;
–dashed-border:1px dashed green;}

.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-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%
);
width: 100%;
height: 20px;
border: var(–dashed-border);
}

*{box-sizing:border-box}
tr, th, td {
border: var(–solid-border);
width: 20%;
height: 10%;
}

table{width:100%;
height:50vh;}

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

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

11

Use integer percentages, please.

12

This has finally worked, Thanks