yah the issue thedarknight01#3 is fixed

main.html

@@ -16,11 +16,11 @@ <h1>Latest News Portal</h1>
     </header>
 
     <nav>
-        <a href="#">Home</a>
-        <a href="#">World</a>
-        <a href="#">Technology</a>
-        <a href="#">Sports</a>
-        <a href="#">Business</a>
+        <a href="#" onclick="fetchCategoryNews('general')">Home</a>
+        <a href="#" onclick="fetchCategoryNews('world')">World</a>
+        <a href="#" onclick="fetchCategoryNews('technology')">Technology</a>
+        <a href="#" onclick="fetchCategoryNews('sports')">Sports</a>
+        <a href="#" onclick="fetchCategoryNews('business')">Business</a>
     </nav>
 
     <div class="container">
@@ -34,6 +34,6 @@ <h1>Latest News Portal</h1>
         <p>&copy; 2024 News Portal. All rights reserved. | <a href="#">Privacy Policy</a> | <a href="#">Contact Us</a></p>
     </footer>
 
-    <script src="script.js"></script>
+    <script src="main.js"></script>
 </body>
 </html>

main.js

@@ -1,18 +1,22 @@
 // Replace 'YOUR_API_KEY' with your actual NewsAPI key
-const apiKey = 'YOUR_API_KEY';
-const apiUrl = `https://newsapi.org/v2/top-headlines?country=us&apiKey=${apiKey}`;
+const apiKey = 'API_KEY';
+const bapiUrl = `https://newsapi.org/v2/top-headlines?apiKey=${apiKey}`;
 
 // Function to fetch news from the API
-async function fetchNews() {
+async function fetchCategoryNews(category) {
     const newsContainer = document.getElementById('news-container');
     const loadingIndicator = document.getElementById('loading');
 
     try {
+        loadingIndicator.style.display = 'block';
+
+        //It will build the url based on the selected category
+        const apiUrl = `${bapiUrl}&category=${category}&country=us`;
         // Fetch news from the API
         const response = await fetch(apiUrl);
         const data = await response.json();
 
-        if (data.articles.length > 0) {
+        if (data.articles.length > 0 && data.articles) {
             // Remove loading indicator
             loadingIndicator.style.display = 'none';
 
@@ -38,4 +42,7 @@ async function fetchNews() {
 }
 
 // Fetch news on page load
-document.addEventListener('DOMContentLoaded', fetchNews);
+document.addEventListener('DOMContentLoaded',() => fetchCategoryNews('general'));
+
+
+