Build a Book Inventory App - Build a Book Inventory App

Curriculum Help
1

Tell us what’s happening:

Error is" Each .rate element should contain three empty span elements."
I followed the instruction but still wrong help

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>
    </thead>
    <tbody>
      <tr class="read">
        <td></td>
        <td></td>
        <td></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></td>
        <td></td>
        <td></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></td>
        <td></td>
        <td></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></td>
        <td></td>
        <td></td>
        <td><span class="status">Read</span></td>
        <td>
          <span class="rate">
            <span class="rate one"></span>
            <span class="rate two"></span>
            <span class="rate three"></span>
          </span>
        </td>
      </tr>
      
    </tbody>

</body>

</html>

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/151.0.0.0 Mobile 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

Hi @Irvin10 ,

Were you asked to add a class attribute to the span elements inside the .rate element?

Happy coding

3

Yes error is "Each .rate element should contain three empty span elements. " class=“rate one” ,class=“rate two” and class=“rate three” is correct

4

Are you sure about that?

Did you try removing the class attributes inside those span elements to see if Test #19 still fails? You may be misinterpreting where .one, .two, and .three classes should be applied.

Happy coding

5

It’s required it says.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. Which I passed. . I tried the one you mention. I also tried adding 3 span to 3 span. Additional class says rate space additional class so I write .rate one, .rate two and .rate three respectively.

6

(https://www.freecodecamp.org/learn/responsive-web-design-v9/lab-book-inventory-app/build-a-book-inventory-app) I tried what you said still error

7

Update(https://www.freecodecamp.org/learn/responsive-web-design-v9/lab-book-inventory-app/build-a-book-inventory-app) tried applying class="one, class=“two” and class=“three” to two .read that have .rate. but same still error. I didn’t pass it.

8

please share your update code

There are two ways you can format your code to make it easier to read and test:

  1. After you copy/paste your code into the editor, select it by dragging your cursor over it then click the (</>) button in the toolbar to automatically wrap your code in backticks. (You can click on the animated demo image below to enlarge it.)

1356×380 401 KB

  1. Manually add three backticks on a new line above your code and on a new line after your code. Note that a backtick is NOT the same as a single quote('). To find the backtick key on your keyboard, see this post.

To see changes to your post as you make them, you can click the (M+) button on the toolbar to bring up the rich text editor:

image
image482×117 7.55 KB

9

Tell us what’s happening:

Error is .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.

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>
    </thead>
    <tbody>
      <tr class="read">
        <td></td>
        <td></td>
        <td></td>
        <td><span class="status">Read</span></td>
        <td>
          <span class="rate">
            <span class="one"></span>
            <span class="two"></span>
            <span class="three"></span>
          </span>
        </td>
      </tr>
      <tr class="to-read">
        <td></td>
        <td></td>
        <td></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></td>
        <td></td>
        <td></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></td>
        <td></td>
        <td></td>
        <td><span class="status">Read</span></td>
        <td>
          <span class="rate">
            <span class="one"></span>
            <span class="two"></span>
            <span class="three"></span>
          </span>
        </td>
      </tr>
      
    </tbody>

</body>

</html>

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/151.0.0.0 Mobile 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

10

I can’t copy no matter how hard I try. Old phone 1st edition realmi model

11

Hi @Irvin10

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

These one’s don’t.

Happy coding

12

Hi @Irvin10

I went ahead and combined your posts for you. In the future, just reply to the original thread to add further updates.

Happy coding