Build an Availability Table - Build an Availability Table

HTML-CSS
1

Tell us what’s happening:

Step 11 won’t pass. I reset the lesson and logged in Chrome browser, as some have mentioned in the forum, but it still returns the same error.

  1. All your td elements should have the class of available-#, where # is a number from 0 to 5.

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 rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <main>
      <table>
        <thead>
          <tr>
            <th></th>
            <th>Monday</th>
            <th>Tuesday</th>
            <th>Wednesday</th>
            <th>Thursday</th>
            <th>Friday</th>
            <th>Saturday</th>
          </tr>
        </thead>
        <tbody>
          <tr class="sharp">
            <th class="time">8:00 AM</th>
            <td class="available-5"></td>
            <td class="available-1"></td>
            <td class="available-2"></td>
            <td class="available-3"></td>
            <td class="available-4"></td>
            <td class="available-0"></td>
          </tr>
          <tr class="half">
            <th class="time">8:45 AM</th>
            <td class="available-5"></td>
            <td class="available-3"></td>
            <td class="available-1"></td>
            <td class="available-4"></td>
            <td class="available-2"></td>
            <td class="available-0"></td>
          </tr>
          <tr class="sharp">
            <th class="time">9:30 AM</th>
            <td class="available-1"></td>
            <td class="available-0"></td>
            <td class="available-2"></td>
            <td class="available-4"></td>
            <td class="available-3"></td>
            <td class="available-5"></td>
          </tr>
          <tr class="half">
            <th class="time">10:15 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–1"></td>
            <td class="available–4"></td>
          </tr>
          <tr class="sharp">
            <th class="time">11:00 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>
            <td class="available-5"></td>
          </tr>
          <tr class="half">
            <th class="time">11:45 AM</th>
            <td class="available-4"></td>
            <td class="available-2"></td>
            <td class="available-0"></td>
            <td class="available-3"></td>
            <td class="available-1"></td>
            <td class="available-5"></td>
          </tr>
          <tr class="sharp">
            <th class="time">12:30 PM</th>
            <td class="available-5"></td>
            <td class="available-0"></td>
            <td class="available-2"></td>
            <td class="available-4"></td>
            <td class="available-3"></td>
            <td class="available-1"></td>
          </tr>
          <tr class="half">
            <th class="time">1:15 PM</th>
            <td class="available-1"></td>
            <td class="available-3"></td>
            <td class="available-4"></td>
            <td class="available-2"></td>
            <td class="available-0"></td>
            <td class="available-5"></td>
          </tr>
          <tr class="sharp">
            <th class="time">2:00 PM</th>
            <td class="available-0"></td>
            <td class="available-2"></td>
            <td class="available-1"></td>
            <td class="available-4"></td>
            <td class="available-3"></td>
            <td class="available-5"></td>
          </tr>
          <tr class="half">
            <th class="time">2:45 PM</th>
            <td class="available-2"></td>
            <td class="available-4"></td>
            <td class="available-3"></td>
            <td class="available-0"></td>
            <td class="available-5"></td>
            <td class="available-1"></td>
          </tr>
          <tr class="sharp">
            <th class="time">3:30 PM</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>
            <td class="available-5"></td>
          </tr>
          <tr class="half">
            <th class="time">4:15 PM</th>
            <td class="available-5"></td>
            <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">5:00 PM</th>
            <td class="available-5"></td>
            <td class="available-1"></td>
            <td class="available-2"></td>
            <td class="available-0"></td>
            <td class="available-3"></td>
            <td class="available-4"></td>
          </tr>
        </tbody>
      </table>

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



:root {
  --color0: #ff0000;
  --color1: #ffa500;
  --color2: #be83fb;
  --color3: #20adff;
  --color4: #ffff00;
  --color5: #05d45c;

  --solid-border: 2px solid;
  --dashed-border: 2px dashed;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
  * {
    scroll-behavior: smooth;
  }
}

body {
  width: 100vw;
  margin: 4vh auto;
}

main {
  width: 80%;
  /*width: 80rem;*/
  /*max-width: 80rem;*/
  max-width: 80vw;
  margin: 0 auto;
}

table {
  background-color: #efefef;
  padding: 1%;
  margin: 0 auto;
  width: 80%;
}

thead th {
  padding: 1%;
}

td {
  padding: 2% 0;
}

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

.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 {
  width: 80%;
  margin: 2rem auto;
}

#legend-gradient {
  background-image: linear-gradient(
    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: 12em;
  height: 12em;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.5 Safari/605.1.15

Challenge Information:

Build an Availability Table - Build an Availability Table

2

there are a few of your elements that appear like this with the dash having a yellow square around:

image
image419×262 9.96 KB

that means that even fi that dash appear like the normal dash it is a different dash, try to find these and replace them with the normal dash

it should be only those under 10:15 AM

2 Likes
3

Thanks. This resolved the issue. It’s interesting to see that there are other hyphens the test picked when it was all hyphens all along

1 Like
4

even if it does not look like it, they are different characters

5

I get that. When I wrote it, I clicked on the hyphen key the exact same way I clicked on the hyphen key later when the test passed. I just rewrote it. I guess the editor sometimes has a mind of its own