Build a Book Inventory App - Build a Book Inventory App

HTML-CSS
1

Tell us what’s happening:

Line 50 of the book inventory app,I have tried every thing guys

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">
        <td>Legends of Tomorrow</td>
        <td>Kingsley Briyze</td>
        <td>Adventure</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>Cry Baby</td>
        <td>Grace Ma</td>
        <td>Motivational</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>Love & Pain</td>
        <td>Jane Max</td>
        <td>Mistery</td>
        <td><span class="status">In Progress</span></td>
        <td><span class="rate">
          <span></span>
          <span></span>
          <span></span></span></td>
      </tr>
      <tr class="to-read">
        <td>Rich fellow</td>
        <td>James Ricky</td>
        <td>Inspirational</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>Kings in paris</td>
        <td>M. Brian</td>
        <td>Romance</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>

/* file: styles.css */
* {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
}
body {
  width: 100vw;
  font-family: sans-serif, Arial;
  font-size: 12px;
  background-color: #0a0a24;
  color: white;
}
h1 {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin-top: 1em;
}
table {
  width: 500px;
  border: 2px solid #fff;
  margin: 0 auto;
}
tr[class="read"] {
  background-image: linear-gradient(#095534, #674352, brown);
}
tr[class="to-read"] {
  background-image: linear-gradient(#171756, #2a2a89, red);
}
tr[class="in-progress"] {
  background-image: linear-gradient(#949467, #645783);
}
span {
  display: inline-block;
}
tr[class="to-read"] span[class="status"] {
  border: 2px solid #fff;
  background-image: linear-gradient(#fff, #000, #5234ff);
}
tr[class="read"] span[class="status"] {
  border: 1px solid #000;
  background-image: linear-gradient(#fff, #ffffff, #0a0a24);
}
tr[class="in-progress"] span[class="status"] {
  border: 3px solid #fff;
  background-image: linear-gradient(red, blue, green);
}
span[class="status"], span[class^="rate"] {
  height: 40px;
  width: 50px;
  padding: 10px;
}
span[class^="rate"] > span {
  border: 2px solid #000;
  border-radius: 5px;
  margin: 5px;
  height: 4px;
  width: 10px;
  background-color: inherit;
}
span[class~="one"] :nth-child(1) {
  background-image: linear-gradient(#555000, #444666, #03e3e5);
}
span[class~="two"] :nth-child(1),span[class~="two"] :nth-child(2){
  background-image:linear-gradient(#232323 30%, #345667 30%);
  }
span[class*="three"] > span
  {
  background-image:linear-gradient(#232323 10%, #345667 30%);
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Mobile Safari/537.36

Challenge Information:

Build a Book Inventory App - Build a Book Inventory App
https://www.freecodecamp.org/learn/full-stack-developer/lab-book-inventory-app/build-a-book-inventory-app

2

What is the error message you are getting? What is the lines of code do you think satisfy that requirement? Where did you get stuck debugging?

3

Line 50 of the inventry

4

Please answer all of the questions I asked

5

This is line number 50?

6

Do you mean that Test #50 is failing?

7

100% serious, I answered the first two questions I asked you, and it lead immediately to a fix.

8

Hi @Apluz003

Here is code for test 50:

I can see an extra closing curly brace.

In the editor, a red squiggly line appears under the brace.

Do you still require help with this step?

Happy coding

9

This won’t work,it need a “~” for the code to run,did it last minute,thank you again for reaching out

1 Like
10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.