DEV Community

sambit sahoo
sambit sahoo

Posted on

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 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

Visit the site and the github repo is available on

Top comments (5)

aravindballa profile image
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.

sambitsahoojs profile image
sambit sahoo

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

vikramchandra profile image
Vikram Sharma

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

vicky1415 profile image

Have you ever used's News API??

sambitsahoojs profile image
sambit sahoo • Edited

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