Build a Book Inventory App - Build a Book Inventory App

HTML-CSS
1

Tell us what’s happening:

Please help me with questions 16 I’ve tried everything

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 art of being Alone</td>
        <td>Renuka</td>
        <td>self-improvement</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>Never Finsihed</td>
        <td>David Goggins</td>
        <td>self-improvement</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>Deep Work</td>
         <td>Cal Newport</td>
         <td>Productivity</td>
         <td><span class="status">In Progress</span></td>
         <td><span class="rate one">
            <span></span><span></span><span></span>
          </span></td>
       </tr>
       
      </tbody>
  </table>
</body>

</html>

/* file: styles.css */
body{
 background-color: #f3f5;
}

tr[class="read"] {
  background-image: linear-gradient(to right, #d4fc79 0%, #96e6a1 100%);
  color: #1a3a1a;
}

tr[class="in-progress"] {
  background-image: linear-gradient(to right, #fb923c 0%, #facc15 100%);
  color: #431407;
}

tr[class="to-read"] {
  background-image: linear-gradient(to right, #e2e8f0 0%, #cbd5e1 100%);
  color: #1e293b;
}

span {
  display: inline-block;
  padding: 2px 6px;
}

tr[class="read"] span[class="status"] {
  border: 2px solid #64748b;
  background-image: linear-gradient(to bottom, #f8fafc, #cbd5e1);
  border-radius: 4px;
}

tr[class="to-read"] span[class="status"] {
  border: 2px solid #64748b;
  background-image: linear-gradient(to bottom, #f8fafc, #cbd5e1);
}

tr[class="in-progress"] span[class="status"] {
  border: 2px solid #9a3412;
  background-image: linear-gradient(to bottom, #fff7ed, #fdba74);
  border-radius: 4px;
  padding: 2px 8px;
}

span[class="status"], 
span[class^="rate"] {
  font-family: sans-serif;
  height: 12px;
  width: 12px;
  padding: 2px;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.75rem;
}

span[class^="rate"] > span {
  border: 1px solid #333;
  border-radius: 50%;
  margin: 0 2px;
  height: 12px;
  width: 12px;
  background-color: #ffd700; /* Gold color for the rating indicators */
  display: inline-block;
}

span[class~="one"] span:first-child {
  background-image: linear-gradient(to bottom, #ff5f6d, #ffc371);
  border-color: #e04e5b;
}

span[class~="two"] span:nth-child(-n + 2) {
  background-image: linear-gradient(to bottom, #ff5f6d, #ffc371);
  border-color: #e04e5b;
}

span[class~="three"] span {
  background-image: linear-gradient(to bottom, #ff5f6d, #ffc371);
  border-color: #e04e5b;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.1 Safari/605.1.15

Challenge Information:

Build a Book Inventory App - Build a Book Inventory App

2

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

3

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?

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