Build a Book Inventory App - Build a Book Inventory App

HTML-CSS
1

Tell us what’s happening:

Build a Book Inventory App CSS LAB

Please tell me why my code isn’t being accepted. Visually and functionally it seems to satisfy all of the user stories.

I will include the HTML, CSS, and error messages with this query. Thank you. - Samuel

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>
      <th>Title</th>
      <th>Author</th>
      <th>Category</th>
      <th>Status</th>
      <th>Rate</th>
    </thead>
  
    <tbody>
<tr class="read">
<td>
The Rebel
</td>
<td>Albert Camus</td>
<td>Non-fiction</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>
The Rebel
</td>
<td>Albert Camus</td>
<td>Non-fiction</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>
The Brothers Karamazov
</td>
<td>Fyodor Dostoevsky</td>
<td>Classics</td>
<td><span class="status">To Read</span></td>
<td>
  <span class="rate two">
    <span></span>
    <span></span>
    <span></span>
    </span>
    </td></tr>

<tr class="in-progress">
<td>
Last Night A DJ Saved My Life
</td>
<td>Scott Fielder</td>
<td>History</td>
<td><span class="status">In Progress</span></td>
<td>
  <span class="rate three">
    <span></span>
    <span></span>
    <span></span>
    </span>
    </td></tr>

    </tbody>

</body>

</html>

/* file: styles.css */
body{width:90%;
font-family:Times;
display:block;}

thead{
  height:4em;
  
}
td{
  padding:10px;
  min-width:200px;
  margin:
}

.status{
  width:50%;
  text-align:center;
}

table{
   
   background-color:#ffffe0;
  padding:20px 50px;
}

tr[class=read] {
background-image:linear-gradient(to top, transparent .01em, rgba(63, 253, 63, 50%) .9em, transparent);
}

tr[class=to-read] {
background-image:linear-gradient(to top, transparent .01em, rgba(83, 253, 220, 75%) .9em, transparent);
}

tr[class=in-progress] {
background-image:linear-gradient(to top, transparent .01em, rgba(255, 255,0, 100%) .9em, transparent);
}

span{
  display:inline-block;
}

span[class=status], span[class^=rate]{
  height:1em;
  width:6.9em;
  padding:5px;
}

/*status buttons*/

tr[class=in-progress] span[class=status]{  background-image: linear-gradient(to top, transparent .001em, rgba(244, 200,1, 100%) .9em, transparent);
  border: 4px solid rgba(244, 200,1, 100%);
  border-radius:20%;
padding: 4px 0;
}

tr[class=read] span[class=status]{  background-image: linear-gradient(to top, transparent .001em, rgba(0, 255,1, 100%) .9em, transparent);
  border: 4px solid rgba(70, 255,0, 100%);
  border-radius:20%;
padding: 4px 0;
}

tr[class="to-read"] span[class=status]{  background-image: linear-gradient(to top, transparent .001em, rgba(100, 255,200, 100%) .9em, transparent);
  border: 4px solid rgba(0, 220,220, 100%);
  border-radius:20%;
padding: 4px 0;
}

/*end status buttons*/

/*rating bubbles*/
span[class~="rate"] span{
  width:20px;
  height:20px;
  border:2px solid rgb(186, 176, 176);
  border-radius:50%;
  margin:5px;
  background-color:white
}

span[class~="three"] span{
  width:20px;
  height:20px;
  border:2px solid rgb(186, 176, 176);
  border-radius:50%;
  margin:5px;
  background-image: linear-gradient(to top,white, gold .9em, white);
}

span[class~="two"] :first-child, span[class~="two"] :nth-child(2) {
  width:20px;
  height:20px;
  border:2px solid rgb(186, 176, 176);
  border-radius:50%;
  margin:5px;
  background-image: linear-gradient(to top,white, gold .9em, white);
}

span[class~="one"] :first-child{

  width:20px;
  height:20px;
  border:2px solid rgb(186, 176, 176);
  border-radius:50%;
  margin:5px;
  background-image: linear-gradient(to top,white, gold .9em, white);

}

thead{
  background-color: magenta;
  color:
}

