Build an Availability Table - Build an Availability Table

HTML-CSS
1

Tell us what’s happening:

im getting three errors and i dont know why

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">
    <link rel="stylesheet" href="styles.css">
    <title>Availability Table</title>
</head>

<body>
<table>
    <thead>
        <tr>
        <th class="time">8 AM</th><th></th><th></th>
        </tr>
    </thead>
    <tbody>
        <tr class="sharp">
        <th class="time">9 AM</th><td class="available-2"></td><td class="available-1"></td>
        </tr>
        <tr class="half">
        <th class="time">10 AM</th><td class="available-3"></td><td class="available-4"></td>
        </tr>
        <tr class="sharp">
        <th class="time">11 AM</th><td class="available-5"></td><td class="available-1"></td>
        </tr>
        <tr class="half">
        <th class="time">12 AM</th><td class="available-0"></td><td class="available-2"></td>
        </tr>
        
    </tbody>
</table>
<div id="legend"><span>Availability</span><div id="legend-gradient"></div></div>
</body>

</html>

/* file: styles.css */
:root{--solid-border:green;
--dashed-border:pink;
--color0:white;
--color1:blue;
--color2:yellow;
--color3:orange;
--color4:red;
--color5: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)}
table{width:90%;height:200px;}

.half td{border-bottom:3px dashed var(--dashed-border);}
.sharp td{border-bottom:3px solid var(--solid-border);}

#legend-gradient{background-image:linear-gradient(var(--color1)0%,var(--color1)5%,var(--color2)5%,var(--color2)10%,var(--color3)10%,var(--color3)15%,var(--color4)15%,var(--color4)20%,var(--color5)20%,var(--color5)25%,var(--color0)25%,var(--color0)100%)}

Your browser information:

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

Challenge Information:

Build an Availability Table - Build an Availability Table

image
image929×495 40.6 KB

2

You can refer to this link for the linear gradient syntax:
linear-gradient() - CSS | MDN

And shouldn’t your --solid-border and --dashed-border variables contain the entire border shortcut rather than just a color; otherwise, they really make no sense.

1 Like
3

i din’t know i can enter multiple values in a variable thanks for helping ill try the syntax you sended me

4

Here is an example of border shorthand:
CSS Borders - Shorthand Property

1 Like
5

the step 35 is not woking i changed the syntax as you said but its still not fixed

:root{--solid-border:3px solid green;
--dashed-border:3px dashed pink;
--color0:white;
--color1:blue;
--color2:yellow;
--color3:orange;
--color4:red;
--color5: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)}
table{width:90%;height:200px;}

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

#legend-gradient{background-image:linear-gradient(var(--color1) 5%,var(--color2)5% 10%,var(--color3)10% 15%,var(--color4)15% 20%,var(--color5)20% 25%,var(--color0)25% )}

image
image642×744 51.8 KB

6

Try adding a space between the color and the first percentage.

Also, while your code will pass, a linear gradient’s percentages typically range from 0% to 100%. And you could specify a direction or degrees as the first parameter (i.e. to right or 90deg).

1 Like
7

it needed space between the color and the first percentage.