In this assignment, you will build a customer directory using DOM manipulation with JavaScript. You will get the customer data via customers.js, an included JavaScript file, and format dates via a third-party library, Moment.js. You can also use other third-party libraries if you wish.

The customers were generated using RandomUser.me, and so they contain a lot of data. For our purposes, you will need their name, address, phone numbers, thumbnail, birthdate, and the date they became a customer, which is stored as registered.date in the data.

The file named states.js defines a function that you can use to convert the name of a state to its abbreviation.

You'll need to create the html file and connect all the javascript files you need to that page.

You can choose to use flexbox, grid, and/or css libraries for styling your site. Keep in mind, however, that the priority for this assignment is the data, not the styling, so spend your time accordingly.

Your site should look like the following screenshot with individual customers visible in a grid. You can apply your own css style choices, but getting the info on the page is first priority: