DEV Community

Dhairya Shah
Dhairya Shah

Posted on

NEWS Application using New York Times API

Hello, I am back again with a new article; In this article, I will be showing how I built a News Website using NY Times API

Consider liking and sharing the article.

Let's get started,

Step 1 - Register Application at NY Times Developers

Step 2 - Code

  • Fetch (Note API KEY in the code has been deprecated use your OWN API KEY)
await fetch('https://api.nytimes.com/svc/mostpopular/v2/viewed/1.json?api-key=iDFG30D2aGpr4OWWSJ6UBMBQh2S7oZpW')
.then(d => d.json())
.then(response => {})
Enter fullscreen mode Exit fullscreen mode
  • Fetching Results
for(var i = 0; i < response.results.length; i++){
            const output = document.getElementById('output');

            try{
                output.innerHTML += `
                    <div class="card">
                    <div class="card-body">
                    <img src="${response.results[i]['media'][0]['media-metadata'][2].url}" class="card-img-top" alt="${response.results[i]['media'][0].caption}" title="${response.results[i]['media'][0].caption}"><br>
                    <h2 class="card-title">${response.results[i].title}</h2>
                    <div class="card-text">
                        <p>${response.results[i].abstract}</p>
                    </div>
                    </div>
                    </div>
                    <br>
                    `
                console.log(response.results[i]['media'][0].caption);
            }
            catch(err){
                console.log(err);
            }
        }
Enter fullscreen mode Exit fullscreen mode
  • Result Result

Consider liking the article if you learnt something new.

Top comments (0)