Build a Book Inventory App - Build a Book Inventory App

HTML-CSS
1

Tell us what’s happening:

You should have a table element after your h1 element. but the thing is the table element is already under the h1 element not so i do not know what is wrong here.

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">
  <div class="read"></div>
  <td>The Crucible</td>
      <td>Arthur Miller</td>
      <td>Suspence</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 Animal Kingdom</td>
      <td>George Orwell</td>
      <td>Sci-fi</td>
      <td><span class="status">To Read</span></td>
      <td><span class="rate one"><span></span><span></span><span></span></span></td>
</tr>
<tr class="in-progress">
  <td>The Pelican Brief</td>
      <td>John Grisman</td>
      <td>Crime</td>
      <td><span class="status">In Progress</span></td>
      <td><span class="rate two"><span></span><span></span><span></span></span></td>
      <tbody>
</tr>
<tr class="read">
  <td>Harry Porter</td>
      <td>JK Rowlings</td>
      <td>Sci-fi</td>
      <td><span class="status">Read</span></td>
      <td><span class="rate one"><span></span><span></span><span></span></span></td>
</tr>
  </tbody>
  <tr class="read">
  <td>Twillight</td>
      <td>Stephenie Mayers</td>
      <td>Suspence</td>
      <td><span class="status">Read</span></td>
      <td><span class="rate two"><span></span><span></span><span></span></span></td>
</tr>
</table>
</body>

</html>

/* file: styles.css */
/* file: styles.css */
tr[class="read"] {
  background-image: linear-gradient(black 1%, skyblue 99%);
}

tr[class="to-read"] {
  background-image: linear-gradient(black 1%, skyblue 99%);
}

tr[class="in-progress"] {
  background-image: linear-gradient(black 1%, skyblue 99%);
}


span {
  display: inline-block;
}


tr[class="to-read"] span[class="status"] {
  border: 2px solid black;
  background-image: linear-gradient(green);
}

tr[class="read"] span[class="status"] {
  border: 2px solid red;
  background-image: linear-gradient(blue);
}

tr[class="in-progress"] span[class="status"] {
  border: 2px double yellow;
  background-image: linear-gradient(yellow);
}


span[class="status"], span[class^="rate"] {
  height: 100px;
  width: 100px;
  padding: 2px;
}


span[class^="rate"] > span {
  border: 2px solid black;
  border-radius: 2px;
  margin: 2px;
  height: 10px;
  width: 10px;
  background-color: blue;
}


span[class~="one"] > span:nth-child(1) {
  background-image: linear-gradient(green 70%, green 30%);
}


span[class~="two"] > span:nth-child(1),
span[class~="two"] > span:nth-child(2) {
  background-image: linear-gradient(#232323 30%, green 30%);
}

span[class~="three"] > span {
  background-image: linear-gradient(green 10%, green 30%);
}

Your browser information:

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

Challenge Information:

Build a Book Inventory App - Build a Book Inventory App

2

True, but there are errors within the table. It may help you find them if you format your code for the tbody like you did for thead. Also, think about what elements can be used inside a table element.

3

Just a few things for cleanup and things that you might want to know.

  1. Don’t Use <div> Inside <tr>

    <tr class="read">
  <div class="read"></div> <!-- ❌ Invalid HTML -->
    • A <tr> can only contain <td> or <th>. Remove the <div>, it’s not valid here.

  2. Watch Your <tbody> Placement

    <tbody>
  <tr>...</tr>
  ...
  <tbody> <!-- ❌ Duplicate or misused -->
</tbody>
    • Only one <tbody> is allowed per table unless you’re segmenting sections (which you’re not here). Be sure to close it once, after all your data rows.