Display all socks

[ancasimon]

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 an image, the image should be greyed out and the name (of the sock) should appear.

Dev Notes

• Create a div with an id = sock-drawer on the index.html page - 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 parameters.
• Create a sockBuilder function - that will take in an array (as input), loops over the array and builds a domString(image, h2 tags for name (these should be hidden), container div should have a class of sock-card col-4), and calls printToDom.
• Add mouseover event listener to .sock-card (use getElementsbyClassName and loop over them to attach the event listener to each one) with function called showName
• Add mouseout event listener to sock-card (use getElementsbyClassName and loop over them to attach the event listener to each one) with function called hideName
• showName function - grey out image (use opacity), show h2 tag with name
• hideName function - display regular image, hide h2 tag with name

[ancasimon]

const = {
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: 'a description of the sock',
quote: 'Do not hang me out to dry'
};