Added error message when no articles found

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) {

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;                 
 }