Build a Book Inventory App - Build a Book Inventory App

christinewho2 · May 18, 2026, 2:37pm

Tell us what’s happening:

I don’t understand why step 16 doesn’t pass when I did what it asked as far as I know.

console message and also the step : Each .status element should have the text Read, To Read, or In Progress, depending on the class of its row.

I haven’t started the css yet because I just checked and there is the = and stuff everywhere.

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 class="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>Gamer V.1</td>
<td>Pierre-Yves Vileneuve</td>
<td>Novel</td>
<td><span class="status">Read</span></td>
<td><span class="rate one"><span></span><span></span><span></span></span></td>
</tr>
<tr class="to-read">
<td>Gamer v.11</td>
<td>Pierre-Yves Vileneuve</td>
<td>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="in-progress">
<td>fang</td>
<td>john doe</td>
<td>action dark</td>
<td><span class="status">In Progess</span></td>
<td><span class="rate"><span></span><span></span><span></span></span></td>
</tr>
</tbody></table>
</body>

</html>

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Android 16; Mobile; rv:150.0) Gecko/150.0 Firefox/150.0

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

dhess · May 18, 2026, 3:11pm

Hi @christinewho2,

The test is failing because you have a typo in the innerText.

Happy coding!

christinewho2 · May 18, 2026, 5:09pm

ooh! Oops . How did I miss that

dhess · May 18, 2026, 5:17pm

I didn’t exactly see it right away either!

christinewho2 · May 18, 2026, 5:44pm

now I’m stuck with my css

gonna add it to the main post.

guess I have to add it separately but that’s hard to do on mobile without creating another post.

christinewho2 · May 18, 2026, 5:48pm

You should use an attribute selector to target the span elements with the class of status that are descendants of tr elements with the class of to-read and set their background-image property.

It seems like on mobile we don’t have access to the embed thing if we reply. I know unrelated. And if someone reply you can’t edit your post.

tr[class="read"] {background-image: linear-gradient(to right, rgba(0, 0, 250, 100), rgba(50, 125, 125, 70), rgba(150, 250, 150, 50));}

tr[class="to-read"] {background-image: linear-gradient(red, yellow, orange);}

tr[class="in-progress"] {background-image: linear-gradient(lightblue, pink, white);}
span {display: inline-block;}

tr[class="to-read"] span[class="status"] {border: 2px solid lightgrey;
background-image: linear-gradient(blue, navy, lightblue,);}

dhess · May 18, 2026, 5:53pm

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

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

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

christinewho2 · May 19, 2026, 1:28pm

I’m currently on mobile how did you miss that information. So I can’t do what you asked.
because code doesn’t save between platforms.

christinewho2 · May 19, 2026, 3:50pm

I’m still waiting I’m stuck. Should I just make a new thread? Sorry for my impatience but I won’t continue until I get some help. And when I look stuff up it doesn’t come up with something understandable for me.

dhess · May 19, 2026, 4:07pm

Do not create a new topic. Your CSS code is not complete. Do you have a specific question about your code?

christinewho2 · May 19, 2026, 4:10pm

I won’t completcomplete it because steps 30 doesn’t past and I’m not the only one that has been having that problem
it’s 28. and 29 not 30.

ILM · May 19, 2026, 4:16pm

Can you post your full code? it’s difficult to debug without seeing it

christinewho2 · May 19, 2026, 4:24pm

It’s hard to do only mobile. For that it would be making a new thread. or waiting after dîner.
plus my html is still there same but fixed the typo.

ILM · May 19, 2026, 4:28pm

instead of cretating a new thread, copy the post and put it in this thread

ILM · May 19, 2026, 4:29pm

test 28 and 29 are not failing, I see failing all from 30 onward, so please post your updated code

christinewho2 · May 19, 2026, 5:53pm

here’s my update code but my css is not complete yet.

<!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>Title</th>
<th>Author</th>
<th>Category</th>
<th>Status</th>
<th>Rate</th></tr></thead>
<tbody>
<tr class="read">
<td>Gamer V.1</td>
<td>Pierre-Yves Vileneuve</td>
<td>Novel</td>
<td><span class="status">Read</span></td>
<td><span class="rate one"><span></span><span></span><span></span></span></td>
</tr>
<tr class="to-read">
<td>Gamer v.11</td>
<td>Pierre-Yves Vileneuve</td>
<td>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="in-progress">
<td>fang</td>
<td>john doe</td>
<td>action dark</td>
<td><span class="status">In Progress</span></td>
<td><span class="rate"><span></span><span></span><span></span></span></td>
</tr>
</tbody></table>
</body>

</html>

----css under here


tr[class="read"] {background-image: linear-gradient(to right, rgba(0, 0, 250, 100), rgba(50, 125, 125, 70), rgba(150, 250, 150, 50));}

tr[class="to-read"] {background-image: linear-gradient(red, yellow, orange);}

tr[class="in-progress"] {background-image: linear-gradient(lightblue, pink, white);}

span {display: inline-block;}

tr[class="to-read"] span

[class="status"] {border: 2px solid lightgrey;

background-image: linear-gradient(blue, navy, lightblue,);}

tr[class="read"] span[class="status"] {border: 2px solid lightgrey;

background-image: linear-gradient( blue, navy, lightblue,);}

tr[class="in-progress"] span[class="status"] {border: 2px solid lightgrey;

background-image: linear-gradient( blue, navy, lightblue,);}

This one is really hard, but it’s normal.

ILM · May 19, 2026, 6:08pm

which line would it be for

You should have an attribute selector to target the span elements with the class of status that are descendants of tr elements with the class of to-read .

was it this?

you are not targeting span with that class here

christinewho2 · May 19, 2026, 6:09pm

the code is weird because it ask for span with status when I rearrange it it’s fine but now when I copy paste it.

ILM · May 19, 2026, 6:10pm

you see how you have it on two lines? that means [class="status"] descendant of span

christinewho2 · May 19, 2026, 6:11pm

yes realised that now but now it’s taking it’s time to check.

Topic		Replies	Views
Build a Book Inventory App - Build a Book Inventory App HTML-CSS	47	1516	November 13, 2025
Build a book inventory HTML-CSS	37	171	January 13, 2026
Build a Book Inventory App - Build a Book Inventory App HTML-CSS	5	210	December 16, 2025
Build a Book Inventory App - Build a Book Inventory App HTML-CSS	6	94	March 10, 2026
Build a Book Inventory App - Build a Book Inventory App HTML-CSS	14	107	March 27, 2026

Build a Book Inventory App - Build a Book Inventory App

Tell us what’s happening:

Your code so far

Your browser information:

Challenge Information:

Related topics