Build a Book Inventory App - Requirement 5, 13, and 16

HTML-CSS
1

Tell us what’s happening:

I have fulfilled all requirements other than number 5, 13, and 16. All 3 seem to be simple but I cannot find a fix around them. I cannot find anything wrong with the code so I’m wondering if this is a bug or if I’m missing something? Thanks.

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 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="to-read">
        <td>The Plague</td>
        <td>Albert Camus</td>
        <td>Philosophical Novel</td>
        <td>
          <span class="status">To Read</span>
        </td>
        <td>
          <span class="rate">
            <span></span>
            <span></span>
            <span></span>
          </span>
        </td>
      </tr>
      <tr class="read">
        <td>The Metamorphosis</td>
        <td>Franz Kafka</td>
        <td>Novella</td>
        <td>
          <span class="status">Read</span>
        </td>
        <td>
          <span class="rate one">
            <span></span>
            <span></span>
            <span></span>
          </span>
        </td>
      </tr>
      <tr class="in-progress">
        <td>Lord of the Flies</td>
        <td>William Golding</td>
        <td>Allegorical Novel</td>
        <td>
          <span class="status">In Progress</span>
        </td>
        <td>
          <span class="rate">
            <span></span>
            <span></span>
            <span></span>
          </span>
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

/* file: styles.css */
table {
  border-collapse: collapse;
}

thead {
  background-image: linear-gradient(#3dcfff 10%, #9ee7ff);
}

thead tr th {
  padding: 5px 20px;
}

td {
  text-align: center;
  padding: 5px 20px;
}

tr[class="read"] {
  background-image: linear-gradient(#8fed8a 10%, #c4f5c1);
}

tr[class="to-read"] {
  background-image: linear-gradient(#cccccc 10%, #f0f0f0);
}

tr[class="in-progress"] {
  background-image: linear-gradient(#e9f06e 10%, #f0f2bf);
}

span {
  display: inline-block;
}

tr[class="to-read"] span[class="status"] {
  border: 2px solid red;
  border-radius: 15px;
  background-image: linear-gradient(#f22c16 10%, #de786d);
}

tr[class="read"] span[class="status"] {
  border: 2px solid green;
  border-radius: 15px;
  background-image: linear-gradient(#28f216 10%, #b0edab);
}

tr[class="in-progress"] span[class="status"] {
  border: 2px solid yellow;
  border-radius: 15px;
  background-image: linear-gradient(#e2e620 10%, #f1f2a0);
}

span[class="status"], span[class^="rate"] {
  height: 1.3rem;
  width: 100px;
  padding: 3px;
  vertical-align: middle;
  text-align: center;
}

span[class^="rate"] > span {
  width: 15px;
  height: 15px;
  border: 1px solid black;
  border-radius: 10px;
  margin: 0 auto;
  background-color: white;
}

span[class~="one"] span:nth-child(1) {
  background-image: linear-gradient(#ff2ba7 10%, #ffa8db);
}

span[class~="two"] span:nth-child(1),
span[class~="two"] span:nth-child(2) {
  background-image: linear-gradient(#ff2ba7 10%, #ffa8db);
}

span[class~="three"] span {
  background-image: linear-gradient(#ff2ba7 10%, #ffa8db);
}

Your browser information:

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

Challenge Information:

Build a Book Inventory App - Build a Book Inventory App

2

If you are talking about the Test requirements then I suggest you review the User Stories and make sure they are implemented correctly.

3

Your HTML has a syntax error in this bit of code. If you don’t see it, try checking your code with this HTML validator: HTML Validator.

4

Thanks, that worked! Now I feel dumb haha

5

Based on the code you wrote, I’m pretty sure you’re not dumb! :wink:

1 Like