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

Top comments (4)

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

Collapse
 
sambitsahoojs profile image
sambit sahoo Author

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

Collapse
 
vikramchandra profile image
Vikram Sharma

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

Collapse
 
sambitsahoojs profile image
sambit sahoo Author • Edited on

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 👌

This post blew up on DEV in 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!