Build a Book Inventory App

HTML-CSS
1

Tell us what’s happening:

The issue appears to be that the test environment does not load external CSS files linked with . As a result, the test suite cannot detect the required attribute selectors even though they are present in my style.css file. When the same CSS is placed directly inside a tag in the HTML file, the tests pass. The issue appears to be with how the freeCodeCamp test runner reads the files, not with the HTML or CSS I wrote. I have made a Github report already.

Your code so far

<!-- file: index.html -->
<!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 Hobbit</td>
      <td>J.R.R Tolkien</td>
      <td>Fantasy</td>
      <td><span class="status">Read</span></td>
      <td>
        <span class="rate three">
          <span></span><span></span><span></span>
        </span>
      </td>
    </tr>

    <tr class="to-read">
      <td>Dune</td>
      <td>Frank Herbert</td>
      <td>Science Fiction</td>
      <td><span class="status">To Read</span></td>
      <td>
        <span class="rate">
          <span></span><span></span><span></span>
        </span>
      </td>
    </tr>

    <tr class="in-progress">
      <td>Atomic Habits</td>
      <td>James Clear</td>
      <td>Self-help</td>
      <td><span class="status">In Progress</span></td>
      <td>
        <span class="rate">
          <span></span><span></span><span></span>
        </span>
      </td>
    </tr>

    <tr class="read">
      <td>1984</td>
      <td>George Orwell</td>
      <td>Dystopian</td>
      <td><span class="status">Read</span></td>
      <td>
        <span class="rate one">
          <span></span><span></span><span></span>
        </span>
      </td>
    </tr>
  </tbody>
</table>

</body>
</html>


/* file: styles.css */
/* Base styles */
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #111827;
  color: #e5e7eb;
  padding: 2rem;
}

h1 {
  text-align: center;
  margin-bottom: 1.5rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: #020617;
  border-radius: 0.5rem;
  overflow: hidden;
}

thead {
  background: #0f172a;
  color: #e5e7eb;
}

th,
td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid #1f2937;
}

/* All span elements must be inline-block */
span {
  display: inline-block;
}

/* Row background gradients */
tr[class*="read"] {
  background-image: linear-gradient(90deg, #064e3b, #022c22);
}

tr[class*="to-read"] {
  background-image: linear-gradient(90deg, #1d4ed8, #0f172a);
}

tr[class*="in-progress"] {
  background-image: linear-gradient(90deg, #92400e, #111827);
}

/* Status styles */
tr[class="to-read"] span[class="status"] {
  border: 1px solid #bfdbfe;
  background-image: linear-gradient(135deg, #1d4ed8, #3b82f6);
  color: #eff6ff;
}

tr[class="read"] span[class="status"] {
  border: 1px solid #bbf7d0;
  background-image: linear-gradient(135deg, #16a34a, #22c55e);
  color: #ecfdf5;
}

tr[class="in-progress"] span[class="status"] {
  border: 1px solid #fed7aa;
  background-image: linear-gradient(135deg, #ea580c, #f97316);
  color: #fff7ed;
}

/* Status + rate base styles */
span[class="status"],
span[class^="rate"] {
  height: 1.5rem;
  width: auto;
  padding: 0.15rem 0.5rem;
}

/* Rate dots */
span[class^="rate"] > span {
  border: 1px solid #4b5563;
  border-radius: 999px;
  margin: 0 0.1rem;
  height: 0.6rem;
  width: 0.6rem;
  background-color: #020617;
}

/* Rating color rules */
span[class~="one"] > span:first-child {
  background-image: linear-gradient(135deg, #f97316, #facc15);
}

span[class~="two"] > span:nth-child(-n + 2) {
  background-image: linear-gradient(135deg, #22c55e, #a3e635);
}

span[class~="three"] span {
  background-image: linear-gradient(135deg, #38bdf8, #6366f1);
}

Your browser information:

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

Challenge Information:

Build a Book Inventory App - Build a Book Inventory App

2

Welcome to the forum @Raven_Sixx!

This is not an issue with the test runner. This is an issue with your CSS.

MDN: Attribute Selectors

Happy coding!