Build a Book Inventory App - Step 16

HTML-CSS
1

Tell us what’s happening:

Step 16 is failing despite there being no syntax errors in the HTML and the text in the span elements (with a class of ‘status’) matching that of their rows’ class attribute… I genuinely have no idea what else could be wrong.

Your code so far

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Book Inventory</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <h1>Book Inventory</h1>

  <table>

    <thead>
      <tr>
        <th>Title</th>
        <th>Author</th>
        <th>Category</th>
        <th>Status</th>
        <th>Rate</th>
      </tr>
    </thead>

    <tbody>

      <tr class="read">
        <td>The Three Musketeers</td>
        <td>Alexandre Dumas</td>
        <td>Historical Novel</td>
        <td>
          <span class="status">Read</span>
        </td>
        <td>
          <span class="rate three">
            <span></span>
            <span></span>
            <span></span>
          </span>
        </td>
      </tr>

      <tr class="in-progress">
        <td>The Plague</td>
        <td>Albert Camus</td>
        <td>Philosophical Novel</td>
        <td>
          <span class="status">In Progress</span>
        </td>
        <td>
          <span class="rate one">
            <span></span>
            <span></span>
            <span></span>
          </span>
        </td>
      </tr>

      <tr class="to-read">
        <td>Lord of the Flies</td>
        <td>William Golding</td>
        <td>Allegorical Novel</td>
        <td>
          <span class="status">To Read</span>
        </td>
        <td>
          <span class="rate two">
            <span></span>
            <span></span>
            <span></span>
          </span>
        </td>
      </tr>

    </tbody>

  </table>

</body>

</html>

:root {
  font-size: 16px;
}

*,
*::before,
*::after {
  font-family: monospace;
  box-sizing: border-box;
}

span {
  display: inline-block;
}

td, th {
  padding-block: 4px;
  padding-inline: 8px;
}

tr[class="read"] {
  background-image: linear-gradient(to bottom, #DDD, #D5D5D5)
}
tr[class="to-read"] {
  background-image: linear-gradient(to bottom, #DDD, #D5D5D5)
}
tr[class="in-progress"] {
  background-image: linear-gradient(to bottom, #DDD, #D5D5D5)
}


th {
  background-image: linear-gradient(to bottom, #D9D9D9, #C0C0C0)
}

td:has(span.status),
td:has(span.rate) {
  padding-inline: 4px;
}

span[class="status"],
span[class^="rate"] {
  height: 1.3rem;
  padding: 0.1rem 0.5rem;
  user-select: none;
  border-radius: 999px;
  text-transform: uppercase;
  width: 100%;
  text-align: center;
  font-size: 0.8rem;
}

tr[class="read"] span[class="status"] {
  border: solid 2px hsl(128, 50%, 60%);
  background-image: linear-gradient(
    to bottom,
    hsl(128, 50%, 78%),
    hsl(128, 50%, 60%)
  );
  color: hsl(128, 70%, 14%);
}

tr[class="to-read"] span[class="status"] {
  border: solid 2px hsl(0, 50%, 60%);
  background-image: linear-gradient(
    to bottom,
    hsl(0, 50%, 78%),
    hsl(0, 50%, 60%)
  );
  color: hsl(0, 70%, 24%);
}

tr[class="in-progress"] span[class="status"] {
  border: solid 2px hsl(34, 60%, 60%);
  background-image: linear-gradient(
    to bottom,
    hsl(34, 65%, 78%),
    hsl(34, 65%, 60%)
  );
  color: hsl(358, 70%, 24%);
}

span[class^="rate"] > span {
  border: solid 1px hsla(0, 0%, 0%, 0.15);
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 999px;
  margin: 0px -2px;
  background-color: hsla(0, 0%, 0%, 0.02);
}

span[class~="one"] :first-child {
  border: solid 2px hsl(50, 60%, 50%);
  background-image: linear-gradient(
    to bottom,
    hsla(50, 70%, 65%, 0.8),
    hsla(50, 70%, 65%, 0.8)
  );
}

span[class~="two"] :nth-child(-n + 2) {
  border: solid 2px hsl(50, 60%, 50%);
  background-image: linear-gradient(
    to bottom,
    hsla(50, 70%, 65%, 0.8),
    hsla(50, 70%, 65%, 0.8)
  );
}

span[class~="three"] span {
  border: solid 2px hsl(50, 60%, 50%);
  background-image: linear-gradient(
    to bottom,
    hsla(50, 70%, 65%, 0.8),
    hsla(50, 70%, 65%, 0.8)
  );
}

Your browser information:

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

Challenge Information:

Build a Book Inventory App - Build a Book Inventory App

2

Appreantly, text-transform: uppercase; is interpreted by FCC’s test suite literally/visually. Which, I guess, makes sense in the context of a browser/user treating the text visually rather than looking at source content.

At teast, I found the issue:

Don’t use CSS that manipulates the DOM content visually on Step 16, as it’s looking for literal/visual text, not source/html text