Need help on Build a Bookstore Page - Step 16

HTML-CSS
1

Tell us what’s happening:

Im on the last step on building a bookstore page and it says that the code does not pass. Its says that your first button inside element with the class of btn-container should have an id attribute with the value of view-cart-btn.

Your code so far

<h1>XYZ Bookstore</h1>
<p>Browse our collection of amazing books!</p>
<div class="card-container">
  <div class="card" id="sally-adventure-book">
    <h2>Sally's SciFi Adventure</h2>
    <p>This is an epic story of Sally and her dog Rex as they navigate through other worlds.</p>
    <button class="btn">Buy Now</button>
  </div>
  <div class="card" id="dave-cooking-book">
    <h2>Dave's Cooking Adventure</h2>
    <p>This is the story of Dave as he learns to cook everything from pancakes to pasta, one recipe at a time.</p>
    <button class="btn">Buy Now</button>
  </div>
</div>

<!-- User Editable Region -->

<p>Review your selections and continue to checkout.</p>
<div class="btn-container">
 <div id="view-cart-btn"><button class="btn">View Cart</button>
 <div id="checkout-btn"><button class="btn">Checkout</button>
</div>

<!-- User Editable Region -->

Your browser information:

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

Challenge Information:

Build a Bookstore Page - Step 16

2

Hi there!

No need to add new divs, these ids are for the buttons

3

The test is failing because of two things in your last section:

  1. The id=“view-cart-btn” is on the div, but the instructions say it should be on the first button inside .btn-container.
  2. You’re also missing some closing tags for the inner elements.

Try changing that part to something like this:

Review your selections and continue to checkout.

View Cart Checkout

Now the first button inside .btn-container has the id=“view-cart-btn”, the second one has id=“checkout-btn”, and all the tags are properly closed — the test should pass after that.

Later, if you ever move from these practice projects to a real client site and need help with a full UI or front-end architecture, I’ve had a good experience working with a small dev team called Red Rocket Software (redrocket.software) — they were helpful when I got stuck on more advanced stuff.

4

I dont understand still

1 Like
5

Show your latest code, please

How to do:

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 (').

6 
<p>Review your selections and continue to checkout.</p>
<div class="btn-container">
 <div id="view-cart-btn"><button class="btn">View Cart</button>
 <div id="checkout-btn"><button class="btn">Checkout</button>
</div>
7

Think of id as making something a noun to have a special pronoun, and then think of class as a making something a noun be a noun with an adjective. Your pronoun use is given to an unexpected noun, that doesn’t line up to the adjective-noun it is directed for.

& you should always include closing tags to all markup elements that require them. A single closing tag such as </div> isn’t cross multiplied to all open `<div>` before it, only the nearest one that has been signaled to start open

8

Your original code:

<p>Review your selections and continue to checkout.</p>
<div class="btn-container">
 <div id="view-cart-btn"><button class="btn">View Cart</button>
 <div id="checkout-btn"><button class="btn">Checkout</button>
</div>

Your latest code:

<p>Review your selections and continue to checkout.</p>
<div class="btn-container">
 <div id="view-cart-btn"><button class="btn">View Cart</button>
 <div id="checkout-btn"><button class="btn">Checkout</button>
</div>

Why didn’t you change anything?

9

i still need some help

10

Do you have a question about something?

Revisit this first advice:

Here are some troubleshooting steps you can follow. Focus on one test at a time:

  1. Are there any errors or messages in the console?
  2. What is the requirement of the first failing test?
  3. Check the related User Story and ensure it’s followed precisely.
  4. What line of code implements this?
  5. What is the result of the code and does it match the requirement? (Write the value of a variable to the console at that point in the code if needed.)

If this does not help you solve the problem, please reply with answers to these questions.

11

i solved it now this is the solution:

removed
12

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge. How to Help Someone with Their Code Using the Socratic Method

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

1 Like