Build a Book Inventory App - Build a Book Inventory App

HTML-CSS
1

Tell us what’s happening:

Good day, i am stuck at step 19. i have tried changing it over and over again, it shows correct on preview but im not passing. i have changed it from tr.read {} to tr[class=“read”] and even change colors from rgba to green and light green.

  1. You should have an attribute selector to target rows that have the class of read.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="styles.css">
  <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 Girl With the Dragon Tatto</td>
        <td>Stieg Larsson</td>
        <td>Crime Thriller/Mystery</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>And Then There Were None</td>
        <td>Agatha Christie</td>
        <td>Classic Mystery</td>
        <td><span class="status">To Read</span></td>
        <td><span class="rate one"><span></span><span></span><span></span></span></td>
      </tr>

      <tr class="in-progress">
        <td>Gone Girl</td>
        <td>Gillian Flynn</td>
        <td>Psychological Thriller</td>
        <td><span class="status">In Progress</span></td>
        <td><span class="rate three"><span></span><span></span><span></span></span></td>
      </tr>

      <tr class="read">
        <td>The Cut Throat Trial</td>
        <td>S.J. Fleet</td>
        <td>Legal Thriller</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 */

tr[class="read"] {  
  background-image: linear-gradient(green, lightgreen);
}
tr[class="to-read"] {
  background-image: linear-gradient(to right, rgba(241, 196, 15, 0.1),rgba(241, 196, 15, 0.05));
}
tr[class="in-progress"] {
  background-image: linear-gradient(to right, rgba(52, 152, 219, 0.1), rgba(52, 152, 219, 0.05));
}
tr[class="to-read"] span[class="status"] {
  border: 2px solid #f39c12;
  Background-image: linear-gradient(135deg, #f39c12, #e67e22);
  
}
tr[class="read"] span[class="status"] {
  border: 2px solid #27ae60;
  background-image: linear-gradient(135deg, #2ecc71);

}
tr[class="in-progress"] span[class="status"] {
  border: 2px solid #3498db;
  background-image: linear-gradient(135deg, #3498db, #2980b9)
}
span[class="status"] {
  display: inline-block;
  height: 80px;
  width: 100px;
  padding: 0 auto;
}
span[class^="rate"] {
  display: inline-block;
  height: 80px;
  width: 100px;
  padding: 0 auto;
}
span[class^="rate"] > span {
  display: inline-block;
  border: 2px solid #ddd;
  border-radius: 50%;
  margin-right: 5px;
  height: 15px;
  width: 15px;
  background-color: #ddd; 
}
span[class*="one"] > span:first-child {
  background-image: linear-gradient(135deg, #f1c40f, #f39c12);
  border-color: #f39c12;
}

span[class*="two"] > span:nth-child(-n+2) {
  background-image: linear-gradient(135deg, #f1c40f, #f39c12);
  border-color: #f39c12;
}

span[class*="three"] > span {
background-image: linear-gradient(135deg, #f1c40f, #f39c12);
border-color: #f39c12; 

}

Your browser information:

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

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

looking at the error that appear in the browser console

dom-test-evaluator.js:2 SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules

double check how you are linking the css file, make sure you are doing it correctly

3

i did double checked, i even run the code through Visual Studio and it works.

4

so you do not think that having two link elements is an issue?

5

:laughing: :rofl: :joy: Thank you so much. I can’t believe I did that and missed it. Now I’m through to the next faults