Build a Book Inventory App - Build a Book Inventory App

HTML-CSS
1

Tell us what’s happening:

PL GIVE THE CORRECT ERROR FREE CODING IN THE BOOK INVENTORY APP PL

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>The Alchemist</td>
        <td>Paulo Coelho</td>
        <td>Fiction</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>Clean Code</td>
        <td>Robert Martin</td>
        <td>Programming</td>
        <td><span class="status">To Read</span></td>
        <td><span class="rate one"><span></span><span></span><span></span></span></td>
      </tr>
      <tr class="in-progress">
        <td>Atomic Habits</td>
        <td>James Clear</td>
        <td>Self-help</td>
        <td><span class="status">In Progress</span></td>
        <td><span class="rate two"><span></span><span></span><span></span></span></td>
      </tr>
      <tr class="read">
        <td>Harry Potter</td>
        <td>J.K. Rowling</td>
        <td>Fantasy</td>
        <td><span class="status">Read</span></td>
        <td><span class="rate one"><span></span><span></span><span></span></span></td>
      </tr>
    </tbody>
  </table>
</body>
</html>


/* file: styles.css */
/* 1. Display all spans inline-block */
span {
  display: inline-block;
}

/* 2. Table row backgrounds using attribute selectors */
tr[class="read"] {
  background-image: linear-gradient(to right, #a8ff78, #78ffd6);
}

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

tr[class="in-progress"] {
  background-image: linear-gradient(to right, #89f7fe, #66a6ff);
}

/* 3. Status spans for different row classes */
tr[class="read"] span[class="status"] {
  border: 1px solid green;
  background-image: linear-gradient(to right, #b4ec51, #429321);
}

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

tr[class="in-progress"] span[class="status"] {
  border: 1px solid blue;
  background-image: linear-gradient(to right, #00c6ff, #0072ff);
}

/* 4. Rate span containers */
span[class^="rate"] {
  height: 20px;
  width: 60px;
  padding: 2px;
}

/* 5. Individual stars inside rate */
span[class^="rate"] > span {
  border: 1px solid #ccc;
  border-radius: 50%;
  margin: 2px;
  height: 15px;
  width: 15px;
  background-color: #eee;
}

/* 6. Rate one - fill first star */
span[class*="one"] > span:first-child {
  background-image: linear-gradient(to right, #ffefba, #ffffff);
}

/* 7. Rate two - fill first two stars */
span[class*="two"] > span:nth-child(-n+2) {
  background-image: linear-gradient(to right, #f7971e, #ffd200);
}

/* 8. Rate three - fill all three stars */
span[class*="three"] > span {
  background-image: linear-gradient(to right, #00c6ff, #0072ff);
}

Your browser information:

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

Challenge Information:

Build a Book Inventory App - Build a Book Inventory App

2

  • 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.

  • Failed: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.

  • Failed: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.

  • Failed: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.

  • Passed:41. You should have an attribute selector to target the span elements which are direct children of span elements with the class value starting with rate.

  • Passed:42. You should use an attribute selector to target the span elements which are direct children of span elements with the class value starting with rate and set their border property.

  • Passed:43. You should use an attribute selector to target the span elements which are direct children of span elements with the class value starting with rate and set their border-radius property.

  • Passed:44. You should use an attribute selector to target the span elements which are direct children of span elements with the class value starting with rate and set their margin property.

  • Passed:45. You should use an attribute selector to target the span elements which are direct children of span elements with the class value starting with rate and set their height property.

  • Passed:46. You should use an attribute selector to target the span elements which are direct children of span elements with the class value starting with rate and set their width property.

  • Passed:47. You should use an attribute selector to target the span elements which are direct children of span elements with the class value starting with rate and set their background-color property.

  • Failed:48. You should have an attribute selector to target the first descendant of span elements that have the word one as a part of their class value.

  • Failed:49. You should use an attribute selector to target the first descendant of span elements that have the word one as a part of their class value and set its background-image property to use a linear-gradient.

  • Failed:50. You should have an attribute selector to target the first two descendants of span elements that have the word two as a part of their class value.

  • Failed:51. You should use an attribute selector to target the first two descendants of span elements that have the word two as a part of their class value and set their background-image property to use a linear-gradient.

  • Failed: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.

  • Failed: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.

THIS ERRORS COME

3

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.

4 
<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>The Alchemist</td>

        <td>Paulo Coelho</td>

        <td>Fiction</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>Clean Code</td>

        <td>Robert Martin</td>

        <td>Programming</td>

        <td><span class="status">To Read</span></td>

        <td><span class="rate one"><span></span><span></span><span></span></span></td>

      </tr>

      <tr class="in-progress">

        <td>Atomic Habits</td>

        <td>James Clear</td>

        <td>Self-help</td>

        <td><span class="status">In Progress</span></td>

        <td><span class="rate two"><span></span><span></span><span></span></span></td>

      </tr>

      <tr class="read">

        <td>Harry Potter</td>

        <td>J.K. Rowling</td>

        <td>Fantasy</td>

        <td><span class="status">Read</span></td>

        <td><span class="rate one"><span></span><span></span><span></span></span></td>

      </tr>

    </tbody>

  </table>

</body>

</html>

span {

  display: inline-block;

}



/\* 2. Table row backgrounds using attribute selectors \*/

tr\[class="read"\] {

  background-image: linear-gradient(to right, #a8ff78, #78ffd6);

}



tr\[class="to-read"\] {

  background-image: linear-gradient(to right, #ffafbd, #ffc3a0);

}



tr\[class="in-progress"\] {

  background-image: linear-gradient(to right, #89f7fe, #66a6ff);

}



/\* 3. Status spans for different row classes \*/

tr\[class="read"\] span\[class="status"\] {

  border: 1px solid green;

  background-image: linear-gradient(to right, #b4ec51, #429321);

}



tr\[class="to-read"\] span\[class="status"\] {

  border: 1px solid orange;

  background-image: linear-gradient(to right, #ff9966, #ff5e62);

}



tr\[class="in-progress"\] span\[class="status"\] {

  border: 1px solid blue;

  background-image: linear-gradient(to right, #00c6ff, #0072ff);

}



/\* 4. Rate span containers \*/

span\[class^="rate"\] {

  height: 20px;

  width: 60px;

  padding: 2px;

}



/\* 5. Individual stars inside rate \*/

span\[class^="rate"\] > span {

  border: 1px solid #ccc;

  border-radius: 50%;

  margin: 2px;

  height: 15px;

  width: 15px;

  background-color: #eee;

}



/\* 6. Rate one - fill first star \*/

span\[class\*="one"\] > span:first-child {

  background-image: linear-gradient(to right, #ffefba, #ffffff);

}



/\* 7. Rate two - fill first two stars \*/

span\[class\*="two"\] > span:nth-child(-n+2) {

  background-image: linear-gradient(to right, #f7971e, #ffd200);

}



/\* 8. Rate three - fill all three stars \*/

span\[class\*="three"\] > span {

  background-image: linear-gradient(to right, #00c6ff, #0072ff);

}
5

I’ve edited your post to improve the readability of the code. When you enter a code block into a forum post, please precede it with three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add the backticks.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

6

Ok, let’s start with the first failed test

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 .

Related user story

  1. 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.

which is the part of your code that satisfy this?