index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>RSS Preview</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
    <h1>RSS Preview</h1>
    <form>
        <label for="rss-feed">RSS Feed URL:</label>
        <input type="text" id="rss-feed" name="rss-feed" required>
        <button type="submit">Get Articles</button>
    </form>
    <div id="articles-container"></div>
    <script>
        $('form').submit(function(event) {
            event.preventDefault();
            var rssUrl = $('#rss-feed').val();
            var rssToJsonApi = 'https://api.rss2json.com/v1/api.json?rss_url=' + rssUrl;
            $.getJSON(rssToJsonApi, function(response) {
                if (response.status != 'ok') {
                    console.log('Error fetching RSS feed');
                    return false;
                }
                var articles = response.items;
                var articlesHtml = '';
                for (var i = 0; i < articles.length; i++) {
                    var article = articles[i];
                    articlesHtml += '<h2><a href="' + article.link + '" target="_blank">' + article.title + '</a></h2>';
                    articlesHtml += '<p>' + article.content + '</p>';
                }
                $('#articles-container').html(articlesHtml);
            });
        });
    </script>
</body>
</html>