Build an Availability Table - Build an Availability Table

HTML-CSS
1

Tell us what’s happening:

I read other post but mine still doesn’t work, could you help? Thanks.

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>

<tr>
<th>Time/Date</th>
<th>Saturday</th>
<th>Sunday</th>
<th>Monday</th>
</tr>


<tr class="half">
<th class="time">0800</th>
<td class="available-0">a</td>
<td class="available-0">a</td>
<td class="available-0">a</td>
</tr>




<tr class="half">
<th class="time">0900</th>
<td class="available-1">a</td>
<td class="available-1">a</td>
<td class="available-1">a</td>
</tr>

<tr class="half">
<th class="time">1000</th>
<td class="available-2">a</td>
<td class="available-2">a</td>
<td class="available-2">a</td>
</tr>

<tr class="sharp">
<th class="time">1100</th>
<td class="available-3">a</td>
<td class="available-3">a</td>
<td class="available-3">a</td>
</tr>

<tr class="sharp">
<th class="time">1200</th>
<td class="available-4">a</td>
<td class="available-4">a</td>
<td class="available-4">a</td>
</tr>

<tr>
<th class="time">1300</th>
<td class="available-5">a</td>
<td class="available-5">a</td>
<td class="available-5">a</td>
</tr>

</div>










</table>

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

</body>

</html>

/* file: styles.css */
:root {
  justify-content: center;
text-align: center;
  --color0: hotpink;
  --color1: brown;
  --color2: red;
  --color3: green;
  --color4: rgb(174, 174, 250);
  --color5: gray;
  --solid-border: 2px, 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);
}

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

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


#legend-gradient{
background-image: linear-gradient(to right, var(--color1) 50%, var(--color2) 50%);


width: 100%;
height: 10vh;
display: flex;
align-items: center;
}

Your browser information:

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

Challenge Information:

Build an Availability Table - Build an Availability Table

2

Hi @timduncan0322

First of all, you need to use all the colours you defined.

Happy coding

3

Ok, I tried like this, still not working.

#legend-gradient{

background-image: linear-gradient(to right, var(--color0) 20%, var(--color1) 30%, var(--color2) 40%, var(--color3) 60%, var(--color4) 80%, var(--color5) 90%);
4

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 three backticks to make it easier to read.

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

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

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

5

What does the error message say?

Have you tried any debugging? If so, what have you tried?

6

got it, thanks alot.

1 Like
7

I think that the height of #legend-gradient is zero. Because of that, the colors are not visible.
Try putting   in this div