Build a Book Inventory App - Build a Book Inventory App

HTML-CSS
1

Tell us what’s happening:

I have tried to pass Build a book Inventory App but i keep failing questions 46 to 51

Your code so far

<!-- file: index.html -->
<!-- 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="in-progress">
      <td>A Sky Behind the Storm</td>
      <td>Sabaa Tahir</td>
      <td>Fantasy</td>
      <td><span class="status">In Progress</span></td>
      <td><span class="rate"><span></span><span></span><span></span></span></td>
    </tr>
    <tr class="to-read">
      <td>The Bewitching</td>
      <td>Sylvia Moreno-Garcia</td>
      <td>Gothic</td>
      <td><span class="status">To Read</span></td>
      <td><span class="rate"><span></span><span></span><span></span></span></td>
    </tr>
    <tr class="in-progress">
      <td>Arise</td>
      <td>Elena Aguilar</td>
      <td>Non-Fiction</td>
      <td><span class="status">In Progress</span></td>
      <td><span class="rate"><span></span><span></span><span></span></span></td>
    </tr>
    <tr class="read">
      <td>Children of Time</td>
      <td>Adrian Tchaikovsky</td>
      <td>Science Fiction</td>
      <td><span class="status">Read</span></td>
      <td><span class="rate two"><span></span><span></span><span></span></span></td>
    </tr>
    <tr class="read">
      <td>Spinning Silver</td>
      <td>Naomi Novik</td>
      <td>Fantasy</td>
      <td><span class="status">Read</span></td>
      <td><span class="rate three"><span></span><span></span><span></span></span></td>
    </tr>
    </tbody>
   
  </table>

</body>

</html>

/* file: styles.css */
/* file: styles.css */
tr[class=read] {
  background-image: linear-gradient(to right, #d1cdcd, #535050);

}

tr[class=to-read] {
  background-image: linear-gradient(to right,#e7bebe, #ec7373 )
}

tr[class=in-progress] {
  background-image: linear-gradient(to right, #e1ebeb,#5c9393  )
}

span {
  display: inline-block;
  text-align: center;
}

tr[class="to-read"] span[class="status"] {
  border: 2px dotted black;
  background-image: radial-gradient( #cf5353 80%, #ec7373 20%);
  border-radius: 50% / 60%;
}

tr[class="read"] span[class="status"] {
  border: 2px solid black;
  background-image: radial-gradient(#ada7a7 80%, #ebe6e6 20%);
  border-radius: 50% / 60%;
}

tr[class="in-progress"] span[class="status"] {
  border: 2px dashed black;
  background-image: radial-gradient(#629191 80%, #e1ebeb 20%);
  border-radius: 50% / 60%;
  
}

span[class="status"], span[class^="rate"] {
  height: 2em;
  width: 5em;
  padding: 0.075em;
  line-height: 2em;
}

span[class^="rate"] > span {
  border: 1px solid white; 
  border-radius: 50%;
  height: 1em;
  width: 1em;
  margin: 1px;
  background-color: white;
  vertical-align: middle;
}

span[class*="one"] span:nth-child(1) {
  background-image: linear-gradient(to bottom, cyan, blue);
}

span[class*="two"] span:nth-child(-n+2) {
  background-image: linear-gradient(to bottom, cyan, blue);
}


span[class*="three"] span {
  background-image: linear-gradient(to bottom, cyan, blue);
}

Your browser information:

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

Challenge Information:

Build a Book Inventory App - Build a Book Inventory App

2

what are those tests about, which lines of your code satisfy them?

3

In CSS, an element can have multiple classes separated by spaces (e.g., class="rate two").

While *= looks for a substring anywhere, there is a different operator designed specifically for handling space-separated lists of words.

4

Which operator then?

5

Take a look at this MDN reference to learn more about attribute selector options:

Attribute selectors - CSS | MDN

But the syntax of this selector is not correct.

Your :nth-child(1) pseudo class should be applied directly to your attribute selector without repeating span.

1 Like
6

bjr moi aussi j’essaye de trouver le problemede l’application Build a Book Inventory mais je rate sans cesse les questions 46 à 51 en anglais la phrase

7

Please create your own topic using the “Ask for Help” button, which will auto-populate a post with your current code and the URL to the challenge. This button becomes visible after testing three times without success.

Thank you.

8

I already got the answers do you want an update?

9

That’s not necessary. In fact, please don’t post solutions, so others have a chance to figure it out themselves. Thank you.

1 Like