Build a Book Inventory App - Build a Book Inventory App

HTML-CSS
1

Tell us what’s happening:

Tell us what’s happening: Dear friends, I hope this message finds you well. I’m having trouble passing exercises 48 through 53, (Build a Book Inventory App) despite my code running fine. Could anyone lend a hand?

Your code so far

<!-- file: index<!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 class="head">
      <th>Title</th>
      <th>Author</th>
      <th>Category</th>
      <th>Status</th>
      <th>Rate</th>
    </thead>
    <tbody>
    <tr class="read">
      <td>The Three Musketeers</td>
      <td> Alexanders 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>Philosophical 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 one">
        <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>Sience Fiction</td>
      <td><span class="status">Read</span></td>
      <td><span class="rate two">
        <span></span>
        <span></span>
        <span></span>
        </span></td>
    </tr>
    </tbody>
  </table>

</body>

</html>.html -->


/* file: styles.css */
*{
  box-sizing:borde-box;
}


table{
  width:100%;
  height:350px;border-collapse:collapse; text-align:center;
  font-size:17px;
  }

 thead{
 background-image:linear-gradient(rgb(0,210,255,0.6));
}

tr[class="read"]{
  background-image:linear-gradient(rgb(0,255,0,0.5));
}

tr[class="to-read"] {
  background-image:linear-gradient(rgb(220,220,200,0.4));
}

 tr[class="in-progress"] {
  background-image:linear-gradient(rgb(250,200,0,0.6));
}

span{
  display:inline-block;
}

tr[class="to-read"]
span[class="status"]{
  border:1px solid  red;
  background-image:linear-gradient(rgb(255,0,0,0.6));
  padding:5px;
  width:80px;
  border-radius:20px;
}

tr[class="read"]
span[class="status"]{
  border:1px solid rgb(30, 213, 30);
  background-image:linear-gradient(rgb(30,213,30));
  padding:5px;
  width:80px;
  border-radius:20px;
}

tr[class="in-progress"]
span[class="status"]{
  border:1px solid  orange;
  background-image:linear-gradient(rgb(255,165,0,0.7));
  padding:5px;
  width:80px;
  height:20px;
  border-radius:20px;
}

span[class="status"],span[class^="rate"] {
  height:20px;
  width:30px;
  padding:2px;
}

span[class^="rate"] >span{
  border:1px solid rgb(179, 175, 175);
  width:15px;
  height:15px;
  border-radius:100%;
  padding:2px;
  margin:1px;
  background-color:white;
}

span[class*="three"]span {
  background-image: linear-gradient(45deg, rgba(255, 165, 0, 0.5), white);
}

span[class*="one"] span: first-child {
  background-image: linear-gradient(45deg, rgba(255, 165, 0, 0.5), white);
}

span[class*="two"] span: nth-child(1),
span[class*="two"] span: nth-child(2) {
  background-image: linear-gradient(45deg, rgba(255, 165, 0, 0.5), white);
}

Your browser information:

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

Challenge Information:

Build a Book Inventory App - Build a Book Inventory App

2

Please refer to this resource for help with your attribute selectors. There are many examples.

MDN: Attribute Selectors