Build a Book Inventory App - Build a Book Inventory App

HTML-CSS
1

Tell us what’s happening:

hello how are you doing? please i need help for this tasks

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 class="title">
      <th>Title</th>
       <th>Author</th>
        <th>Category</th>
         <th>Status</th>
          <th>Rate</th>
    </tr>
    
  <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">
        <span></span>
        <span></span>
        <span></span>
        </span></td>
      
    </tr>
    <tr class="to-read">
      <td>The Plague</td>
      <td>Albert Camus</td>
      <td>Philosophical Novel</td>
      <td><span class="status">To Read</span></td>
      <td><span class="rate"class="rate three">
         <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" 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" 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>
    </td>
     <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>
       <span></span>
        <span></span>
        <span></span>
      </td>
      <td><span class="rate" class="rate two">
        <span></span>
        <span></span>
        <span></span>
        </span></td>
      
    </tr>
  </tbody>
</thead>
</table>

</body>

</html>

/* file: styles.css */  
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
}
h1{
  text-align:center;
}


tr[class='title'] {
  background-image: linear-gradient(0deg,white, blue)}
  tr[class='to-read'] {
  background-image: linear-gradient(0deg,white, brown)
  }


tr[class='read'] {
  background-image: linear-gradient(0deg,white, green)}
  tr[class='to-read'] {
  background-image: linear-gradient(0deg,white, brown)
  }
  
tr[class='in-progress'] {
  background-image: linear-gradient(0deg,white, orange)
}
span {
  display: inline-block;
}
tr[class="to-read"] span[class="status"] {
  border: 2px solid red;
  background-image: linear-gradient(90deg, red);
  border-radius: 20px;
}
tr[class="read"] span[class="status"] {
  border: 2px solid green;
  background-image: linear-gradient(90deg, green);
  border-radius: 20px;
}
tr[class="in-progress"] span[class="status"] {
 border: 2px solid orange;
 background-image: linear-gradient(0deg,orange);
 border-radius: 20px;
 }
 span[class="status"] span[class="rate"] {
  height: 45px;
  width: 50px;
  padding: 5px 10px;
 }
 span[class^="rate"] > span {
    border: 1px solid #ccc;
    border-radius: 50%;
    margin: 0 2px;
    height: 15px;
    width: 15px;
    background-color: #eee;
}
span[class~="one"] > span:nth-child(1) {
    background-image: linear-gradient(to right, #ffcc00, #ffdb4d);
}
span[class~="two"] > span:nth-child(1),
span[class~="two"] > span:nth-child(2) {
    background-image: linear-gradient(to right, #ffcc00, #ffdb4d);
}
span[class~="three"] > :nth-child(1),
span[class~="three"] > :nth-child(2),
span[class~="three"] > :nth-child(3) {
    background-image: linear-gradient(to right, #ffcc00, #ffdb4d);
}

Your browser information:

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

Challenge Information:

Build a Book Inventory App - Build a Book Inventory App

2

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

1 Like
3 
20. .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.
37. You should have an attribute selector to target the span elements with the class of status and the span elements with the class value starting with rate.
38. 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 property.
39. 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 width property.
40. 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 padding property.
52. You should have an attribute selector to target the span elements that are descendants of span elements that have the word three as a part of their class value.
53. You should use an attribute selector to target the span elements that are descendants of span elements that have the word three as a part of their class value and set their background-image property to use a linear-gradient.
4

Here are some debugging steps you can follow. Focus on one test at a time:

  1. Are there any errors or messages in the console?
  2. What is the requirement of the failing test?
  3. Check the related User Story and ensure it’s followed precisely.
  4. What line of code implements this?
  5. What is the result of the code and does it match the requirement?

If this does not help you solve the problem, please reply with answers to these questions.

5

please use your own words to describe the issue, so that we can better help you

6

image
image942×359 33.2 KB

7

this is the result of the code

8

What question do you have about that?

9

all theses i don’t know how to resolov that

10
  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.
  2. You should have an attribute selector to target the span elements with the class of status and the span elements with the class value starting with rate.
  3. 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 property.
  4. 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 width property.
  5. 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 padding property.
  6. You should have an attribute selector to target the span elements that are descendants of span elements that have the word three as a part of their class value.
  7. You should use an attribute selector to target the span elements that are descendants of span elements that have the word three as a part of their class value and set their background-image property to use a linear-gradient.
11

let’s start with the first one,

answer to these questions please:

  1. Are there any errors or messages in the console?
  2. What is the requirement of the failing test?
  3. Check the related User Story and ensure it’s followed precisely.
  4. What line of code implements this?
  5. What is the result of the code and does it match the requirement?
12

i dont really get what you means sir

13

let’s take this failing test

can you say in your own words what is the requirement?

what is the user story that describe this requirement?

what part of your code is implementing this?

14

You only need one class attribute per element since a class attribute can contain more than one class.

Here is a good reference with examples of the different attribute selectors:

MDN: Attribute Selectors