Build a Book Inventory App - Build a Book Inventory App

HTML-CSS
1

Tell us what’s happening:

pls i need help since tests 4-5 and 48-53 are not working for me

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>
    <tr>
      <th>Title</th>
      <th>Author</th>
      <th>Category</th>
      <th>Status</th>
      <th>Rate</th>
    </tr>

    <tr class="read">
      <td>Pride and Prejudice</td>
      <td>Jane Austen</td>
      <td>Historical Romance</td>
      <td><span class="status">Read</span></td>
      <td><span class="rate two">
        <span></span>
        <span></span>
        <span></span>
        </span></td>
    </tr>

    <tr class="to-read">
      <td>Ghost Writer</td>
      <td>Edgar J. Hyde</td>
      <td>Children's Horror</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="read">
      <td>Sideways Stories from Wayside School</th>
      <td>Louis Sachar</td>
      <td>Children's Comedy</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>Finding Faeries</td>
      <td>Alexandra Rowland</td>
      <td>Fantasy Nonfiction</td>
      <td><span class="status">In Progress</span></td>
      <td><span class="rate">
        <span></span>
        <span></span>
        <span></span>
        </span></td>
    </tr>
  </table>

</body>

</html>

/* file: styles.css */
tr[class="read"] {
  background-image: linear-gradient(plum, thistle, lavender, thistle, plum)
}

tr[class="to-read"] {
  background-image: linear-gradient(slategray, silver, whitesmoke, silver, slategray) 
}

tr[class="in-progress"] {
  background-image: linear-gradient(teal, MediumAquaMarine, lightcyan, MediumAquaMarine, teal) 
}

span {
  display: inline-block;
  height: 20px;
  width: 60px;
  padding: 4px;
}

tr[class="read"] span[class="status"] {
  border: 2px solid purple;
  border-radius: 20%;
  background-image: radial-gradient(plum, purple);
  color: white;
}

tr[class="in-progress"] span[class="status"] {
  border: 2px solid darkgreen;
  border-radius: 20%;
  background-image: radial-gradient(MediumAquaMarine, darkgreen);
  color: white;
}

tr[class="to-read"] span[class="status"] {
  border: 2px solid dimgray;
  border-radius: 20%;
  background-image: radial-gradient(gray, dimgray);
  color: white;
}

span[class="status"], span[class^="rate"] {
  height: 25px;
  width: 80px;
  padding:5px;
  margin:auto;
  text-align: center;
  vertical-align: center;
}

span[class^="rate"]>span {
  border: 1px solid gray;
  border-radius: 50%;
  background-color:gray;
  margin: auto;
  padding: 3px;
  height: 10px;
  width: 10px;
}

span[class*="one"] span:first-child {
  border: 1px solid gray;
  border-radius: 50%;
  background-image: linear-gradient(white, goldenrod);
  margin: auto;
  height: 10px;
  width: 10px;
}

span[class*="two"]>span:first-of-type, span[class*="two"]>span:nth-of-type(2) {
  border: 1px solid gray;
  border-radius: 50%;
  background-image: linear-gradient(white, goldenrod);
  margin: auto;
  height: 10px;
  width: 10px;
}

span[class*="three"]>span:first-of-type, span[class*="three"]>span:nth-of-type(2),span[class*="three"]>span:nth-of-type(3) {
  border: 1px solid gray;
  border-radius: 50%;
  background-image: linear-gradient(white, goldenrod);
  margin: auto;
  height: 10px;
  width: 10px;
}

Your browser information:

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

Challenge Information:

Build a Book Inventory App - Build a Book Inventory App

2

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

  1. Are there any errors or messages in the console?
  2. What is the requirement of the failing test?
  3. Check the related User Story and ensure it’s followed precisely.
  4. What line of code implements this?
  5. What is the result of the code and does it match the requirement? (Write the value of a variable to the console at that point in the code if needed.)

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