Jump to content
Welcome, welcome! Come in and register, and have some developer coffee. 👨‍💻 ×

[JS] Create a RSS Reader in no time!


Recommended Posts

All you need are:

  • index.html
  • scripts.js
  • styles.css
  • RSS Feed URL

File #1 - index.html

Quote
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Today's Highlights</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="scripts.js"></script>
</head>
<body>
<h2>Today's Highlights</h2>
<h4>Brought to you by the Sun Daily</h4>
<div class="news">
</div>
</body>
</html>

 

File #2 - scripts.js
Remember to customize the RSS Feed URL with your own!

Quote
const url = 'https://www.thesundaily.my/rss/home'
console.log(url);
fetch(url)
.then(response=> {
console.log(response.ok);
const contentType = response.headers.get('content-type');
return response.text();
})
.then(xmlString => {
console.log(xmlString)
const parser = new DOMParser()
const dom = parser.parseFromString(xmlString, 'application/xml')
return dom
})
.then (dom => {
const items = dom.querySelectorAll('item')
console.log(items[0])
 
const ul = document.querySelector('.news')
items.forEach(item => {
const li = document.createElement('li')
li.textContent = item.querySelector('title').textContent
ul.append(li)
})
})
 

For Malaysian's the Sun Daily newspaper, these are the valid RSS Feeds:

 

File #3 - styles.css

It can be anything, it is of no importance here.  The following style sheet is optional:

Quote
body { background-color: rgba(150, 130, 19, 0.507); font-family: 'Helvetica Neue', sans-serif; font-size: 14px; }

RESULT? This is the screenshot, RSS feed reader using JavaScript in action!

1878829231_Screenshot2021-06-254_57_27AM.thumb.png.7b450beb00d9882ea219943010bc467a.png

Note: Not all RSS feed URL are supported. Some may block the script from fetching the XML content. 

 

Live Site Example: https://blogs.w3spaces.com

 

Edited by FlierMate
Added live site URL
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...