Build a Book Inventory App - Build a Book Inventory App

HTML-CSS
1

Tell us what’s happening:

I do not understand request n46. I have tried 3 different versions of code but I can’t get it right. Could someone please explain what is being asked? Thank you.

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>
    <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></span>
                    <span></span>
                    <span></span>
                </span>
            </td>
        </tr>
        <tr class="to-read">
            <td>The Plague</td>
            <td>Albert Camus</td>
            <td>Philosofical 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 two">
                    <span></span>
                    <span></span>
                    <span></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></span>
                    <span></span>
                    <span></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 one">
                    <span></span>
                    <span></span>
                    <span></span>
                </span>
            </td>
        </tr>
    </tbody>
</table>
</body>

</html>`


* {
    box-sizing: border-box;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    margin: 0;
    padding: 0;
}
body {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 60px;
    background-color: #15152f;
    color: black;
    align-items: center;
}

h1 {
    text-align: center;
    margin-top: 4rem;
    color: white;
}

table {
    width: 80%;
    border-collapse: collapse;
    font-size: 12px;
    margin-bottom: 40px;
}

td {
    text-align: center;
}

thead tr {
    background-image: linear-gradient(white, lightgray);
    color: black;
    text-align: center;
}

tr {
    height: 30px;
}

tr[class="read"] {
    background-image: linear-gradient(#60a0ff, #6a94e7);
}

tr[class="to-read"] {
    background-image: linear-gradient(#ff6060, #d46464);
}

tr[class="in-progress"] {
    background-image: linear-gradient(#f7ff60, #d2d464);
}

span {
    display: inline-block;
}

tr[class="to-read"] span[class="status"] {
    padding: 0px 5px;
    width: 85%;
    border: 1px solid red;
    border-radius: 10px;
    background-image: linear-gradient(#f47676, #ff2c2c);
}

tr[class="read"] span[class="status"] {
    padding: 0px 5px;
    width: 85%;
    border: 1px solid #0095ff;
    border-radius: 10px;
    background-image: linear-gradient(#76adf4, #2c96ff);
}

tr[class="in-progress"] span[class="status"] {
    padding: 0px 5px;
    width: 85%;
    border: 1px solid rgb(225, 225, 6);
    border-radius: 10px;
    background-image: linear-gradient(#fffb90, #fff700);
}

span[class="status"],
span[class^="rate"] {
    width: auto;
    padding: 10px;
    height: auto;
}

span[class^="rate"] > span {
    border: 1px solid gray;
    border-radius: 100%;
    margin: 0px;
    height: 10px;
    width: 10px;
    background-color: lightgray;
}

span[class*="one"] *:first-child {
    
}

Your browser information:

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

2

can you give the link to the project please?

3
4

this would target even class “none”, not only class “one”
you may want to review the symbols

5

Ok, I understand that. So would you say the solution lies in the symbol? Is the rest correct?

6

try to find the correct symbol, and find out

1 Like