Merge pull request #30 from igormcsouza/feature/add-news-section

Feature/add news section

Author: igormcsouza

assets/js/fetch_news.js

@@ -0,0 +1,42 @@
+fetch('https://news-api-d1e5.herokuapp.com/fetch', {
+	method: 'POST',
+	body: JSON.stringify({topic: "Machine Learning"}),
+	headers: {'Content-Type': 'application/json'}
+}).then(function (response) {
+	// The API call was successful!
+	if (response.ok) {
+		return response.json();
+	} else {
+		return Promise.reject(response);
+	}
+}).then(function (data) {
+	// This is the JSON from our response
+    newsFromApi = document.getElementById("news-from-api")
+    loading = document.getElementById("news-from-api-loading")
+
+    newsFromApi.removeChild(loading)
+
+    for (i in data['headlines']) {
+        let htmlstring = `
+        <div class="card-body">
+            <h5 class="card-title">${data['headlines'][i][0]}</h5>
+            <p class="card-text">
+                ${data['headlines'][i][2]}
+            </p>
+            <a href="https://${data['headlines'][i][1]}" class="btn btn-primary">
+                More
+            </a>
+        </div>
+        `
+        let div = document.createElement('div')
+        div.innerHTML = htmlstring.trim()
+        div.className = "card col-lg-3 col-md-4 col-sm-6"
+
+        newsFromApi.appendChild(div)
+        if (i == 11) break
+    }
+	console.log(data);
+}).catch(function (err) {
+	// There was an error
+	console.warn('Something went wrong.', err);
+});

blog/articles/2021-09-01-welcome.html

@@ -33,6 +33,9 @@
             <li class="nav-item">
               <a class="nav-link" href="/#Projects">Projects</a>
             </li>
+            <li class="nav-item">
+              <a class="nav-link" href="/#News">News</a>
+            </li>
             <li class="nav-item">
               <a class="nav-link" href="/blog/">Blog</a>
             </li>

blog/index.html

@@ -32,6 +32,9 @@
             <li class="nav-item">
               <a class="nav-link" href="/#Projects">Projects</a>
             </li>
+            <li class="nav-item">
+              <a class="nav-link" href="/#News">News</a>
+            </li>
             <li class="nav-item">
               <a class="nav-link" href="/blog/">Blog</a>
             </li>

index.html

@@ -32,6 +32,9 @@
             <li class="nav-item">
               <a class="nav-link" href="/#Projects">Projects</a>
             </li>
+            <li class="nav-item">
+              <a class="nav-link" href="/#News">News</a>
+            </li>
             <li class="nav-item">
               <a class="nav-link" href="/blog/">Blog</a>
             </li>
@@ -160,7 +163,24 @@ <h5 class="card-title">Pymetaheuristics</h5>
         </div>
       </div>
     </div>
-    <div class="d-flex justify-content-center my-3">
+    <div id="News" class="container my-3">
+      <div class="card my-3">
+        <div class="card-body">
+          <p class="h2 mb-0">News</p>
+        </div>
+      </div>
+
+      <div id="news-from-api" class="row d-flex justify-content-between mx-0">
+        <div id="news-from-api-loading" class="d-flex justify-content-center">
+          <div class="spinner-border text-secondary" style="width: 4rem; height: 4rem;" role="status">
+            <span class="visually-hidden">Loading...</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Back to top -->
+    <div class="d-flex justify-content-center my-5">
       <a class="btn btn-seconday" role="button" href="#">
         <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-arrow-up-circle-fill" viewBox="0 0 16 16">
           <path d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0zm-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V11.5z"/>
@@ -204,5 +224,7 @@ <h6 class="card-title">Follow-me also on my social medias</h6>
   <!-- Add javascript -->
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
   <script src="/assets/js/index.js"></script>
+  <!-- Fetch news from News API -->
+  <script src="/assets/js/fetch_news.js"></script>
 </body>
 </html>