<style>
  #marketnewsgeneral {
    max-height: 50vh;
    overflow: auto;
  }

  #marketnewsforex {
    max-height: 50vh;
    overflow: auto;
  }

  #marketnewscrypto {
    max-height: 50vh;
    overflow: auto;
  }

  #marketnewsmerger {
    max-height: 50vh;
    overflow: auto;
  }
</style>

<div class="container">
  <div class="panel">
    <section class="hero is-white">
      <div class="hero-body" style="padding: 24px 24px">
        <p class="title">Stock Digitalization & Simulation Trading Platform</p>
        <p class="subtitle">Market News</p>
      </div>
    </section>
  </div>
</div>

<div class="columns" style="margin: 0">
  <div class="column is-full">
    <div class="columns">
      <div class="column is-6">
        <nav class="panel">
          <!-- General News -->
          <p class="panel-heading">General</p>
          <div id="marketnewsgeneral"></div>
        </nav>
      </div>
      <div class="column is-6">
        <nav class="panel">
          <!-- Forex News -->
          <p class="panel-heading">Forex</p>
          <div id="marketnewsforex"></div>
        </nav>
      </div>
    </div>
    <div class="columns">
      <div class="column is-6">
        <nav class="panel">
          <!-- General News -->
          <p class="panel-heading">Crypto</p>
          <div id="marketnewscrypto"></div>
        </nav>
      </div>
      <div class="column is-6">
        <nav class="panel">
          <!-- Forex News -->
          <p class="panel-heading">Merger</p>
          <div id="marketnewsmerger"></div>
        </nav>
      </div>
    </div>
  </div>
</div>

