Display All socks

[delindell]

User Story

As a user, when the page loads I want to see all the socks.

AC

WHEN the page loads THEN I should see all the socks AND they should appear as images AND when I hover over one image should be greyed out and the name should appear

Dev Notes

• In index.html add a div with an id = sock-drawer, class= d-flex flex-wrap
• Create Array called socks in main.js with a bunch (8) of sock objects
• Create a printToDom function - that takes in a divid and textToPrint
• Create a sockBuilder function - that takes in an array, loops over the array, builds a domString (image, h2 tages for names (these should be hidden) container div should have a class of sock-card col-4), and calls printToDom
• Add mouseover event listener to class .sock-card (use getElementByClassName and loop) with function called showName
• Add mouseout event listener to class .sock-card (use getElementByClassName and loop) with funciton called hideName
• showName function - grey out image (use opacity), show h2 tag with name
• hideName function - display regular image, hide h2 tag with name

[delindell]

const sock = {
name: 'steve',
age: 23,
brand: 'Hanes',
color: 'White',
status: 'Extra Dirty',
hobby: 'Swimming'
location: 'San Franciso',
size: 'W 5-10'
wantsLeft: true,
height: 'tube',
description: 'bla bla bla bla',
quote: 'Don't hang me out to dry',
daysSingle: 365
}