Build a Book Inventory App - Build a Book Inventory App

HTML-CSS
1

Tell us what’s happening:

Hello everyone, I have tried this multiple times, but I always fail to complete it successfully. Please help me.

Your code so far

<!-- 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>
        <tr>
            <th>Title</th>
            <th>Author</th>
            <th>Category</th>
            <th>Status</th>
            <th>Rate</th>
        </tr>
        <tr class="read one">
            <td>Book 1</td>
            <td>Author 1</td>
            <td>Fiction</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>Book 2</td>
            <td>Author 2</td>
            <td>Non-Fiction</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>Book 3</td>
            <td>Author 3</td>
            <td>Biography</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 two">
            <td>Book 4</td>
            <td>Author 4</td>
            <td>History</td>
            <td><span class="status">Read</span></td>
            <td><span class="rate two">
                <span></span>
                <span></span>
                <span></span>
            </span></td>
        </tr>
    </table>
</body>
</body>
</html>

/* file: styles.css */
body {
    font-family: Arial, sans-serif;
}

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

th {
    background-color: #f0f0f0;
}

/* Attribute selectors for rows with specific classes */
tr[class~="read"] {
    background-image: linear-gradient(to right, #c9e4ca, #f7f7f7);
}

tr[class~="to-read"] {
    background-image: linear-gradient(to right, #ffd7be, #f7f7f7);
}

tr[class~="in-progress"] {
    background-image: linear-gradient(to right, #ffe6cc, #f7f7f7);
}

span {
    display: inline-block;
}

.status {
    height: 20px;
    width: 80px;
    padding: 4px;
}

tr.to-read .status {
    border: 1px solid #ccc;
    background-image: linear-gradient(to right, #ffd7be, #fff);
}

tr.read .status {
    border: 1px solid #ccc;
    background-image: linear-gradient(to right, #c9e4ca, #fff);
}

tr.in-progress .status {
    border: 1px solid #ccc;
    background-image: linear-gradient(to right, #ffe6cc, #fff);
}

span.status, span.rate {
    height: 20px;
    width: 80px;
    padding: 4px;
}

span.rate {
    width: 60px;
}

span.rate > span {
    border: 1px solid #ddd;
    border-radius: 50%;
    margin: 2px;
    height: 10px;
    width: 10px;
    background-color: #fff;
}

span.rate.one > span:first-child {
    background-image: linear-gradient(to bottom, #66cc00, #33cc00);
}

span.rate.two > span:nth-child(-n+2) {
    background-image: linear-gradient(to bottom, #66cc00, #33cc00);
}

span.rate.three > span {
    background-image: linear-gradient(to bottom, #66cc00, #33cc00);
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36

Challenge Information:

Build a Book Inventory App - Build a Book Inventory App

2

Its hard to say what is going on here because you are only passing #25 with the CSS. I would start out with the first one #19 and work your way through the list. Good luck

3

Don’t use the “contains” ~ for your attribute selectors (MDN).

You are missing a bunch of attribute selectors. If the requirement is to use an attribute selector, you have to do that even if you can select the elements using a different selector. Some of them are double attribute selectors. For example:

  1. You should have an attribute selector to target the span elements with the class of status that are descendants of tr elements with the class of to-read .

That means a selector like this parent[class="someClass"] descendant[class="someClass"]

It is a weird way to write the selectors, but I assume it is just to practice using attribute selectors.