Build a Book Inventory App - Build a Book Inventory App

HTML-CSS
1

Tell us what’s happening:

Dear friends,

I hope this message finds you well.

I’m having trouble passing exercises 46 through 51, (Build a Book Inventory App) despite my code running fine. Could anyone lend a hand? For example, exercise 46 states: “You should have an attribute selector to target the first descendant of span elements that have the word ‘one’ as part of their class value.”

Thank you!

Your code so far

<!-- <!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="rate1">Rate</th>
    </tr>
    </thead>
    <tbody>
      <tr class="read">
        <td>The Three Musketeers</td>
        <td>Alexandre Dumas</td>
        <td>Historical Novel</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>The Plague</td>
        <td>Albert Camus</td>
        <td>	Philosofical Novel</td>
        <td><span class="status">To Read</span></td>
        <td><span class="rate"><span></span><span></span><span></span></span></td>      
      </tr>
      <tr class="read">
        <td>The Metamorphosis</td>
        <td>Franz Kafka</td>
        <td>Novella</td>
        <td><span class="status">Read</span></td>
        <td><span class="rate one"><span></span><span></span><span></span></span></td>       
      </tr>
      <tr class="read">
        <td>Dead Souls</td>
        <td>Nikolai Gogol</td>
        <td>Picaresque</td>
        <td><span class="status">Read</span></td>
        <td><span class="rate two"><span></span><span></span><span></span></span></td>       
      </tr>
      <tr class="in-progress">
        <td>Lord of the Flies</td>
        <td>William Golding</td>
        <td>Allegorical Novel</td>
        <td><span class="status">In Progress</span></td>
        <td><span class="rate"><span></span><span></span><span></span></span></td>       
      </tr> 
      </tr>
      <tr class="read">
        <td>Do Androids Dream of Electric Sheep?</td>
        <td>Philip K. Dick</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>        
    </tbody>
  </table>
  </body>

</html> -->


/* .table {
      width: 100%;
      border: none;
      border-collapse: collapse;
    }
    .title {
      width: 35%;
    }
    .author, .category, .status, .rate1 {
      width: 16.25%;
    }
    thead {
      background-image: linear-gradient(to top, rgb(115,211,249), rgb(182,232,252));
    }
    tr {
      height: 40px;
    } 
    tr[class="read"] {
      background-image: linear-gradient(to top, rgb(151,255,151), rgb(205,255,205));
    }
    tr[class="to-read"] {
      background-image: linear-gradient(to top, rgb(212,227,212), rgb(241,246,241));
    }
    tr[class="in-progress"] {
      background-image: linear-gradient(to top, rgb(255,221,153), rgb(255,238,203));
    }
    span {
    display: inline-block;
    }
    tr[class="to-read"] span[class="status"] {
    border: 1px solid rgb(230,19,0);
    background-image: linear-gradient(to top, rgb(255,23,2), rgb(255,126,114));
    margin: 5px;
    border-radius: 10px;
    text-align: center;    
    }
    tr[class="read"] span[class="status"] {
    border: 1px solid rgb(29,201,29);
    background-image: linear-gradient(to top, rgb(37,224,37), rgb(138,232,138));
    margin: 5px;
    border-radius: 10px;
    text-align: center;
    }
    tr[class="in-progress"] span[class="status"] {
    border: 1px solid rgb(194,133,10);
    background-image: linear-gradient(to top, rgb(242,166,14), rgb(248,207,124));
    margin: 5px;
    border-radius: 10px;
    text-align: center;    
    }
    span[class="status"], span[class^="rate"] {
    height: 80%;
    width: 80%;
    padding: 5px;
    }
    span[class^="rate"] > span {
    border: 1px solid gray;
    border-radius: 10px;
    margin: 2px;
    height: 10px;
    width: 20%;
    background-color: whitesmoke;
    }
    span[class*="one"] > :nth-child(1) {
    background-image: linear-gradient(to top, rgb(255,214,7), rgb(255,227,90));
    } 
    span[class*="two"] > :nth-child(-n+2){
      background-image: linear-gradient(to top, rgb(255,214,7), rgb(255,227,90));
    } 
    span[class*="three"] > :nth-child(-n+3){  
      background-image: linear-gradient(to top, rgb(255,214,7), rgb(255,227,90));  
    }  */

Your browser information:

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

Challenge Information:

Build a Book Inventory App - Build a Book Inventory App

1 Like
2

Hi there!

You haven’t added your html and css code files above.

3

I edited my post. thanks.

4

A floating pseudo selector isn’t perform any action for styles. It should attached to a css selector.

selector:pseudoSlector  {
// Correct way to use pseudo selector 
}
5

how can I change my code in this way?

6

first thing first, the selector *= would accept also class someone, but it should accept only one. It needs to select classes with the word one in

and don’t use >, it’s not accepted by the version of the tests live (it will be fixed in a future deployment)

this should make you pass some more.

Then, the easiest to pass is for three, do not use pseudoselectors, you need to style all three spans.

After that I can guide you to the version that the tests want for one and two if needed

1 Like
7

@hasanzaib1389 hey it’s great you want to help! but maybe you want to check if your suggestion works in passing the tests

1 Like
8

Thank you very much. This solution worked.

9

Thank you! I struggled so much fiddling with passing these same tests for the ratings. This solved my problem.