From 2ed962250cc2258e2ba0f0bc6cc6e45b9f0ca80c Mon Sep 17 00:00:00 2001
From: Brendan <94894839+abrendan@users.noreply.github.com>
Date: Mon, 2 Dec 2024 13:14:32 +0000
Subject: [PATCH] Added error message when no articles found

---
 script.js | 26 +++++++++++++++++++++++++-
 style.css | 20 ++++++++++++++++++++
 2 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/script.js b/script.js
index bc8d18f..a9bcf82 100644
--- a/script.js
+++ b/script.js
@@ -111,7 +111,21 @@ function fetchFromNYTAPI(query, topic) {
 
 function displayArticles(articles, apiType) {
   const articlesDiv = document.getElementById('articles');
-  articlesDiv.innerHTML = '';
+  articlesDiv.innerHTML = ''; // Clear previous articles
+
+  const messageDiv = document.createElement('div'); // Create a message div
+
+  if (articles.length === 0) {
+    // Display an error message if there are no articles
+    messageDiv.innerHTML = '<p class="text-danger">No articles found. Please try a different search.</p>';
+    messageDiv.className = 'message';
+    document.body.appendChild(messageDiv);
+    setTimeout(() => {
+      document.body.removeChild(messageDiv);
+    }, 3000);
+    return;
+  }
+
   articles.forEach(article => {
     const thumbnailUrl = article.image || 'default-thumbnail.jpg';
 
@@ -135,6 +149,16 @@ function displayArticles(articles, apiType) {
     `;
     articlesDiv.appendChild(articleElement);
   });
+
+  // Display success message
+  messageDiv.innerHTML = '<p class="text-success">Articles loaded successfully!</p>';
+  messageDiv.className = 'message';
+  document.body.appendChild(messageDiv);
+
+  // Automatically remove the message after a few seconds
+  setTimeout(() => {
+    document.body.removeChild(messageDiv);
+  }, 3000);
 }
 
 function viewArticleDetails(article) {
diff --git a/style.css b/style.css
index 55c8ba7..af5f2ed 100644
--- a/style.css
+++ b/style.css
@@ -29,4 +29,24 @@
 
 .icon-small {
   width: 10%; /* Set the width to 10% */
+}
+
+.message {
+  position: fixed;                  
+  top: 20px;                       
+  right: 20px;                    
+  z-index: 1000;                  
+  padding: 10px 15px;             
+  border-radius: 20px;         
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); 
+  max-width: 300px;              
+  font-size: 14px;              
+}
+
+.text-success {     
+  color: #155724;                 
+}
+
+.text-danger {  
+  color: #721c24;                 
 }
\ No newline at end of file