Build a Book Inventory App - Build a Book Inventory App

HTML-CSS
1

Tell us what’s happening:

My code keeps failing the test 17. I have tried writing the span element multiple ways but none of them seems to be working. Is there something that I am missing?
Each .rate element should contain three empty span elements.

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 class="table">
    <thead>
      <tr>
        <th class="title">Title</th>
        <th class="author">Author</th>
        <th class="category">Category</th>
        <th class="status">Status</th>
        <th class="rate">Rate</th>
      </tr>
    </thead>

    <tbody>
      <tr class="read">
        <td>Gone with the Wind</td>
        <td>Margret Mitchell</td>
        <td>History</td>
        <td><span class="status">Read</span></td>
        <td><span class="rate three"><span></span><span></span><span></span> </span></td>
    </tr>
      </tr>

      <tr class="to-read">
        <td>Sherlock Holmes</td>
        <td>Sr.Author Conan</td>
        <td>Mystery</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>19Q5</td>
        <td>Haruki Murakami</td>
        <td>Slice of Life</td>
        <td>
          <span class="status">In Progress</span>
        </td>
        <td><span class="rate two"><span></span><span></span><span></span> </span></td>
      </tr>
      
      <tr class="read">
        <td>Norwegian Wood</td>
        <td>Haruki Murakami</td>
        <td>Slice of Life</td>
        <td>
          <span class="status">Read</span>
        </td>
        <td><span class="rate three"><span></span><span></span><span></span> </span></td>
    </tr>
      </tr>
      

    </tbody>

  </table>

</body>

</html>

/* file: styles.css */
.table{
  width:100%;
  border: none;
  border-collapse:collapse;
}

span{
  display:inline-block;
}

.title{
  width:35%;
}

.author, .category, .status, .rate{
  width:16.25%;
}

thead{
  background-image:linear-gradient(45deg, #add8e6, #87cefa)
}

th{
  height:40px;
}

td{
  height:30px;
}

tr[class="read"]{
  background-image:linear-gradient(45deg, limegreen, green);
}

tr[class="to-read"]{
  background-image:linear-gradient(45deg, #fff8dc, #a9a9a9 )
}

tr[class="in-progress"]{
background-image:linear-gradient(to right, #ffd700, #daa520)
}


tr[class="read"] span[class="status"]{
  background-image:linear-gradient(45deg, limegreen, green);
  border:2px solid #000;
  width:90%;
  padding:0px 2px;
  margin:auto;
  text-align:center;
  border-radius:50px;
}

tr[class="to-read"] span[class="status"]{
  background-image:linear-gradient(45deg, #fff8dc, #a9a9a9);
  border:2px solid #000;
  width:90%;
  padding:0px 2px;
  margin:auto;
  text-align:center;
  border-radius:50px;
}

tr[class="in-progress"] span[class="status"]{
  background-image:linear-gradient(to right, #ffd700, #daa520) ;
  border:2px solid #000;
  width:100%;
  padding:0px 2px;
  margin:auto;
  text-align:center;
  border-radius:50px;
}

span[class="status"], span[class^="rate"]{
  height:50%;
  width:50%;
  padding:3px;
}

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

span[class~="one"] > span:nth-child(1) {
  background-image:linear-gradient(to right, orange,red);
}

span[class~="two"] > span:nth-child(-n+2) {
  background-image:linear-gradient(to right, orange,red);
}


span[class~="three"] > span {
  background-image:linear-gradient(to right, orange,red);
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) 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

You don’t need add a rate class to “Rate” column.
That confuses the test!
By the way, you have two <tr/> closing tags which are unecessary

1 Like
3

Each .rate element: contains 3 empty

Do not nest and repeat tags

Do not have extra spaces or line breaks between .rate child (freeCodeCamp is sometimes strict)

1 Like