JSFiddle - React, Tailwind, and code Playground

by rotex

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-language" content="en" />
    <title>FeedEk jQuery RSS/ATOM Feed Plugin Demo | jQuery RSS/ATOM Parser Plugin FeedEk Demo</title>
    <link href="css/FeedEk.css" rel="stylesheet" type="text/css" />
    <style>
        body {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            background-color: #efefef;
            font-size: 13px;
            line-height: 17px !important;
        }

        .rssDiv {
            float: left;
            padding-right: 35px;
        }

        ul {
            width: 400px !important;
        }
    </style>
</head>

<body>
    <div style="padding: 10px;">
        <h1>FeedEk Examples</h1>

        <div class="rssDiv">
            <p><strong>Basic Example</strong></p>
            <div id="divRss"></div>


        </div>


        <div style="clear: both"></div>


        <div>



            <div style="clear: both"></div>
        </div>
        <hr />



    </div>
    <br />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/FeedEk.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#divRss').FeedEk({
                FeedUrl: 'https://russian.rt.com/rss',
                MaxCount: 2
            });


        });
    </script>
</body></html>

CSS

.feedEkList{width:450px; list-style:none outside none;background-color:#FFFFFF; border:1px solid #D3CAD7; padding:4px 6px; color:#3E3E3E;}
.feedEkList li{border-bottom:1px solid #D3CAD7; padding:5px;}
.feedEkList li:last-child{border-bottom:none;}
.itemTitle a{font-weight:bold; color:#4EBAFF !important; text-decoration:none }
.itemTitle a:hover{ text-decoration:underline }
.itemDate{font-size:11px;color:#AAAAAA;}

JavaScript

/*! FeedEk jQuery RSS/ATOM Feed Plugin v3.1.1
* https://jquery-plugins.net/FeedEk/FeedEk.html  https://github.com/enginkizil/FeedEk
* Author : Engin KIZIL */
!function (r) { r.fn.FeedEk = function (t) { var a, i = r.extend({ MaxCount: 5, ShowDesc: !0, ShowPubDate: !0, DescCharacterLimit: 0, TitleLinkTarget: "_blank", DateFormat: "", DateFormatLang: "en" }, t), e = r(this).attr("id"), n = ""; r("#" + e).empty(), null != i.FeedUrl && (r("#" + e).append('<img src="loader.gif" />'), r.ajax({ url: "https://feed.jquery-plugins.net/load?url=" + encodeURIComponent(i.FeedUrl) + "&maxCount=" + i.MaxCount + "&dateCulture=" + i.DateFormatLang + "&dateFormat=" + i.DateFormat, dataType: "json", success: function (t) { r("#" + e).empty(), null != t.data && (r.each(t.data, function (t, e) { n += '<li><div class="itemTitle"><a href="' + e.link + '" target="' + i.TitleLinkTarget + '" >' + e.title + "</a></div>", i.ShowPubDate && (a = new Date(e.publishDate), n += '<div class="itemDate">', 0 < r.trim(i.DateFormat).length ? n += e.publishDateFormatted : n += a.toLocaleDateString(), n += "</div>"), i.ShowDesc && (n += '<div class="itemContent">', 0 < i.DescCharacterLimit && e.description.length > i.DescCharacterLimit ? n += e.description.substring(0, i.DescCharacterLimit) + "..." : n += e.description, n += "</div>") }), r("#" + e).append('<ul class="feedEkList">' + n + "</ul>")) } })) } }(jQuery);