Build an Availability Table - Build an Availability Table

HTML-CSS
1

Tell us what’s happening:

i’ve been trying for the couple of hour to pass this test but its seems that there is bug since i even used Ai when i start to be frustration but still no result

Your code so far

<!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 href="styles.css" rel="stylesheet">
</head>

<body>
    <h1>Team Availability Tracker</h1>

  <table>
    <thead>
      <tr>
        <th>Time</th>
        <th>Monday</th>
        <th>Tuesday</th>
        <th>Wednesday</th>
        <th>Thursday</th>
        <th>Friday</th>
      </tr>
    </thead>

    <tbody>

      <tr class="half">
        <th class="time">08 AM</th>
        <td class="available-0"></td>
        <td class="available-1"></td>
        <td class="available-2"></td>
        <td class="available-3"></td>
        <td class="available-4"></td>
      </tr>

      <tr class="half">
        <th class="time">10 AM</th>
        <td class="available-5"></td>
        <td class="available-4"></td>
        <td class="available-3"></td>
        <td class="available-2"></td>
        <td class="available-1"></td>
      </tr>

      <tr class="sharp">
        <th class="time">12 PM</th>
        <td class="available-0"></td>
        <td class="available-2"></td>
        <td class="available-4"></td>
        <td class="available-1"></td>
        <td class="available-3"></td>
      </tr>

      <tr class="half">
        <th class="time"> 02 PM</th>
        <td class="available-5"></td>
        <td class="available-3"></td>
        <td class="available-2"></td>
        <td class="available-0"></td>
        <td class="available-4"></td>
      </tr>

      <tr class="half">
        <th class="time"> 04 PM</th>
        <td class="available-1"></td>
        <td class="available-5"></td>
        <td class="available-4"></td>
        <td class="available-3"></td>
        <td class="available-2"></td>
      </tr>

      <tr class="sharp">
        <th class="time"> 06 PM</th>
        <td class="available-1"></td>
        <td class="available-5"></td>
        <td class="available-4"></td>
        <td class="available-3"></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 {
  /* Availability colors */
  --color0: #ff0000;
  --color1: #ff8000;
  --color2: #ffff00;
  --color3: #80ff00;
  --color4: #00ff80;
  --color5: #00ffff;

  /* Border styles */
  --solid-border: 2px solid black;
  --dashed-border: 2px dashed gray;
}

/* Basic page styling */
body {
  font-family: Arial, sans-serif;
  background-color: #f6f6f6;
  margin: 30px;
  text-align: center;
}

/* Table styling */
table {
  border-collapse: collapse;
  width: 80%;
  margin: 0 auto 30px;
  background-color: #fff;
}

th, td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: center;
}

/* Time column styling */
th.time {
  background-color: #eaeaea;
}

/* Color classes 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); }

/* Row border styles */
.sharp td {
  border-bottom: var(--solid-border);
}

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

/* Legend section */
#legend {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

#legend span {
  font-weight: bold;
  font-size: 1.2em;
}

/* Hard transitions using two color-stops per color */
#legend-gradient {
  width: 320px;
  height: 26px;
  border-radius: 6px;
  border: 2px solid #444;
  background-image: linear-gradient(
    to right,
    var(--color0) 0%,    var(--color0) 16.6%,
    var(--color1) 16.6%, var(--color1) 33.3%,
    var(--color2) 33.3%, var(--color2) 50%,
    var(--color3) 50%,   var(--color3) 66.6%,
    var(--color4) 66.6%, var(--color4) 83.3%,
    var(--color5) 83.3%, var(--color5) 100%
  );
}

Your browser information:

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

Challenge Information:

Build an Availability Table - Build an Availability Table

2

that is not the two color stops syntax, find an example at https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient#gradient_with_multi-position_color-stops

3

thank you for quick respond but that’s what i used ealier still didn’t work, i even heard someone passed that by removing spacing and adding 0% and 100% add end which i did but still nothing

:root {
  /* Availability colors */
  --color0: #ff0000;
  --color1: #ff8000;
  --color2: #ffff00;
  --color3: #80ff00;
  --color4: #00ff80;
  --color5: #00ffff;

  /* Border styles */
  --solid-border: 2px solid black;
  --dashed-border: 2px dashed gray;
}

/* Basic page styling */
body {
  font-family: Arial, sans-serif;
  background-color: #f6f6f6;
  margin: 30px;
  text-align: center;
}

/* Table styling */
table {
  border-collapse: collapse;
  width: 80%;
  margin: 0 auto 30px;
  background-color: #fff;
}

th, td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: center;
}

/* Time column styling */
th.time {
  background-color: #eaeaea;
}

/* Color classes 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); }

/* Row border styles */
.sharp td {
  border-bottom: var(--solid-border);
}

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

/* Legend section */
#legend {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

#legend span {
  font-weight: bold;
  font-size: 1.2em;
}

#legend-gradient {
  width: 320px;
  height: 26px;
  border-radius: 6px;
  border: 2px solid #444;
  background-image: linear-gradient(90deg,var(--color0)0% 16.6%,
    var(--color1)16.6% 33.3%,
    var(--color2)33.3% 50%,
    var(--color3)50% 66.6%,
    var(--color4)66.6% 83.3%,
    var(--color5)83.3% 100%);
}
4

LLMs do not actually know if your code is correct or not. They don’t ‘know’ anything.

5

Its my first time reporting anything to the assistance. i hope they could atleast fix the bug for the new users

6

This is probably a problem with your code, not the test.

7

I hope its my code . its something i can change and pass this steps :slight_smile:

8

Ah, I see what the issue is. Use whole numbers instead of decimal numbers. @ILM I imagine the intent is to support decimal numbers as percentages?

9

use whole numbers 

10

browsers round the percentage to a whole number anyway

there is a long standing issue about making this test less strict and allow both formats, but it has not yet had a contributor bring the work to an end

1 Like
11

Screenshot 2025-10-22 190712
Screenshot 2025-10-22 1907121133×299 38.2 KB

12

if you have the resolution don’t hesitate to share it please. it getting really enjoyable.

13

Please post actual code instead of pictures.

But, the instructions did not say anything about px.

14

ILM and I both said what the issue was with the last code you posted.

15 
#legend-gradient {
  width: 320px;
  height: 26px;
  border-radius: 6px;
  border: 2px solid #444;

  background-image: linear-gradient(
    90deg,
    var(--color0)0px 53px,
    var(--color1)53px 106px,
    var(--color2)106px 160px,
    var(--color3)160px 213px,
    var(--color4)213px 266px,
    var(--color5)266px 320px
  );
}
16

I would read all of what I posted. Specifically

and

17

done guys hahahahah that really hard but i’ve done it let tell you how :stuck_out_tongue:

18

Screenshot 2025-10-22 192509
Screenshot 2025-10-22 1925091867×949 143 KB

I’ve entered the example feature and copied it from there. i believe he wanted the code to be exactly as the example

19

Please do not cheat by copying the example project.

20

its my first time i’ve done that. i’ve said to my self if that was the referrence test will be testing us based on those aspects . so its not cheating