As a user, when I visit the 'Taproom' page of the Kiss the Goat website, I should see a 4 photo grid of the 'brewmasters' with their information below each photo.
Acceptance Criteria
WHEN the 'Taproom' page of the Kiss the Goat website loads,
THEN I should see a photo grid of the 'brewmasters'
AND their information (name, hometown, favorite beers) should display below the photo
Development
Create an array of employee information into the main.js file: ex.
Create an employeeCards div to taproom.html that the employee cards will print to
Create employeeBuilder function that will create the domString to be printed to the DOM (we can't use one domStringBuilder function because we are making beer cards and employee cards)
Create printToDom function that will print cards to the employeeCards div in the HTML document
For now, the employee information (name, hometown, favorite beers) should be printed on the employee card below the photo - we will later create a function that hides or shows this text upon hover
User Story
As a user, when I visit the 'Taproom' page of the Kiss the Goat website, I should see a 4 photo grid of the 'brewmasters' with their information below each photo.
Acceptance Criteria
WHEN the 'Taproom' page of the Kiss the Goat website loads, THEN I should see a photo grid of the 'brewmasters' AND their information (name, hometown, favorite beers) should display below the photo
Development
main.js
file: ex.div
totaproom.html
that the employee cards will print toemployeeBuilder
function that will create the domString to be printed to the DOM (we can't use onedomStringBuilder
function because we are making beer cards and employee cards)printToDom
function that will print cards to the employeeCardsdiv
in the HTML documenthover