Irvin10
September 21, 2026, 11:21am
1
Error is “Each .rate element should contain three empty span elements.” I followed the instruction other answer is 1st .rate class no 3 span buts still correct is it a bug
<!-- 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 class="rate one"></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 class="rate three"></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></span><span></span><span></span>
<span class="rate one">
</span><span></span><span></span><span></span>
</span>
</td>
</tr>
</tbody>
</body>
</html>
/* file: styles.css */
User Agent is: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/153.0.0.0 Mobile Safari/537.36
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
Irvin10
September 21, 2026, 5:43pm
3
Error is"each .rate element should contain 3 empty span" sorry I don’t know how to link code can’t copy paste my phone 1st edition realme sorry again n thank you
<!-- 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 class="rate one">
<span></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 class="rate two">
<span></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 class="rate three">
<span></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></span><span></span><span></span>
<span class="rate one">
<span></span>
<span></span>
<span></span>
</span>
</span>
</td>
</tr>
</tbody>
</body>
</html>
/* file: styles.css */
User Agent is: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/153.0.0.0 Mobile Safari/537.36
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
September 21, 2026, 5:45pm
4
I went ahead and combined your posts for you. In the future, just reply to the original thread to add further updates.
dhess
September 21, 2026, 5:57pm
5
Hi @Irvin10 ,
It looks like you are misinterpreting the instructions in these user stories:
td elements of the Rate column should contain a span element with the class of rate wrapping three empty span elements..rate elements placed inside .read rows should have an additional class with the value of either one, two, or three, depending on the personal rate. This value should come after rate.
For 6, you have the td with a span element that has a class of rate with three nested empty span elements:
But for 7, all you are asked to do is add an additional class (one, two or three) in .read rows to the existing span with a class of rate. Remember, we can have more than one class as a value in the class attribute. They are separated by spaces.
There is no need to add additional span elements, as you’ve done here:
Happy coding
Irvin10
September 21, 2026, 6:13pm
6
But ILM said <span class=“rate three” is empty so I assumed to put 3 span on .rate one and .rate two
ILM
September 21, 2026, 6:19pm
7
I pointed out why it fails, it was up to you figuring out what was the correct way to fix it. dhess is giving you much more details