Build a Book Inventory App

HTML-CSS
1

Hi, I’m struggling to identify where I’m going wrong in my code. According to the tests I’m failing on Steps 11 (Each table row except the heading row should have either the class read, to-read, or in-progress) and Step 14 (Each .status element should have the text Read, To Read, or In Progress, depending on the class of its row.) I’ve been over my code lots of times and can’t see the error and I’ve compared it to the code other people have posted on the forum and the syntax looks the same?

Book Inventory

Book Inventory

<tr class="heading">
  <th>Title</th>
  <th>Author</th>
  <th>Category</th>
  <th>Status</th>
  <th>Rate</th>
</tr>

<tr class="read">
  <td>The Hotel Avocado</td>
  <td>Bob Mortimer</td>
  <td>Fiction</td>
  <td><span class="status">Read</span></td>
  <td><span class="rate two">
      <span></span>
      <span></span>
      <span></span>
    </span></td>
</tr>
<tr class="to-read">
  <td>The Golden Spruce</td>
  <td>John Valliant</td>
  <td>Biography and Autobiography</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>The Wild Silence</td>
  <td>Raynor Winn</td>
  <td>Non-Fiction</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>The Courage to be Disliked</td>
  <td>Ichiro Kishimi</td>
  <td>Psychology</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 Mountain in the Sea</td>
  <td>Ray Nayler</td>
  <td>Fiction</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>Tripped</td>
  <td>Norman Ohler</td>
  <td>History</td>
  <td><span class="status">To Read</span></td>
  <td><span class="rate">
      <span></span>
      <span></span>
      <span></span>
    </span></td>
</tr>
2

Please post all of your HTML. Thank you.

5

Please send the CSS code too please.

6

I have, I don’t know why but the forum software keeps cutting the top and bottom off it, I can see it if i try to edit it though

7

When you enter a code block into a forum post, please precede it with three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add the backticks.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like
8

If you have a question or need some help about a specific challenge as it relates to your written code for that challenge, please click the Get Help > Ask for Help button, which is displayed on the challenge after you have attempted to submit your solution at least three times.

image
image493×196 5.09 KB

The Ask for Help button will create a new topic with all the code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

9 
<!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 class="table">
    
    <tr class="heading">
      <th>Title</th>
      <th>Author</th>
      <th>Category</th>
      <th>Status</th>
      <th>Rate</th>
    </tr>
    
    <tr class="read">
      <td>The Hotel Avocado</td>
      <td>Bob Mortimer</td>
      <td>Fiction</td>
      <td><span class="status">Read</span></td>
      <td><span class="rate two">
          <span></span>
          <span></span>
          <span></span>
        </span></td>
    </tr>
    <tr class="to-read">
      <td>The Golden Spruce</td>
      <td>John Valliant</td>
      <td>Biography and Autobiography</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>The Wild Silence</td>
      <td>Raynor Winn</td>
      <td>Non-Fiction</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>The Courage to be Disliked</td>
      <td>Ichiro Kishimi</td>
      <td>Psychology</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 Mountain in the Sea</td>
      <td>Ray Nayler</td>
      <td>Fiction</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>Tripped</td>
      <td>Norman Ohler</td>
      <td>History</td>
      <td><span class="status">To Read</span></td>
      <td><span class="rate">
          <span></span>
          <span></span>
          <span></span>
        </span></td>
    </tr>
  </table>
</body>

</html>
10

The CSS is not complete yet, I’m still working on that, I’m just trying to understand whats wrong with the earlier steps first.

h1 {
  text-align: center;
}
table {
  border: 2px solid black;
}
.heading {
  background-color: skyblue;
  font-size:1.25em;
}
.three {
background-image: linear-gradient(to right, #1F1C2C 0%, #928DAB  51%, #1F1C2C  100%)}

.three {
            margin: 10px;
            padding: 15px 45px;
            text-align: center;
            text-transform: uppercase;
            transition: 0.5s;
            background-size: 200% auto;
            color: white;            
            box-shadow: 0 0 20px #eee;
            border-radius: 10px;
            display: block;
          }

          .three:hover {
            background-position: right center; /* change the direction of the change here */
            color: #fff;
            text-decoration: none;
          }
         
}

tr[class="read"] { background-image:linear-gradient(to top rgb(9, 255, 29) 30%,#13b76d 20%);
}

tr[class="to-read"] { background-image:linear-gradient(to top rgb(255, 175, 183) 30%,#ed4c1b 20%);
}type or paste code here
11

This is great thanks, still new to the forum, sorry!

1 Like
12

you never shared the link to the challenge, could you do that please?

13
14

do you think this may be causing test 11 to fail? and maybe 14?

your CSS has some issues, I see a .three selector twice for example

there are two closing } consecutively

you may want to use a CSS validatorto help find all the syntax issues

note: while duplicate tests would work even if not recommeded, our tests don’t manage with them

and for .three you are not asked to use a class selector anyway

15

Thanks that was it, I missed the ‘=’, I can’t believe I didn’t see that I’ve been over that code a dozen times checking for something like that! Yeah the CSS i’d imported some gradient button code I’d found elsewhere, just to have a look and explore with it really. Is there an particular CSS/HTML validator software for beginners that you would recommend?

16

I don’t have one for beginners to suggest

HTML validator: Ready to check - Nu Html Checker
CSS validator: The W3C CSS Validation Service

1 Like