crispy-computing-machine/feedreader.html

## feedreader.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>RSS Feed Reader</title>
</head>
<body>

<div id="rssContainer"></div>

<script>
document.addEventListener('DOMContentLoaded', () => {
  // Replace 'YOUR_RSS_FEED_URL' with the actual RSS feed URL
  const rssFeedUrl = 'YOUR_RSS_FEED_URL';

  // Fetch the RSS feed
  async function fetchRssFeed() {
    try {
      const response = await fetch(rssFeedUrl);
      const data = await response.text();
      return new DOMParser().parseFromString(data, 'text/xml');
    } catch (error) {
      console.error('Error fetching RSS feed:', error);
      return null;
    }
  }

  // Display a specified number of titles as clickable links in the specified container
  async function displayTitles(containerId, limit) {
    const rssContainer = document.getElementById(containerId);
    const rssFeed = await fetchRssFeed();

    if (rssFeed) {
      // Convert NodeList to an array using Array.from
      const items = Array.from(rssFeed.querySelectorAll('item'));

      let output = '<ul>';

      // Use slice to limit the number of items displayed
      items.slice(0, limit).forEach(item => {
        const title = item.querySelector('title').textContent;
        const link = item.querySelector('link').textContent;

        // Open the link in a new tab
        output += `<li><a href="${link}" target="_blank">${title}</a></li>`;
      });

      output += '</ul>';
      rssContainer.innerHTML = output;
    } else {
      rssContainer.innerHTML = 'Failed to fetch RSS feed.';
    }
  }

  // Call the function to display a specified number of titles in the specified container
  displayTitles('rssContainer', 5);
});
</script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>RSS Feed Reader</title>
	</head>
	<body>

	<div id="rssContainer"></div>

	<script>
	document.addEventListener('DOMContentLoaded', () => {
	// Replace 'YOUR_RSS_FEED_URL' with the actual RSS feed URL
	const rssFeedUrl = 'YOUR_RSS_FEED_URL';

	// Fetch the RSS feed
	async function fetchRssFeed() {
	try {
	const response = await fetch(rssFeedUrl);
	const data = await response.text();
	return new DOMParser().parseFromString(data, 'text/xml');
	} catch (error) {
	console.error('Error fetching RSS feed:', error);
	return null;
	}
	}

	// Display a specified number of titles as clickable links in the specified container
	async function displayTitles(containerId, limit) {
	const rssContainer = document.getElementById(containerId);
	const rssFeed = await fetchRssFeed();

	if (rssFeed) {
	// Convert NodeList to an array using Array.from
	const items = Array.from(rssFeed.querySelectorAll('item'));

	let output = '<ul>';

	// Use slice to limit the number of items displayed
	items.slice(0, limit).forEach(item => {
	const title = item.querySelector('title').textContent;
	const link = item.querySelector('link').textContent;

	// Open the link in a new tab
	output += `<li><a href="${link}" target="_blank">${title}</a></li>`;
	});

	output += '</ul>';
	rssContainer.innerHTML = output;
	} else {
	rssContainer.innerHTML = 'Failed to fetch RSS feed.';
	}
	}

	// Call the function to display a specified number of titles in the specified container
	displayTitles('rssContainer', 5);
	});
	</script>

	</body>
	</html>