A PWA to fetch news headlines from news APIs.

I have created a progressive Web app for fetching news headlines from two APIs which are NewsApi.org and Newyork times API.

I have used javascript fetch(url) method to hit the Api endpoint.
The response comes as a json object. The news articles from the json object are then converted to an javascript object. The javascript object then gets mapped to an html unordered list to show the news articles as distinct posts.

In the second update I have added the feature to show images received from the APIs.

I have created a javascript function createNode() to create html elements
and the data gets mapped using javascript map function.

Today in the third update i have aaded a button to the actual news article from the news provider.

Tge link to the website is

https://soulsam480.github.io/headliner/index.html

Visit the site and the github repo is available on

https://github.com/soulsam480/headliner

Comments

[Aravind Balla]

Hi Sambit, nice post!

I had a look at the code and here are few thoughts.

• Do you really need createNode function? It is like renaming document.createElement() method. (same with append)

• You can use template literals to create all the inner elements and use innerHTML once to put that in the node
  

  const node = document.createElement('div');
  node.innerHTML = `<li><span>${title}</span><p>${abstract}</p></li>`
  

Hope it helps.

[sambit sahoo]

Thank you for the insight.
It's amazing to see a more efficient way to achieve same result.

[Vikram Sharma]

Nice article. For those looking to develop news app I found this list of news apis.

[Vicky]

Have you ever used NewsData.io's News API??

[sambit sahoo]

Please comment any efficient way to do this and how to do this type of project in other languages. I'm new to Dev.to so please help. Thanks in advance 👌