Tell us what’s happening:
check 9 is not passing no matter how I format my time text, not sure what I am doing/formatting wrong. (Unless I missed something tiny)
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>
<tr>
<th>Day 1</th>
<th>Day 2</th>
<th>Day 3</th>
</tr>
<tr class="sharp">
<th class="time">1:00 AM</th>
<td class="available-1"></td>
<td class="available-2"></td>
<td class="available-3"></td>
</tr>
<tr class="sharp">
<th class="time">2:00 AM</th>
<td class="available-1"></td>
<td class="available-2"></td>
<td class="available-3"></td>
</tr>
<tr class="half">
<th class="time">3:00 AM</th>
<td class="available-1"></td>
<td class="available-2"></td>
<td class="available-3"></td>
</tr>
<tr class="half">
<th class="time">4:00 AM</th>
<td class="available-1"></td>
<td class="available-2"></td>
<td class="available-3"></td>
</tr>
</table>
<div id="legend"><span>Availability</span><div id="legend-gradient"></div></div>
</body>
</html>
/* file: styles.css */
:root {
--color0: white;
--color1: red;
--color2: orange;
--color3: yellow;
--color4: lightgreen;
--color5: skyblue;
--solid-border: 1px solid black;
--dashed-border: 2px dashed skyblue;
}
.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 left var(--color0) 0%, var(--color0) 16%,
var(--color1) 16%, var(--color1) 33%,
var(--color2) 33%, var(--color2) 50%,
var(--color3) 50%, var(--color3) 66%,
var(--color4) 66%, var(--color4) 83%,
var(--color5) 83%, var(--color5) 100%);
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:151.0) Gecko/20100101 Firefox/151.0
Challenge Information:
Build an Availability Table - Build an Availability Table