Javascript Pictures page with NASA API

 

Features:

Data fetch from NASA API

Storage favorates data in localStorage and also can getItems

Delete the saved favorates card from interface and localStorage

CODE Github

DEMO

HTML

Before the pictures fetched, the loader shows up. Because it takes some time when fetch data from server database.

navigation includes favorates button and load more button.

When click the "favorate", update the data fetched from localStorage.

When click the "load more" ,fetch more data from server.

In favorates page,the favorate buttons should be hidden.

Notification show up 2 seconds after adding the favorates.

CSS

center the loader svg.

background is the lower layer of nav items.

the images should be fit in the image container.

save favorate button at the fixed position. 

The hidden class applied to nav button .

When screen is small than 800px, the images fit in .

JAVASCRIPT

Select all the DOM from html.

Request the NASA API Key from APOD.

the apiUrl is a Object.

First the loader show up,when the data fetching finish, it's time to updateDOM .

if localStorage has data, the data should be parsed into the object.

fresh the image container everytime updating.

create the DOM to html.

Then showContent() to toggle nav and hide loader.

loop the current result array,and build the DOM and append ony by one.

When save button is cliked,the text and function should toggle

And if the copyright is null in the results,the copyright should be blank.

saveFavorate() function: if the itemUrl is the same as results one,and not the one allready saved, the item should be save to favorates. Then the save button changes and notification show up for 2 seconds.

And also set to localStorage.

The same when removeFavorate() function.

After update the dom,the windows should be at the top of page.

if the items are results initially,toggle the nav. And hidden the loader.

onload the fetch function initi.