Update index.html

index.html

@@ -19,12 +19,18 @@
         </nav>
         <section id="main-content">
           <button id="get-articles" type="button">Get recent articles...</button>
+          <div id="message-container">Gettin articles...</div>
         </section>
 
         <script>
           const endpoint = 'https://dhruvshettty--latest-news-webhook-response-articles.modal.run/';
           
           document.getElementById("get-articles").onclick = function() {
+              var message = document.getElementById("message-container");
+              message.style.display = 'block';
+              setTimeout(function() { 
+                message.style.display = 'none'; 
+              }, 3000);
             fetch(endpoint)
               .then((response) => response.json())
               .then((data) => {
@@ -32,9 +38,9 @@
                 data.forEach(post => {
                   const article = document.createElement('article');
                   article.innerHTML = `
-                    <h2>${post.title}</h2>
+                    <a href="${post.url}"><h2>${post.title}</h2></a>
                     <p>Published on ${post.publishedat}</p>
-                    <p>Categories: ${post.predicted_topic}</p>
+                    <p>Categories: [${post.predicted_topic}]</p>
                     <p>Stance: ${post.predicted_stance}</p>
                   `;
                   mainContent.appendChild(article);