RSS reader

index.html

<div class="container">
    <h1>Choose an RSS Feed</h1>
    <ul>
        <li><button onclick="loadRSSFeed('https://feeds.feedburner.com/lsu-forum')">Forum Posts</button></li>
        <li><button onclick="loadRSSFeed('https://feeds.feedburner.com/featuredlandsurveyingvideos-landsurveyorsunited')">Surveying Videos</button></li>
        <li><button onclick="loadRSSFeed('https://feeds.feedburner.com/landsurveyingphotos')">Surveying Photos</button></li>
       <li><button onclick="loadRSSFeed('https://feeds.feedburner.com/marketplace/combined')">Surveyor Market</button></li>
      <li><button onclick="loadRSSFeed('https://feeds.feedburner.com/marketplace/combined')">Surveyor Market</button></li>
         
         
        
        
        
    </ul>
    <div id="loadingIndicator" style="display: none; text-align: center;">
    <img src="https://media.tenor.com/qXzHf2tesO0AAAAC/loading-gif-steiness.gif" alt="Loading Latest Posts" style="width: 50px;">
    <p>Loading the latest posts...</p>
</div>
    <div id="rssFeed"></div>
</div>

rss-reader.markdown

RSS reader

A Pen by JFarrow on CodePen.

License.

script.js

function loadRSSFeed(feedURL) {
    document.getElementById('rssFeed').innerHTML = '';
    document.getElementById('rssFeed').style.display = 'none';
    document.getElementById('loadingIndicator').style.display = 'block';
    
    fetch('https://api.allorigins.win/get?url=' + encodeURIComponent(feedURL))
    .then(response => {
        if (response.ok) {
            return response.json();
        }
        throw new Error('Network response was not ok.');
    })
    .then(data => {
        const parser = new DOMParser();
        const xmlDoc = parser.parseFromString(data.contents, 'text/xml');
        
        const items = xmlDoc.querySelectorAll('item');
        let rssFeedHTML = '';
        
        items.forEach(item => {
            const title = item.querySelector('title').textContent;
            const link = item.querySelector('link').textContent;
            const description = item.querySelector('description').textContent;
            const img = item.querySelector('enclosure') ? item.querySelector('enclosure').getAttribute('url') : '';
            
            rssFeedHTML += `
                <div class="article">
                    <h3><a href="${link}" target="_blank">${title}</a></h3>
                    ${img ? `<img src="${img}" alt="${title}">` : ''}
                    <p>${description}</p>
                </div>
            `;
        });
        
        document.getElementById('rssFeed').style.display = 'block';
        document.getElementById('rssFeed').innerHTML = rssFeedHTML;
        
        document.getElementById('loadingIndicator').style.display = 'none';
    })
    .catch(error => {
        console.error(error);
        document.getElementById('loadingIndicator').style.display = 'none';
    });
}

style.css

  body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        background-color: #111;
        color: #eee;
    }
    .container {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
    }
    h1 {
        color: #ff6600;
        text-align: center;
    }
    ul {
        list-style-type: none;
        padding: 0;
        text-align: center;
    }
    li {
        margin-bottom: 10px;
    }
    button {
        background-color: #333;
        color: #eee;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
    button:hover {
        background-color: #555;
    }
    #rssFeed {
        padding: 20px;
        background-color: #333;
        border: 1px solid #555;
        border-radius: 5px;
        display: none;
    }
    .article {
        margin-bottom: 20px;
        padding: 10px;
        background-color: #444;
        border-radius: 5px;
    }
    .article img {
        max-width: 100%;
        border-radius: 5px;
    }
    a {
        color: #ff6600;
        text-decoration: none;
    }
    a:hover {
        text-decoration: underline;
    }