21. You should have an attribute selector to target rows that have the class of read.
22. You should use an attribute selector to target rows that have the class of read and set their background-image property to a linear gradient of your choice.
23. You should have an attribute selector to target rows that have the class of to-read.
24. You should use an attribute selector to target rows that have the class of to-read and set their background-image property to a linear gradient of your choice.
25. You should have an attribute selector to target rows that have the class of in-progress.
26. You should use an attribute selector to target rows that have the class of in-progress and set their background-image property to a linear gradient of your choice.
27. You should set the display property of each span element to inline-block.
28. You should have an attribute selector to target the span elements with the class of status that are descendants of tr elements with the class of to-read.
29. You should use an attribute selector to target the span elements with the class of status that are descendants of tr elements with the class of to-read and set their border property.
30. You should use an attribute selector to target the span elements with the class of status that are descendants of tr elements with the class of to-read and set their background-image property.
31. You should have an attribute selector to target the span elements with the class of status that are descendants of tr elements with the class of read.
32. You should use an attribute selector to target the span elements with the class of status that are descendants of tr elements with the class of read and set their border property.
33. You should use an attribute selector to target the span elements with the class of status that are descendants of tr elements with the class of read and set their background-image property.
34. You should have an attribute selector to target the span elements with the class of status that are descendants of tr elements with the class of in-progress.
35. You should use an attribute selector to target the span elements with the class of status that are descendants of tr elements with the class of in-progress and set their border property.
36. You should use an attribute selector to target the span elements with the class of status that are descendants of tr elements with the class of in-progress and set their background-image property.
37. You should have an attribute selector to target the span elements with the class of status and the span elements with the class value starting with rate.
38. You should use an attribute selector to target the span elements with the class of status and the span elements with the class value starting with rate and set their height property.
39. You should use an attribute selector to target the span elements with the class of status and the span elements with the class value starting with rate and set their width property.
40. You should use an attribute selector to target the span elements with the class of status and the span elements with the class value starting with rate and set their padding property.
41. You should have an attribute selector to target the span elements which are direct children of span elements with the class value starting with rate.
42. You should use an attribute selector to target the span elements which are direct children of span elements with the class value starting with rate and set their border property.
43. You should use an attribute selector to target the span elements which are direct children of span elements with the class value starting with rate and set their border-radius property.
44. You should use an attribute selector to target the span elements which are direct children of span elements with the class value starting with rate and set their margin property.
45. You should use an attribute selector to target the span elements which are direct children of span elements with the class value starting with rate and set their height property.
46. You should use an attribute selector to target the span elements which are direct children of span elements with the class value starting with rate and set their width property.
47. You should use an attribute selector to target the span elements which are direct children of span elements with the class value starting with rate and set their background-color property.
48. You should have an attribute selector to target the first descendant of span elements that have the word one as a part of their class value.
49. You should use an attribute selector to target the first descendant of span elements that have the word one as a part of their class value and set its background-image property to use a linear-gradient.
50. You should have an attribute selector to target the first two descendants of span elements that have the word two as a part of their class value.
51. You should use an attribute selector to target the first two descendants of span elements that have the word two as a part of their class value and set their background-image property to use a linear-gradient.
52. You should have an attribute selector to target the span elements that are descendants of span elements that have the word three as a part of their class value.
53. You should use an attribute selector to target the span elements that are descendants of span elements that have the word three as a part of their class value and set their background-image property to use a linear-gradient.

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) 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

Welcome to the forum @sprague.sj !

Do you see a duplicate line of code in your head element?

Is this selector complete?

You can refer to this reference for help with your attribute selectors:

MDN: Attribute Selectors

3

Welcome to the forum Samuel!

Beside what mentioned above, you have syntax errors with attrribute selecting.

// instead of
element[attribute=value] { /* code */ }

// please use ""
element[attribute="value"] { /* code */ }
4

The quotes didn’t affect it with or without. Thanks for the response though.

5

Thanks I fixed those and made progress, but I’m still not passing when it comes to these user stories:

41. You should have an attribute selector to target the span elements which are direct children of span elements with the class value starting with rate.
42. You should use an attribute selector to target the span elements which are direct children of span elements with the class value starting with rate and set their border property.
43. You should use an attribute selector to target the span elements which are direct children of span elements with the class value starting with rate and set their border-radius property.
44. You should use an attribute selector to target the span elements which are direct children of span elements with the class value starting with rate and set their margin property.
45. You should use an attribute selector to target the span elements which are direct children of span elements with the class value starting with rate and set their height property.
46. You should use an attribute selector to target the span elements which are direct children of span elements with the class value starting with rate and set their width property.
47. You should use an attribute selector to target the span elements which are direct children of span elements with the class value starting with rate and set their background-color property.
6

Yes. That’s why I included a resource link to help you with your attribute selectors. It shows very clear examples.

If you need further help, please post your updated code.