Build an Availability Table - Step 35 fails but displays correctly

HTML-CSS
1

Tell us what’s happening:

The gradient is displaying properly on the preview pane, but the test is failing.

I have already tried removing 0% & 100% but the result is the same (failing test)

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>Document</title>
  </head>
  <body>
    <table>
      <caption>Availability Chart for Current Week</caption>
      <thead>
        <tr>
          <th></th>
          <th>Monday</th>
          <th>Tuesday</th>
          <th>Wednesday</th>
          <th>Thursday</th>
          <th>Friday</th>
          <th>Saturday</th>
          <th>Sunday</th>
        </tr>
      </thead>
      <tbody>
        <tr class="sharp">
          <th class="time">10:00 AM</th>
          <td class="available-0"></td>
          <td class="available-2"></td>
          <td class="available-5"></td>
          <td class="available-3"></td>
          <td class="available-2"></td>
          <td class="available-1"></td>
          <td class="available-0"></td>
        </tr>
        <tr class="half">
          <th class="time">11:00 AM</th>
          <td class="available-4"></td>
          <td class="available-2"></td>
          <td class="available-1"></td>
          <td class="available-5"></td>
          <td class="available-2"></td>
          <td class="available-3"></td>
          <td class="available-2"></td>
        </tr>
        <tr class="sharp">
          <th class="time">12:00 PM</th>
          <td class="available-1"></td>
          <td class="available-3"></td>
          <td class="available-5"></td>
          <td class="available-2"></td>
          <td class="available-4"></td>
          <td class="available-0"></td>
          <td class="available-1"></td>
        </tr>
        <tr class="half">
          <th class="time">1:00 PM</th>
          <td class="available-0"></td>
          <td class="available-5"></td>
          <td class="available-2"></td>
          <td class="available-5"></td>
          <td class="available-1"></td>
          <td class="available-2"></td>
          <td class="available-2"></td>
        </tr>
        <tr class="sharp">
          <th class="time">2:00 PM</th>
          <td class="available-4"></td>
          <td class="available-2"></td>
          <td class="available-3"></td>
          <td class="available-5"></td>
          <td class="available-0"></td>
          <td class="available-1"></td>
          <td class="available-2"></td>
        </tr>
        <tr class="half">
          <th class="time">3:00 PM</th>
          <td class="available-5"></td>
          <td class="available-2"></td>
          <td class="available-1"></td>
          <td class="available-5"></td>
          <td class="available-3"></td>
          <td class="available-2"></td>
          <td class="available-2"></td>
        </tr>
        <tr class="sharp">
          <th class="time">4:00 PM</th>
          <td class="available-1"></td>
          <td class="available-4"></td>
          <td class="available-2"></td>
          <td class="available-1"></td>
          <td class="available-0"></td>
          <td class="available-5"></td>
          <td class="available-3"></td>
        </tr>
        <tr class="half">
          <th class="time">5:00 PM</th>
          <td class="available-4"></td>
          <td class="available-0"></td>
          <td class="available-4"></td>
          <td class="available-5"></td>
          <td class="available-2"></td>
          <td class="available-1"></td>
          <td class="available-1"></td>
        </tr>
        <tr class="sharp">
          <th class="time">6:00 PM</th>
          <td class="available-0"></td>
          <td class="available-1"></td>
          <td class="available-2"></td>
          <td class="available-5"></td>
          <td class="available-2"></td>
          <td class="available-1"></td>
          <td class="available-5"></td>
        </tr>
      </tbody>
    </table>
    <div id="legend">
        <span>Availability</span>
        <div id="legend-gradient"></div>
        <p>0 >>> 5</p>
    </div>
  </body>
</html>


/* file: styles.css */
:root {
  --color0: hsl(0, 100%, 50%);
  --color1: hsl(0, 100%, 75%);
  --color2: hsl(0, 100%, 90%);
  --color3: hsl(60, 100%, 75%);
  --color4: hsl(60, 100%, 50%);
  --color5: hsl(120, 100%, 50%);
  --solid-border: 2px black solid;
  --dashed-border: 2px black dashed;
}

table {
  border-collapse: collapse;
  margin-inline: auto;
  margin-top: 10vh;
  border: 4px double black;
  box-shadow: 2px 4px hsl(0, 0%, 80%);
}

td,
th {
  height: 1.5rem;
  width: 6rem;
}

thead th {
  border: 2px solid 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);
}

#legend {
  margin-block: 2em;
  margin-inline: auto;
  width: 300px;
}
#legend p{
    text-align: center;
}

#legend-gradient {
  width: 100%;
  height: 2em;
  background-image: linear-gradient(
    to right,
    var(--color0) 0% 16.666%,

    var(--color1) 16.666% 33.333%,

    var(--color2) 33.333% 50%,

    var(--color3) 50% 66.666%,

    var(--color4) 66.666% 83.333%,

    var(--color5) 83.333% 100%
  );
}

caption{
    font-size: 2em;
    font-weight: bold;
}

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

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

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64; rv:147.0) Gecko/20100101 Firefox/147.0

Challenge Information:

Build an Availability Table - Build an Availability Table

2

Search the forum for this issue, it’s been answered many many times

https://forum.freecodecamp.org/search?q=Build%20an%20Availability%20Table%20order%3Alatest

3

Your percentages should be integers.

4

Already searched the forum. This issue, I have failed to notice where the output is there but the test fais.

5

did you try with whole numbers?

1 Like
6

Yes, it solved the issue, and I have already marked the reply as solution.