3. News Section with Fetching Data from an API
If you want to load news dynamically from a server or an external API (e.g., a news API or your own backend), you can use JavaScript to fetch the data.
Example: Dynamic News with Fetch API
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic News from API</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Latest News</h1>
<div class="news-section" id="newsSection">
<!-- News items will be injected here by JavaScript -->
</div>
<script>
// Function to fetch news data from an API
function fetchNews() {
fetch('https://api.example.com/news') // Replace with your news API URL
.then(response => response.json())
.then(data => {
const newsSection = document.getElementById('newsSection');
// Loop through news items and append to the news section
data.forEach(item => {
const newsItem = document.createElement('div');
newsItem.classList.add('news-item');
newsItem.innerHTML = `
<h3>${item.title}</h3>
<p>${item.description}</p>
<small>Published on: ${item.date}</small>
`;
newsSection.appendChild(newsItem);
});
})
.catch(error => {
console.error('Error fetching news:', error);
});
}
// Call the function to fetch and display the news
fetchNews();
</script>
</body>
</html>CSS for this component!
#css
.news-section {
padding: 20px;
background-color: #f9f9f9;
border: 1px solid #ddd;
margin: 20px;
}
.news-item {
margin-bottom: 15px;
}
.news-item h3 {
margin: 0;
font-size: 1.5em;
}
.news-item p {
margin: 5px 0 0;
}Review:
- Fetch API: The
fetch()function is used to retrieve news data from an API. - Dynamically Display News: The news items from the API response are displayed on the webpage.
- You can replace
'https://api.example.com/news'with a real news API or your own backend endpoint.
Result:
- Static HTML News Section: Hard-code news directly into your HTML.
- Dynamic News with JavaScript: Use JavaScript to dynamically insert news into your page from a predefined list or fetch from an external API.
- Click to see dynamic working on this query using Javascript!
Best Practices for Implementing Coding Filters!
To get the most out of coding filters, developers should follow best practices, such as creating reusable filter functions, keeping the logic modular, and ensuring consistent application of filters throughout the codebase. By doing so, developers can maintain clean, scalable code that is easier to modify and extend over time.
