Build a Book Inventory App - Build a Book Inventory App

HTML-CSS
1

Tell us what’s happening:

Hi everyone!

I don’t understand. Everything works except for n°4 “Your table element should have five columns”.
I’ve looked at other people’s code on the forum and I don’t get what I did wrong.

Thanks for the help!

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>
    <thead>
    <tr>
      <th>Title</th>
      <th>Author</th>
      <th>Category</th>
      <th>Status</th>
      <th>Rate</th>
    </tr>
  </thead>
    <tbody>
      <tr class="read">
        <th>1984</th>
        <td>George Orwell</td>
        <td>Dystopia</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">
        <th>Crime and Punishment</th>
        <td class="to-read">Fyody Dostoeievsky</td>
        <td>Society</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">
        <th>The Dark Tower (serie)</th>
        <td>Stephen King</td>
        <td>Fantasy</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">
        <th>The Phantom of the Opera</th>
        <td>Gaston Leroux</td>
        <td>Romantic Horror</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">
        <th>Hunger Games</th>
        <td>Suzanne Collins</td>
        <td>Dystopia</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>


/* file: styles.css */
* {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    box-sizing: border-box;
}

h1 {
    font-size: 26px;
    text-align: center;
}

table {
    margin: auto;
}

th {
    border: 2px solid gray;
}

tr[class="read"] {
    background-image: linear-gradient(to bottom, mediumseagreen, palegreen, mediumseagreen);
}

tr[class="to-read"] {
    background-image: linear-gradient(to bottom, firebrick, rgb(246, 119, 97), firebrick);
}

tr[class="in-progress"] {
    background-image: linear-gradient(to bottom, orange, rgb(248, 196, 83), orange);
}

span {
    display: inline-block;
    text-align: center;
}

tr[class="read"] span[class="status"] {
    border: 2px solid green;
    margin: 5px;
    padding: 5px;
    border-radius: 20px;
    background-image: linear-gradient(to bottom, white, greenyellow 35%);
}

tr[class="in-progress"] span[class="status"] {
    border: 2px solid orangered;
    margin: 5px;
    padding: 5px;
    border-radius: 20px;
    background-image: linear-gradient(to bottom, white, darkorange 35%);
}

tr[class="to-read"] span[class="status"] {
    border: 2px solid brown;
    margin: 5px;
    padding: 5px;
    border-radius: 20px;
    background-image: linear-gradient(to bottom, white, rgb(225, 12, 12) 35%);
}

span[class="status"], span[class^="rate"] {
    height: 30px;
    width: 120px;
    padding: 5px;
    border: 2px solid gray;
}

span[class^="rate"] > span {
    border: 2px solid rgb(22, 43, 64);
    border-radius: 100%;
    margin: auto;
    height: 20px;
    width: 20px;
    background-color: white;
}

span[class~="one"] > span:first-child {
    background-image: linear-gradient(to bottom, yellow 90%, white);
}

span[class~="two"] span:nth-child(-n +2) {
    background-image: linear-gradient(to bottom, yellow 90%, white);
}

span[class~="three"] > span {
    background-image: linear-gradient(to bottom, yellow 90%, white);
}

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

do not put the book titles in a th

1 Like
3

Yes!! Thank you so much! :grinning_face_with_smiling_eyes: