Task errors from 5 to 9. But the code seems to be correct as the headings are displayed on the previewning:
Task errors from 5 to 9. But the code seems to be correct as the headings are displayed on the preview
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Book Inventory</title>
</head>
<body class="bg-gray-50 min-h-screen p-8 font-sans">
<div class="max-w-6xl mx-auto">
<h1 class="text-4xl font-extrabold text-gray-800 mb-8 rounded-lg p-4 bg-white shadow-md">
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 Martian</td>
<td>Andy Weir</td>
<td>Sci-Fi</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>Project Hail Mary</td>
<td>Andy Weir</td>
<td>Sci-Fi</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>Atomic Habits</td>
<td>James Clear</td>
<td>Self-Help</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>Foundation</td>
<td>Isaac Asimov</td>
<td>Sci-Fi</td>
<td>
<span class="status">Read</span>
</td>
<td>
<span class="rate one">
<span></span>
<span></span>
<span></span>
</span>
</td>
</tr>
<tr class="read">
<td>Dune</td>
<td>Frank Herbert</td>
<td>Sci-Fi</td>
<td>
<span class="status">Read</span>
</td>
<td>
<span class="rate two">
<span></span>
<span></span>
<span></span>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
/* file: styles.css */
span {
display: inline-block;
}
tr[class="read"] {
background-image: linear-gradient(to right, #e6ffed, #ffffff);
color: #104e1f;
}
tr[class="to-read"] {
background-image: linear-gradient(to right, #e6f6ff, #ffffff);
color: #1f4f6e;
}
tr[class="in-progress"] {
background-image: linear-gradient(to right, #fff4e6, #ffffff);
color: #6e471f;
}
span[class="status"],
span[class^="rate"] {
height: 28px;
width: 120px;
padding: 4px 10px;
border-radius: 4px;
font-weight: 600;
}
span[class^="rate"] > span {
border: 1px solid #c7c7c7;
border-radius: 50%;
margin: 0 1px;
height: 10px;
width: 10px;
background-color: #f0f0f0;
transition: all 0.2s ease-in-out;
}
tr[class="to-read"] span[class="status"] {
border: 1px solid #3b82f6;
background-image: linear-gradient(to bottom, #bfdbfe, #e0f2fe);
color: #1e40af;
}
tr[class="read"] span[class="status"] {
border: 1px solid #10b981;
background-image: linear-gradient(to bottom, #d1fae5, #ecfdf5);
color: #065f46;
}
tr[class="in-progress"] span[class="status"] {
border: 1px solid #f97316;
background-image: linear-gradient(to bottom, #fed7aa, #ffedd5);
color: #9a3412;
}
span[class~="one"] > span:first-child {
background-image: linear-gradient(45deg, #fde047, #facc15);
border-color: #facc15;
}
span[class~="two"] > span:nth-child(-n+2) {
background-image: linear-gradient(45deg, #fde047, #facc15);
border-color: #facc15;
}
span[class~="three"] > span {
background-image: linear-gradient(45deg, #fde047, #facc15);
border-color: #facc15;
}
table {
border-collapse: separate;
border-spacing: 0;
width: 100%;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
border-radius: 0.75rem;
overflow: hidden;
}
th, td {
padding: 16px;
text-align: left;
border-bottom: 1px solid #e5e7eb;
}
thead {
background-color: #1f2937;
color: white;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
tbody tr:last-child td {
border-bottom: none;
}
tbody tr:hover {
opacity: 0.9;
transition: opacity 0.3s;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36 Edg/143.0.0.0
Challenge Information:
Build a Book Inventory App - Build a Book Inventory App
