Tell us what’s happening:
Hello there! I’m sorry to bother you, but I’m stuck at step 35 of this challenge. I’ve read everything and tried everything I could think of, but clearly, I’m missing something. Could you please help me?
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></th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wendsay</th>
<th>Thursday</th>
</tr>
<tr>
<th class="time">8:00/10:00</th>
<td class="available-2"></td>
<td class="available-5"></td>
<td class="available-0"></td>
<td class="available-1"></td>
</tr>
<tr>
<th class="time">8:00/10:00</th>
<td class="available-1"></td>
<td class="available-5"></td>
<td class="available-1"></td>
<td class="available-4"></td>
</tr>
<tr class="sharp">
<th class="time">10:00/12:00</th>
<td class="available-2"></td>
<td class="available-1"></td>
<td class="available-0"></td>
<td class="available-4"></td>
</tr>
<tr class="sharp">
<th class="time">12:00/14:00</th>
<td class="available-2"></td>
<td class="available-1"></td>
<td class="available-0"></td>
<td class="available-4"></td>
</tr>
<tr class="half">
<th class="time">14:00/16:00</th>
<td class="available-2"></td>
<td class="available-5"></td>
<td class="available-0"></td>
<td class="available-4"></td>
</tr>
<tr class="half">
<th class="time">16:00/18:00</th>
<td class="available-2"></td>
<td class="available-5"></td>
<td class="available-0"></td>
<td class="available-4"></td>
</tr>
</table>
<div id="legend">
<span class="availability">Availability</span>
<div id="legend-gradient">
</div>
</body>
</html>
/* file: styles.css */
:root{
--color0: #ff0000;
--color1: #ffff66;
--color2: #aaff66;
--color3: #66ff66;
--color4: #00ff44;
--color5: #00ff00;
--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);
}
.sharp td{
border-bottom: var(--solid-border);
}
.half td{
border-bottom: var(--dashed-border);
}
#legend-gradient {
background-image: linear-gradient(
to right,
var(--color0)0% 16%,
var(--color1)16% 33%,
var(--color2)33% 50%,
var(--color3)50% 66%,
var(--color4)66% 83%,
var(--color5)83 100%
);
width: 30%;
height:50px;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36
Challenge Information:
Build an Availability Table - Build an Availability Table
