Javascript Desktop Dynamic Landing Page with Quotes API

  The simple desktop view always catch our eyes, which is popular nowadays.  It can be live in your browser. You may know some Google extentions related which have some functions like clock,to-do list,quotes or bookmarks. 

The project's idea is from Brad Traversy tutorial.  I kinda add something more. The site shows the digital clock, editable user name, background changing based on the time, and a random quote with API.

Github code

HTML

Google Font named Darker Grotesque

Three sections: time,h1for greeting name and h2 for quotes

The name should be editable with "contenteditable=true"

CSS

Center box in the page. 

Add  a underline to second part. 

JAVASCRIPT

select the DOM needed with id

Get the digital time with new Date()

If the hour shows more than 12, adding "PM",or else "AM"

If the minutes and seconds show single number,adding zero ahead

showTime function runs every second with setTimeout

Checking the hour,if less than 12 which means morning,if 12<hour<18 which means afternoon, or else the evening time.  Changing the backgroung image url and the greeting text content.

Checking wether the localStorage has the values item. If null, the placeholder shows,or else get the value.

When press the enter key, you can set the name value to locaLStorage. After freshing the page, the value will be stay in local.

The Quote API named quotes15 . You have to sign up to get the API Key which is convient to access.

You can copy the snippet from right side according to your language,no more headache.

About how to use fetch to get the data,I found the explain here 

The fetched Promise needs to parse with json()

Btw, for most of API, you will happend to have CORS Problem. You can add the "mode:no-cors" to avoid.  This is for security related reason, it's fine if you just get the public API.

Don't forget run the function everytime you've done it.