Build a Book Inventory App - Build a Book Inventory App

Programming HTML-CSS
1

Tell us what’s happening:

I am failing test cases 41-53 even though I followed all the instructions from the user stories. The table visually appears to follow all instructions, but for some reason it still says I’m doing something wrong. I’m ensuring that I’m using the proper syntax within the stylesheet, but I am unsure what I am doing wrong here.

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>Book 1</td>
        <td>Author 1</td>
        <td>Action</td>
        <td><span class="status">Read</span></td>
        <td>
          <span class="rate one">
            <span></span>
            <span></span>
            <span></span>
          </span>
        </td>
      </tr>
      <tr class="in-progress">
        <td>Book 2</td>
        <td>Author 2</td>
        <td>Comedy</td>
        <td><span class="status">In Progress</span></td>
        <td>
          <span class="rate two">
            <span></span>
            <span></span>
            <span></span>
          </span>
        </td>
      <tr class="to-read">
        <td>Book 3</td>
        <td>Author 3</td>
        <td>Horror</td>
        <td><span class="status">To Read</span></td>
        <td>
          <span class="rate three">
            <span></span>
            <span></span>
            <span></span>
          </span>
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

/* file: styles.css */
* {
  box-sizing: border-box;
}

tr[class="read"] {
  background-image: linear-gradient(to right, green, yellow);
}

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

tr[class="to-read"] {
  background-image: linear-gradient(to right, red, yellow);
}

span {
  display: inline-block;
}

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

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

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

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

span[class^="rate"] span {
  border: 1px solid black;
  border-radius: 50%;
  margin: .1rem;
  height: 20px;
  width: 20px;
  background-color: white;
}

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

span[class$="two"] span:first-child, span[class$="two"] span:nth-child(2) {
  background-image: linear-gradient(to right, blue, red);
}

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

Your browser information:

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

Challenge Information:

Build a Book Inventory App - Build a Book Inventory App

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-book-inventory-app/66a207974c806a19d6607073.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

hello!

is this selecting only the direct children spans of the .rate element or all the descendent spans?

using the $ sign here also selects any span with a class=”someone"

3

For the first one, doesn’t a space allow you to add another selector that will act as a descendent? There’s also nesting as an alternative, as I can’t think of a way to construct it as a single attribute selector.

As for the second one, I re-visited a webpage on W3Schools covering attribute selectors and replaced the “$” with a “~” symbol. So it’s span[class~="one"] span:first-child. This way instead of looking for the last class, it looks for a specific value of that class attribute.

4

yes, but keep in mind the difference between child (or direcet descendant) and descendant

5

yes it does, but imagine you had a structure like this → 

<span class="rate">
  <div>
    <span></span> //(span[class="rate"] span) will select this span
  </div>
</span>

but the inner span is not a direct child of .rate

here is something that might help you - CSS Child (>) Combinator

6

Ah, okay I went ahead and made that change. I saw someone had attempted that on a forum post when I was looking for what other people did, but someone mentioned that it was causing issues with the test cases so I initially avoided.

Now I’m only failing test cases 50 and 51:

span[class~="two"] span:first-child, span[class$="two"] span:nth-child(2) {

  background-image: linear-gradient(to right, blue, red);

}

I should be selecting the first and second children of the span element whose class contains “two”. I’m looking at MDN and it shows different ways to manipulate the nth-child css pseudo-selector with An+b formulas and the like. However, I can’t find anything that would allow me to simply set a range like (0-3) or maybe an alternative I could be doing here.

7

only this is left to be corrected.

8

I managed to simplify the selector and now it passes all the test cases. Thank you!