Tell us what’s happening:
Dear friends,
I hope this message finds you well.
I’m having trouble passing exercises 46 through 51, (Build a Book Inventory App) despite my code running fine. Could anyone lend a hand? For example, exercise 46 states: “You should have an attribute selector to target the first descendant of span elements that have the word ‘one’ as part of their class value.”
Thank you!
Your code so far
<!-- file: index.html -->
/* file: styles.css */
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36
Challenge Information:
Build a Book Inventory App - Build a Book Inventory App
https://www.freecodecamp.org/learn/full-stack-developer/lab-book-inventory-app/build-a-book-inventory-app
<!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 Three Musketeers</td>
<td>Alexandre Dumas</td>
<td>Historical Novel</td>
<td><span class="status">Read</span></td>
<td><span class="rate three">
<span class="one"></span>
<span class="two"></span>
<span class="three"></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">
<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 one">
<span class="one"></span>
<span class="two"></span>
<span class="three"></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 two">
<span class="one"></span>
<span class="two"></span>
<span class="three"></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>
</tr>
<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></td>
<td><span class="rate two">
<span></span>
<span></span>
<span></span>
</span></td>
</tr>
</tbody>
</table>
</body>
</html>
tr[class="read"]{
background-image: linear-gradient(to right, #ccffcc, #99ff99);
}
tr[class="to-read"]{
background-image: linear-gradient(to right, #eeeeee, #dddddd);
}
tr[class="in-progress"]{
background-image: linear-gradient(to right, #ffe5b4, #ffcc99);
}
span{
display: inline-block;
}
tr[class="read"] span[class="status"]{
background-image: linear-gradient(0deg,rgba(212, 193, 193, 1) 0%, rgba(230, 18, 18, 1) 100%);
border: 1px solid #d4c1c1;
border-radius: 5px;
}
tr[class="to-read"] span[class="status"]{
background-image: linear-gradient(0deg,rgba(34, 195, 96, 1) 0%, rgba(78, 193, 86, 1) 23%, rgba(97, 192, 81, 1) 100%, rgba(253, 187, 45, 1) 100%);
border: 1px solid #22c360;
border-radius: 5px;
}
tr[class="in-progress"] span[class="status"]{
background-image: linear-gradient(0deg,rgba(209, 125, 65, 1) 100%, rgba(235, 235, 235, 1) 100%);
border: 1px solid #d17d41;
border-radius: 5px;
}
span[class="status"], span[class^="rate"]{
height: 80%;
width: 80%;
padding: 5px;
}
span[class^="rate"] > span{
border: 1px solid gray;
border-radius: 10px;
margin: 2px;
height: 10px;
width: 10px;
background-color: whitesmoke;
}
span[class~="one"] span {
background-image: linear-gradient(to top, rgb(255,214,7), rgb(255,227,90));
}
span[class~="two"] span{
background-image: linear-gradient(to top, rgb(255,214,7), rgb(255,227,90));
}
span[class~="three"] span{
background-image: linear-gradient(to top, rgb(255,214,7), rgb(255,227,90));
}
