Build a Book Inventory App Issue

HTML-CSS
1

I’m trying to finish the Build a Book Inventory App lab that is part of the CSS course in the Certified Full Stack Developer Curriculum program. But I can’t get test 46 to 51 approved, even though my code works as is intended. This is my code so far:

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>
        <th>Title</th>
        <th>Author</th>
        <th>Category</th>
        <th>Status</th>
        <th>Rate</th>
    </thead>
    <tbody>
      <tr class="read">
        <td></td>
        <td></td>
        <td></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></td>
        <td></td>
        <td></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></td>
        <td></td>
        <td></td>
        <td><span class="status">Read</span></td>
        <td><span class="rate two"><span></span><span></span><span></span></span></td> 
      </tr>
      <tr class="in-progress">
        <td></td>
        <td></td>
        <td></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></td>
        <td></td>
        <td></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>

Css:

tr[class="read"] {
  background-image: linear-gradient(red, blue)
}

tr[class="to-read"] {
  background-image: linear-gradient(yellow, green)
}

tr[class="in-progress"] {
  background-image: linear-gradient(black, cyan)
}

span {
  display: inline-block;
}

tr[class="to-read"] span[class="status"] {
   border: 1px solid black;
   background-image: radial-gradient(grey, white);
}

tr[class="read"] span[class="status"] {
  border: 1px solid black;
  background-image: radial-gradient(grey, white);
}

tr[class="in-progress"] span[class="status"] {
  border: 1px solid black;
  background-image: radial-gradient(grey, white);
}

span[class="status"], span[class^="rate"] {
  height: 20px;
  width: 80px;
  padding: 2px;
  border-radius: 5px;
}

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

span[class*="one"] :nth-child(1) { background-image: linear-gradient(yellow ,orange);
}

span[class*="two"] :nth-child(-n + 2) {
background-image: linear-gradient(yellow ,orange) ;
}

span[class*="three"] :nth-child(-n + 3) {
background-image: linear-gradient(yellow ,orange);
}

I tried with the direct child symbol “>”, but that also doesn’t get passed, even though it also works.

Need help please!

2

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Get Help > Ask for Help button located on the challenge.

image
image493×196 5.09 KB

The Ask for Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

3

Please share a link to this project.

I’ve edited your post to improve the readability of the code. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

4

Here are some troubleshooting steps you can follow. Focus on one test at a time:

  • What is the requirement of the first failing test?
  • Check the related User Story and ensure it’s followed precisely.
  • What line of code implements this?
  • Are there any errors or messages in the console?

If this does not help you solve the problem, please reply with answers to these questions.