Tell us what’s happening:
Please help on below code
- You should have an h1 element with the text Book Inventory.
Passed:2. You should have only one h1 element.
Passed:3. You should have a table element.
Passed:4. You should have one thead element and one tbody element inside table.
Passed:5. Inside the thead there should be one tr with 5 th elements.
Passed:6. Your first column should have the text Title as the heading.
Passed:7. Your second column should have the text Author as the heading.
Passed:8. Your third column
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Book Inventory</title>
<style>
/* ===== General ===== */
body {
font-family: Arial, sans-serif;
padding: 40px;
background: #f5f7fa;
}
h1 {
text-align: center;
}
/* ===== Table ===== */
table {
width: 100%;
border-collapse: collapse;
background: white;
}
th, td {
padding: 10px;
border: 1px solid #ccc;
text-align: left;
}
/* ===== Row Gradients ===== */
tr[class="read"] {
background-image: linear-gradient(to right, #d4edda, #ffffff);
}
tr[class="to-read"] {
background-image: linear-gradient(to right, #fff3cd, #ffffff);
}
tr[class="in-progress"] {
background-image: linear-gradient(to right, #cce5ff, #ffffff);
}
/* ===== Spans inline-block ===== */
span {
display: inline-block;
}
/* ===== Status styling ===== */
tr[class="to-read"] span[class="status"] {
border: 1px solid orange;
background-image: linear-gradient(to right, #ffe0b2, #ffcc80);
}
tr[class="read"] span[class="status"] {
border: 1px solid green;
background-image: linear-gradient(to right, #a5d6a7, #81c784);
}
tr[class="in-progress"] span[class="status"] {
border: 1px solid blue;
background-image: linear-gradient(to right, #90caf9, #64b5f6);
}
/* ===== Status + Rate sizing ===== */
span[class="status"],
span[class^="rate"] {
height: 25px;
width: 100px;
padding: 4px;
text-align: center;
}
/* ===== Rate children styling ===== */
span[class^="rate"] > span {
border: 1px solid #888;
border-radius: 4px;
margin: 2px;
height: 15px;
width: 15px;
background-color: #eee;
}
/* ===== Rating fills (tests 48–53) ===== */
/* ONE → first child only */
span[class*="one"] > span:first-child {
background-image: linear-gradient(to top, green, lightgreen);
}
/* TWO → first two children */
span[class*="two"] > span:first-child,
span[class*="two"] > span:nth-child(2) {
background-image: linear-gradient(to top, blue, lightblue);
}
/* THREE → all children */
span[class*="three"] > span {
background-image: linear-gradient(to top, red, salmon);
}
</style>
</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 Alchemist</td>
<td>Paulo Coelho</td>
<td>Fiction</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>Atomic Habits</td>
<td>James Clear</td>
<td>Self-help</td>
<td><span class="status">To Read</span></td>
<td><span class="rate one"><span></span><span></span><span></span></span></td>
</tr>
<tr class="in-progress">
<td>Deep Work</td>
<td>Cal Newport</td>
<td>Productivity</td>
<td><span class="status">In Progress</span></td>
<td><span class="rate two"><span></span><span></span><span></span></span></td>
</tr>
<tr class="read">
<td>1984</td>
<td>George Orwell</td>
<td>Dystopian</td>
<td><span class="status">Read</span></td>
<td><span class="rate two"><span></span><span></span><span></span></span></td>
/* 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/145.0.0.0 Safari/537.36
Challenge Information:
Build a Book Inventory App - Build a Book Inventory App