Build an Availability Table: What's wrong with my code?

HTML-CSS
1

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Availability Table</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>

  <table>
    <thead>
      <tr>
        <th></th>
        <th>Monday</th>
        <th>Tuesday</th>
        <th>Wednesday</th>
      </tr>
    </thead>
    <tbody>
      <tr class="sharp">
        <th class="time">9:00 AM</th>
        <td class="available-2"></td>
        <td class="available-4"></td>
        <td class="available-1"></td>
      </tr>
      <tr class="half">
        <th class="time">10:00 AM</th>
        <td class="available-0"></td>
        <td class="available-3"></td>
        <td class="available-5"></td>
      </tr>
      <tr class="sharp">
        <th class="time">11:00 AM</th>
        <td class="available-1"></td>
        <td class="available-1"></td>
        <td class="available-2"></td>
      </tr>
      <tr class="half">
        <th class="time">12:00 PM</th>
        <td class="available-5"></td>
        <td class="available-0"></td>
        <td class="available-4"></td>
      </tr>
    </tbody>
  </table>

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

</body>
</html>

CSS:

:root {
  --color0: #e74c3c;
  --color1: #f39c12;
  --color2: #f1c40f;
  --color3: #2ecc71;
  --color4: #27ae60;
  --color5: #3498db;

  --solid-border: 2px solid #333;
  --dashed-border: 2px dashed #999;

  --solid-border: 2px solid #333;
  --dashed-border: 2px dashed #999;
}

body {
  font-family: Arial, sans-serif;
  padding: 20px;
  background-color: #fafafa;
}

h1 {
  text-align: center;
  margin-bottom: 20px;
}

table {
  width: 80%;
  margin: auto;
  border-collapse: collapse;
  text-align: center;
}

th, td {
  padding: 10px;
  border: 1px solid #ccc;
}

thead th {
  background-color: #ddd;
}

.time {
  background-color: #eee;
  font-weight: bold;
}

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

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

/* Background colors based on availability */
.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 styles */
#legend {
  margin-top: 30px;
  text-align: center;
}

#legend span {
  font-weight: bold;
  margin-right: 10px;
}

#legend-gradient {
  display: inline-block;
  width: 300px;
  height: 20px;
  border: 1px solid #ccc;
  background-image: linear-gradient(
    to right,
    var(--color0) 0%, 
    var(--color0) 16.66%,
    var(--color1) 16.66%, 
    var(--color1) 33.32%,
    var(--color2) 33.32%, 
    var(--color2) 49.98%,
    var(--color3) 49.98%, 
    var(--color3) 66.64%,
    var(--color4) 66.64%, 
    var(--color4) 83.3%,
    var(--color5) 83.3%, 
    var(--color5) 100%
  );
}
2

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 a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

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

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 (').

3

It also helps if you can provide a link to the challenge for context. I’ve edited your post to include this also.

If you want to have multiple colour stops in a linear-gradient, the format should be like this example:

/* like this */
var(--myColor1) 0% 10%,
var(--myColor2) 10% 20%,
etc

/* not like this */
var(--myColor1) 0%,
var(--myColor1) 10%,
var(--myColor2) 10%,
var(--myColor2) 20%,
etc

Also, round all of the values to their nearest integer (e.g. 66.66% => 67%).

4

Here’s an example from MDN on how to do that linear gradient. Make sure you use integers for your percentages, too.