Build a Book Inventory App - Build a Book Inventory App

HTML-CSS
1

Tell us what’s happening:

im stuck at step 45 i have commands right i believe and it does not reconize the code

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>
<h1>Book Inventory</h1>
<body>
<table>
<tr>
<th>Title</th>
<th>Author</th>
<th>Category</th>
<th>Status</th>
<th>Rate</th>
</tr>
<tbody>
<tr class="read">
<td>Final Destination</td>
<td>Natasha Rhodes</td>
<td>Horror/Mystery</td>
<td><span class="status">Read</span></td>
<td><span class="rate one">
<span class=></span>
<span></span>
<span></span>
</span></td>
</tr>
<tr class="read">
<td>Marvel Zombies</td>
<td>Mark Kirman</td>
<td>Horror/Zombies</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>Ultimate Spiderman</td>
<td> Jonathan Hickman</td>
<td>Fiction/Superhero</td>
<td><span class="status">To Read</span></td>
<td><span class="rate two">
<span></span>
<span></span>
<span></span>
</span></td>
</tr>
<tr class="in-progress">
<td>Berserk</td>
<td>Kentaro Miura</td>
<td>Manga</td>
<td><span class="status">In Progress</span></td>
<td><span class="rate three">
<span></span>
<span></span>
<span></span>
</span></td>
</tr>
</tbody>
</table>
</body>

</html>

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

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

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

span{
display: inline-block;
}

 tr[class="to-read"] span[class="status"]{
 border: 3px solid red;
 background: red;
 border-radius: 10px;
}

tr[class="read"] span[class="status"]{
border: 3px solid lightgreen;
background: lightgreen;
border-radius: 10px;
}

tr[class="in-progress"] span[class="status"]{
border: 3px solid orange;
background: orange;
border-radius: 10px;
}

span[class="status"]  span[class="rate"]{

}


td{text-align: center;
}

Your browser information:

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

Challenge Information:

Build a Book Inventory App - Build a Book Inventory App

https://www.freecodecamp.org/learn/full-stack-developer/lab-book-inventory-app/build-a-book-inventory-app

2

Here are some troubleshooting 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 first failing test?
  3. Check the related User Story and ensure it’s followed precisely.
  4. What line of code implements this?

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

3

Here’s a resource that might help you with that: