As a user I want to be able to see a detailed description of the products for sale.
AC
WHEN I click the see more button of any product card
THEN I should see a new, and larger card/container appear with more detailed information about the product
AND I should still have access to the add cart button
Development
inside the loop of beerCardBuilder( ) add an id to a parent
that contains both the 'seeMore' and 'addToCart' buttons
a counter function should be declared globally (i.e. ``let cartCounter = 1
beerCardBuilder( ) should use a temperate literal to increment over this counter function to add unique id's to the div that contains the buttons.
make a function called btnEvents ( )
inside of the function, select and add event listeners for each button for a click event, and call the function, 'expandView( )'
Create a function named expandView(e) that accepts an input of e
assign e.target.parentNode.id to a variable named eBtn, and create an empty string variable named bigCardString
create a loop that employs conditional statements to match the eBtn variable to the id of the parent div containing the buttons' of each item in 'beerArray', and when they are equal it creates a new bootstrap element with that object's properties in an expanded view (more properties such as abv, description, ingredients), and assign that to bigCardString
I am having a little trouble following this ticket. What are you displaying for the show more stuff? A modal? A collapse? Depending on which of those you pick that will change what goes in the development section
I am having a little trouble following this ticket. What are you displaying for the show more stuff? A modal? A collapse? Depending on which of those you pick that will change what goes in the development section
The show more button is supposed to bring up another larger area to display information, Basically another card. I'm going to go with a collapse. I don't know where it's going to go yet as i'm having a hard time visualizing the page, and don't know if I should have the information display directly below the original card, or below the rest of the cards.
Not sure if it is worded correctly, but I am adding a class to each see more button then adding a unique id to the parent id of both the buttons. The event listener will be for the classes of each both button(one for see more/one for add to cart), and get differentiated by the unique id of the parent div
User Story
As a user I want to be able to see a detailed description of the products for sale.
AC
WHEN I click the see more button of any product card THEN I should see a new, and larger card/container appear with more detailed information about the product AND I should still have access to the add cart button
Development
beerCardBuilder( )add an id to a parent``let cartCounter = 1beerCardBuilder( )should use a temperate literal to increment over this counter function to add unique id's to the div that contains the buttons.btnEvents ( )expandView(e)that accepts an input of eeBtn, and create an empty string variable namedbigCardStringeBtnvariable to the id of the parent div containing the buttons' of each item in 'beerArray', and when they are equal it creates a new bootstrap element with that object's properties in an expanded view (more properties such as abv, description, ingredients), and assign that tobigCardStringprintToDom( )to printbigCardStringhttps://getbootstrap.com/docs/4.0/components/collapse/
I am having a little trouble following this ticket. What are you displaying for the show more stuff? A modal? A collapse? Depending on which of those you pick that will change what goes in the development section
The show more button is supposed to bring up another larger area to display information, Basically another card. I'm going to go with a collapse. I don't know where it's going to go yet as i'm having a hard time visualizing the page, and don't know if I should have the information display directly below the original card, or below the rest of the cards.
Not sure if it is worded correctly, but I am adding a class to each see more button then adding a unique id to the parent id of both the buttons. The event listener will be for the classes of each both button(one for see more/one for add to cart), and get differentiated by the unique id of the parent div
👍