<button>Получить заголовки новостей</button>
<ul></ul>
const list = document.querySelector('ul');
const renderTitle = (title) => {
  list.insertAdjacentHTML('beforeend', `<h2>${title}</h2>`);
}
const getAndRenderTopNews = async () => {
  try {
    const ids = await axios.get('https://hacker-news.firebaseio.com/v0/topstories.json');
    const newsPromises = ids.data.map(n => axios.get(`https://hacker-news.firebaseio.com/v0/item/${n}.json`));
    // const getNews = await Promise.all(newsPromises);
    // getNews.forEach(n => renderTitle(n.data.title));
  } catch(e) {
    console.error(e);
  }
  
}

document.querySelector('button').addEventListener('click', getAndRenderTopNews)

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.4/axios.min.js