Tell us what’s happening:
Hello
I’m getting errors for the code of rate one and three but it’s accepting the rate two.
After checking the forum I tried changing the sign before the space for * but still get the same error.
I’m not seeing any difference between the code for one, two and three, can pls someone help me here.
Thanks
Your code so far
<!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>
<th class="header">Title</th>
<th class="header">Author</th>
<th class="header">Category</th>
<th class="header">Status</th>
<th class="header">Rate</th>
</thead>
<tbody>
<tr class="read">
<td><span class="title">Title</span></td>
<td><span class="author">Author</span></td>
<td><span class="category">Category</span></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><span class="title">Title</span></td>
<td><span class="author">Author</span></td>
<td><span class="category">Category</span></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><span class="title">Title</span></td>
<td><span class="author">Author</span></td>
<td><span class="category">Category</span></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><span class="title">Title</span></td>
<td><span class="author">Author</span></td>
<td><span class="category">Category</span></td>
<td><span class="status">Read</span></td>
<td><span class="rate three"><span></span><span></span><span></span></span></td>
</tr>
<tr class="read">
<td><span class="title">Title</span></td>
<td><span class="author">Author</span></td>
<td><span class="category">Category</span></td>
<td><span class="status">Read</span></td>
<td><span class="rate two"><span></span><span></span><span></span></span></td>
</tr>
<tr class="read">
<td><span class="title">Title</span></td>
<td><span class="author">Author</span></td>
<td><span class="category">Category</span></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><span class="title">Title</span></td>
<td><span class="author">Author</span></td>
<td><span class="category">Category</span></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><span class="title">Title</span></td>
<td><span class="author">Author</span></td>
<td><span class="category">Category</span></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>
html {
box-sizing: border-box;
}
h1 {
display: flex;
justify-content: center;
margin: 0 auto;
padding: 1.5rem 1.25rem;
gap: 1rem;
}
table {
width: 1px;
border: 2px solid black;
border-collapse: collapse;
}
th, tr, td {
border: 2px solid black;
}
tr[class="read"] {
background-image: linear-gradient(to bottom,green,lightgreen);
}
tr[class="to-read"] {
background-image: linear-gradient(to bottom,gold,khaki);
}
tr[class="in-progress"] {
background-image: linear-gradient(to bottom,salmon,orange);
}
thead {
width: 1px;
}
span {
display: inline-block;
width: 10rem;
text-align: center;
vertical-align: middle;
}
span[class="status"], span[class^="rate"] {
width: 80%;
height: 80%;
padding: 5px;
}
td [class="status"] {
border: 1px solid black;
border-radius: 50px / 40px;
margin: 5px;
padding: 5px 0 0 0;
height: 25px;
width: 100px;
}
td [class^=rate] {
display: block;
heigth: 15px;
width: 150px;
paddding: 5px;
}
span[class^="rate"]>span {
border: 2px solid black;
border-radius: 15px;
margin: 3px;
height: 15px;
width: 15px;
background-color: white;
}
span[class~="one"]>span:nth-of-type(1) {
background-image: linear-gradient(to bottom,springgreen,lime);
}
span[class~="two"]>span:nth-of-type(-n+2) {
background-image: linear-gradient(to bottom,springgreen,lime);
}
span[class~="three"]>span:nth-of-type(-n+3) {
background-image: linear-gradient(to bottom,springgreen,lime);
}
tr[class="read"] span[class="status"] {
background-image: radial-gradient(circle, forestgreen, chartreuse);
border: 2px dotted black;
}
tr[class="to-read"] span[class="status"] {
background-image: radial-gradient(circle,tan,wheat,moccasin);
border: 2px dotted black;
}
tr[class="in-progress"] span[class="status"] {
background-image: radial-gradient(circle,chocolate,peru);
border: 2px dotted black;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/145.0.0.0 Safari/537.36
Challenge Information:
Build a Book Inventory App - Build a Book Inventory App
