Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Html macro
sanitizetrueheightfalse
height
<!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>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .rss-item {
            margin-bottom: 15px;
            border-bottom: 1px solid #ccc;
            padding-bottom: 10px;
        }
        .rss-item h3 {
            margin: 0;
        }
        .rss-item p {
            margin: 5px 0 0;
        }
    </style>
</head>
<body>
    <h1>RSS Feed Reader</h1>
    <div id="rss-feed"></div>

    <script>
        const rssUrl = 'https://www.nasa.gov/news-release/feed/'; // Replace with your RSS feed URL

        async function fetchRSSFeed(url) {
            try {
                const response = await fetch(`https://api.rss2json.com/v1/api.json?rss_url=${encodeURIComponent(url)}`);
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`); } const rssText'Failed to fetch RSS feed');
                }

                const data = await response.textjson(); console.log(rssText); // Output raw XML text
                displayRSSFeed(data.items);
            } catch (error) {
                console.error('Error fetching RSS feed:', error);
                document.getElementById('rss-feed').innerText = 'Failed to load RSS feed.';
            }
} // Example RSS feed URL const rssUrl = 'https://example.com/rss'; fetchRSSFeed(rssUrl);         }

        function displayRSSFeed(items) {
            const feedContainer = document.getElementById('rss-feed');
            feedContainer.innerHTML = '';

            items.forEach(item => {
                const feedItem = document.createElement('div');
                feedItem.classList.add('rss-item');

                feedItem.innerHTML = `
                    <h3><a href="${item.link}" target="_blank">${item.title}</a></h3>
                    <p>${item.description}</p>
                    <small>${new Date(item.pubDate).toLocaleDateString()}</small>
                `;

                feedContainer.appendChild(feedItem);
            });
        }

        fetchRSSFeed(rssUrl);
    </script>
</body>
</html>