Open Jmarquez8951 opened 4 years ago
const sock = {
name: 'Steve',
age: 24,
brand: 'Hanes',
color: 'white',
status: 'Extra dirty',
hobby: 'swimming',
location: 'San Francisco, CA',
size: 'one size fits most',
wantsLeft: true,
height: 'tube',
daysSingle: 365,
description: 'lorem ipsum',
quote: 'Do not hang me out to dry'
}
User Story
As a user, when the home page loads, I want to see all the socks.
AC
WHEN the home page loads THEN I should see ALL the socks AND they should appear as images AND when I hover over one the image should be greyed out and the name should appear
Dev Notes
sock-drawer
, class=d-flex flex-wrap
printToDom
function - that takes in adivId
andtextToPrint
sockBuilder
function- that takes in an array, loops over the array and builds adomString
(image, h2 tags for names (these should be hidden), container div should have a class ofsock-card col-4
), and callsprintToDom
.sock-card
(use getElementByClassName and loop) with function calledshowName
.sock-card
(use getElementByClassName and loop) with function calledhideName
showName
function - grey out image(use opacity), show the h2 tag with namehideName
function - display the regular image, hide the h2 tag with name