Build a Book Inventory App - Build a Book Inventory App

HTML-CSS
1

Tell us what’s happening:

I did each and every task but my test not passing, please guide me to complete this project.

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>book1</td>
        <td>aut1</td>
        <td>horror</td>
        <td><span class="status">Read</span></td>
        <td><span class="rate">
          <span class="one"></span>
          <span class="one"></span>
          <span class="one"></span>
          </span>
        </td>
      </tr>
      <tr class="to-read">
        <td>book2</td>
        <td>aut2</td>
        <td>comedy</td>
        <td><span class="status">To Read</span></td>
        <td><span class="rate">
          <span class="two"></span>
          <span class="two"></span>
          <span class="two"></span>
          </span>
        </td>
      </tr>
      <tr class="in-progress">
        <td>book3</td>
        <td>aut3</td>
        <td>romance</td>
        <td><span class="status">In Progress</span></td>
        <td><span class="rate">
          <span class="three"></span>
          <span class="three"></span>
          <span class="three"></span>
          </span>
        </td>
      </tr>
  </table>
</body>

</html>

/* file: styles.css */
.read {
  background-image: linear-gradient(to right, pink, lightblue);
}

.to-read {
  background-image: linear-gradient(to right, yellow, lightblue);
}

.in-progress {
  background-image: linear-gradient(to right, purple, lightblue);
  color: white;
}

span {
  display: inline-block;
}

tr[class="to-read"] span[class="status"] {
  border: 1px solid red;
  background-image: linear-gradient(to right, orange, lightblue);;
}

tr[class="read"] span[class="status"] {
  border: 1px solid red;
  background-image: linear-gradient(to right, red, blue);
  color: white;
}

tr[class="in-progress"] span[class="status"] {
  border: 1px solid red;
  background-image: linear-gradient(to right, teal, lightblue);
}

span[class="rate"], span[class="status"] {
  height: 1em;
  width: 5em;
  padding: 5px;
}

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

span[class="one"]:first-child {
  background-image: linear-gradient(to right, yellow, orange);
}

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

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

Your browser information:

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

Challenge Information:

Build a Book Inventory App - Build a Book Inventory App

2

Including an image too-

Screenshot 2025-04-11 150558
Screenshot 2025-04-11 150558552×326 36.3 KB

3

let’s go one by one

which part of your code do you think passes this?

  1. .rate elements placed inside .read rows should have an additional class after the rate class with the value of either one , two , or three , depending on the personal rate.
4 
<tr class="read">
        <td>book1</td>
        <td>aut1</td>
        <td>horror</td>
        <td><span class="status">Read</span></td>
        <td><span class="rate">
          <span class="one"></span>
          <span class="one"></span>
          <span class="one"></span>
          </span>
        </td>
      </tr>
5

I do not see it
" .rate elements […] should have an additional class after the rate class"

6 
<td><span class="rate one">
7

now that you do this you need to update your css too

8

Now I am able to see so many mistakes, I did the task but it asks for something else, I feel i can pass 6 more tests rn, I will get back to you after doing them.

9

19 to 24 passed :grin:
my selection method was not according to test.

10

once you moved the one class from an element to an other, many of your selectors would fail to select

11

yes, I am working on it now

12

This has became so confusing , everything feels broken now.

13

is that a request for help? I have no idea what you are doing if you don’t share

14

Yes I needed help.

But now I have thought to erase all confusing part and do it again.

Right now I have an online live class related to my school, starting in 15 mins so I will be back after 2.5-3 hrs.

15

test 35 says-
You should use an attribute selector to target the span elements with the class of status and the span elements with the class value starting with rate and set their height , width , and padding properties

my code-

span[class="status"], span[class="rate"] {
  height: 2rem;
  width: 5rem;
  padding: 4px;
}

What is wrong here ?

16

that attribute selector only selects element specifically that use class="rate", you want to change that selector to select elements with a class attribute that starts with rate, it should be a topic of this module, so you may want to review the lectures if needed

18

I got refernce from discord then I revised it from mdn docs. And finished this project.
Language got confusing for me in this one.
Thank you very much :slight_smile:

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);
}