<script>
  //get general news
  async function getMarketNews_1(news_type) {
    var newsList_obj_1 = document.getElementById("marketnewsgeneral");
    const response = await fetch(
      "https://finnhub.io/api/v1/news?category=" +
        news_type +
        "&token=c0ro5sv48v6voi2d8ndg"
    );
    if (response.ok) {
      var data = await response.json();
      // console.log(data);
      var dynamicCode_1 = "";
      data.forEach(function (news) {
        //生成卡片
        //show the specific news
        dynamicCode_1 +=
          '<div class="card" id="market_news">' +
          '<div class="card-content">' +
          '<div class="columns">' +
          '<div class="column is-6">' +
          '<div class="card-image">' +
          '<figure class="image">' +
          "<img src=" +
          news.image +
          ' alt="' +
          news.headline +
          '" onerror="this.src=\'http://anokha.world/images/not-found.png\'"/>' +
          "</figure>" +
          "</div>" +
          "</div>" +
          '<div class="column">' +
          '<p class="title">' +
          '<a href="' +
          news.url +
          '">' +
          news.headline +
          "</a>" +
          "</p>" +
          '<div class="content">' +
          news.summary +
          "</div>" +
          "<div> News Type: <strong>" +
          news.category +
          "</strong></div>" +
          "</div>" +
          "</div>" +
          "</div>" +
          '<footer class="card-footer">' +
          '<p class="card-footer-item"><span> Source: <strong>' +
          news.source +
          "</strong></span></p>" +
          '<p class="card-footer-item"><span> Time: <strong>' +
          new Date(news.datetime * 1000).toLocaleDateString() +
          " </strong></span></p>" +
          "</footer>" +
          "</div>";
      });

      newsList_obj_1.innerHTML = dynamicCode_1;
    } else {
      alert(response.statusText);
    }
  }

  //get forex news
  async function getMarketNews_2(news_type) {
    var newsList_obj_2 = document.getElementById("marketnewsforex");
    const response = await fetch(
      "https://finnhub.io/api/v1/news?category=" +
        news_type +
        "&token=c0ro5sv48v6voi2d8ndg"
    );
    if (response.ok) {
      var data = await response.json();
      // console.log(data);
      var dynamicCode_2 = "";
      data.forEach(function (news) {
        //生成卡片
        //show the specific news
        dynamicCode_2 +=
          '<div class="card" id="market_news">' +
          '<div class="card-content">' +
          '<div class="columns">' +
          '<div class="column is-6">' +
          '<div class="card-image">' +
          '<figure class="image">' +
          "<img src=" +
          news.image +
          ' alt="' +
          news.headline +
          '" onerror="this.src=\'http://anokha.world/images/not-found.png\'"/>' +
          "</figure>" +
          "</div>" +
          "</div>" +
          '<div class="column">' +
          '<p class="title">' +
          '<a href="' +
          news.url +
          '">' +
          news.headline +
          "</a>" +
          "</p>" +
          '<div class="content">' +
          news.summary +
          "</div>" +
          "<div> News Type: <strong>" +
          news.category +
          "</strong></div>" +
          "</div>" +
          "</div>" +
          "</div>" +
          '<footer class="card-footer">' +
          '<p class="card-footer-item"><span> Source: <strong>' +
          news.source +
          " </strong></span></p>" +
          '<p class="card-footer-item"><span> Time: <strong>' +
          new Date(news.datetime * 1000).toLocaleDateString() +
          " </strong></span></p>" +
          "</footer>" +
          "</div>";
      });

      newsList_obj_2.innerHTML = dynamicCode_2;
    } else {
      alert(response.statusText);
    }
  }

  //get crypto news
  async function getMarketNews_3(news_type) {
    var newsList_obj_3 = document.getElementById("marketnewscrypto");
    const response = await fetch(
      "https://finnhub.io/api/v1/news?category=" +
        news_type +
        "&token=c0ro5sv48v6voi2d8ndg"
    );
    if (response.ok) {
      var data = await response.json();
      // console.log(data);
      var dynamicCode_3 = "";
      data.forEach(function (news) {
        //生成卡片
        //show the specific news
        dynamicCode_3 +=
          '<div class="card" id="market_news">' +
          '<div class="card-content">' +
          '<div class="columns">' +
          '<div class="column is-6">' +
          '<div class="card-image">' +
          '<figure class="image">' +
          "<img src=" +
          news.image +
          ' alt="' +
          news.headline +
          '" onerror="this.src=\'http://anokha.world/images/not-found.png\'"/>' +
          "</figure>" +
          "</div>" +
          "</div>" +
          '<div class="column">' +
          '<p class="title">' +
          '<a href="' +
          news.url +
          '">' +
          news.headline +
          "</a>" +
          "</p>" +
          '<div class="content">' +
          news.summary +
          "</div>" +
          "<div> News Type: <strong>" +
          news.category +
          "</strong></div>" +
          "</div>" +
          "</div>" +
          "</div>" +
          '<footer class="card-footer">' +
          '<p class="card-footer-item"><span> Source: <strong>' +
          news.source +
          " </strong></span></p>" +
          '<p class="card-footer-item"><span> Time: <strong>' +
          new Date(news.datetime * 1000).toLocaleDateString() +
          " </strong></span></p>" +
          "</footer>" +
          "</div>";
      });

      newsList_obj_3.innerHTML = dynamicCode_3;
    } else {
      alert(response.statusText);
    }
  }

  //get forex news
  async function getMarketNews_4(news_type) {
    var newsList_obj_4 = document.getElementById("marketnewsmerger");
    const response = await fetch(
      "https://finnhub.io/api/v1/news?category=" +
        news_type +
        "&token=c0ro5sv48v6voi2d8ndg"
    );
    if (response.ok) {
      var data = await response.json();
      // console.log(data);
      var dynamicCode_4 = "";
      data.forEach(function (news) {
        //生成卡片
        //show the specific news
        dynamicCode_4 +=
          '<div class="card" id="market_news">' +
          '<div class="card-content">' +
          '<div class="columns">' +
          '<div class="column is-6">' +
          '<div class="card-image">' +
          '<figure class="image">' +
          "<img src=" +
          news.image +
          ' alt="' +
          news.headline +
          '" onerror="this.src=\'http://anokha.world/images/not-found.png\'"/>' +
          "</figure>" +
          "</div>" +
          "</div>" +
          '<div class="column">' +
          '<p class="title">' +
          '<a href="' +
          news.url +
          '">' +
          news.headline +
          "</a>" +
          "</p>" +
          '<div class="content">' +
          news.summary +
          "</div>" +
          "<div> News Type: <strong>" +
          news.category +
          "</strong></div>" +
          "</div>" +
          "</div>" +
          "</div>" +
          '<footer class="card-footer">' +
          '<p class="card-footer-item"><span> Source: <strong>' +
          news.source +
          " </strong></span></p>" +
          '<p class="card-footer-item"><span> Time: <strong>' +
          new Date(news.datetime * 1000).toLocaleDateString() +
          " </strong></span></p>" +
          "</footer>" +
          "</div>";
      });

      newsList_obj_4.innerHTML = dynamicCode_4;
    } else {
      alert(response.statusText);
    }
  }
  //执行函数
  //general news
  getMarketNews_1("general");
  //forex news
  getMarketNews_2("forex");
  //crypto news
  getMarketNews_3("crypto");
  //merger news
  getMarketNews_4("merger");
</script>
