RSS feed reader single feed

Asylum · Feb 19, 2023

I was looking into making a new rss feed reader for web oasis and thought what better time to start trying to make GPT build it than now.

I'll try to put my conversations with it and what it produced here in order from the very beginning to the last one. NOTE i did wind up abandoning this because i needed a feed reader that could read from multiple links. SO this single one only went so far.

Asylum · Feb 19, 2023

the very first thing i asked was this "Create a html script that reads rss feeds and mobile responds"

it output this "Here is a basic HTML script that uses JavaScript to read an RSS feed and display it in a mobile-responsive format:"

<!DOCTYPE html>
<html>
<head>
<title>RSS Feed Reader</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Basic styles for mobile responsiveness */
body {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
margin: 0;
padding: 0;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
.item {
border-bottom: 1px solid #ccc;
padding: 10px 0;
}
.title {
font-weight: bold;
font-size: 1.2rem;
margin-bottom: 5px;
}
.description {
font-size: 1rem;
color: #666;
}
</style>
</head>
<body>
<div class="container">
<h1>RSS Feed Reader</h1>
<div id="rss-feed"></div>
</div>
<script>
// JavaScript to fetch and parse RSS feed
const feedUrl = "https://nuclearcoffee.org/feed";
const feedContainer = document.getElementById("rss-feed");

fetch(feedUrl)
.then(response => response.text())
.then(xml => {
const parser = new DOMParser();
const doc = parser.parseFromString(xml, "application/xml");
const items = doc.querySelectorAll("item");

let html = "";
items.forEach(item => {
const title = item.querySelector("title").textContent;
const link = item.querySelector("link").textContent;
const description = item.querySelector("description").textContent;

html += `
<div class="item">
<a href="${link}" class="title">${title}</a>
<div class="description">${description}</div>
</div>
`;
});

feedContainer.innerHTML = html;
})
.catch(error => {
console.error(error);
feedContainer.textContent = "Error loading RSS feed.";
});
</script>
</body>
</html>

as you can see it is very basic, but trust me after a few more rounds you will see it start to take shape. I have added the html file to this post. Just download it edit the feed url and upload it. (if you are interested in this very plain version.

Asylum · Feb 19, 2023

Seeing how plain that was i decided to ask it this

can you make this more visually appealing?

to which is replied with

Certainly! Here's an updated version of the script with some basic styling to make it more visually appealing:

then it output this code

<!DOCTYPE html>
<html>
<head>
<title>RSS Feed Reader</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Basic styles for mobile responsiveness */
body {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
margin: 0;
padding: 0;
background-color: #f7f7f7;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 40px;
background-color: #fff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
.item {
border-bottom: 1px solid #ccc;
padding: 10px 0;
}
.title {
font-weight: bold;
font-size: 1.2rem;
margin-bottom: 5px;
color: #333;
text-decoration: none;
transition: color 0.3s ease;
}
.title:hover {
color: #000;
}
.description {
font-size: 1rem;
color: #666;
}

/* Styles for mobile responsiveness */
@media (max-width: 600px) {
.container {
max-width: 100%;
padding: 20px;
}
}
</style>
</head>
<body>
<div class="container">
<h1 style="text-align:center;">RSS Feed Reader</h1>
<div id="rss-feed"></div>
</div>
<script>
// JavaScript to fetch and parse RSS feed
const feedUrl = "https://nuclearcoffee.org/feed";
const feedContainer = document.getElementById("rss-feed");

fetch(feedUrl)
.then(response => response.text())
.then(xml => {
const parser = new DOMParser();
const doc = parser.parseFromString(xml, "application/xml");
const items = doc.querySelectorAll("item");

let html = "";
items.forEach(item => {
const title = item.querySelector("title").textContent;
const link = item.querySelector("link").textContent;
const description = item.querySelector("description").textContent;

html += `
<div class="item">
<a href="${link}" class="title" target="_blank">${title}</a>
<div class="description">${description}</div>
</div>
`;
});

feedContainer.innerHTML = html;
})
.catch(error => {
console.error(error);
feedContainer.textContent = "Error loading RSS feed.";
});
</script>
</body>
</html>

and said

I've added a light gray background to the body and a white container with a subtle box-shadow. The feed item titles now change color on hover, and I've centered the title of the page. The maximum width of the container is now set to 800px to allow for more whitespace on larger screens. Finally, I've added target="_blank" to the link element so that clicking on a feed item will open it in a new tab.

As you can see it still had a pretty basic look but we were starting to get somewhere.

As usual I have added v2 of this to download here, just change the feed domain if you want to use it.

Asylum · Feb 19, 2023

Seeing that it said it added basic styling to V2 i decided to ask it this

can you add some more complex styling to this?

And got this reply

Sure! Here's an updated version of the script with more complex styling:

and this code outputed.

<!DOCTYPE html>
<html>
<head>
<title>RSS Feed Reader</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Basic styles for mobile responsiveness */
body {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
margin: 0;
padding: 0;
background-color: #f7f7f7;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 40px;
background-color: #fff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
border-radius: 5px;
}
.item {
padding: 20px 0;
border-bottom: 1px solid #e6e6e6;
transition: background-color 0.3s ease;
}
.item:last-of-type {
border-bottom: none;
}
.title {
font-weight: bold;
font-size: 1.2rem;
margin-bottom: 10px;
color: #333;
text-decoration: none;
transition: color 0.3s ease;
}
.title:hover {
color: #1a1a1a;
}
.description {
font-size: 1rem;
color: #333;
line-height: 1.4;
}

/* Styles for mobile responsiveness */
@media (max-width: 600px) {
.container {
max-width: 100%;
padding: 20px;
}
.item {
padding: 10px 0;
}
.title {
font-size: 1.1rem;
margin-bottom: 5px;
}
.description {
font-size: 0.9rem;
line-height: 1.3;
}
}
</style>
</head>
<body>
<div class="container">
<h1 style="text-align:center; margin-bottom: 30px;">RSS Feed Reader</h1>
<div id="rss-feed"></div>
</div>
<script>
// JavaScript to fetch and parse RSS feed
const feedUrl = "https://nuclearcoffee.org/feed";
const feedContainer = document.getElementById("rss-feed");

fetch(feedUrl)
.then(response => response.text())
.then(xml => {
const parser = new DOMParser();
const doc = parser.parseFromString(xml, "application/xml");
const items = doc.querySelectorAll("item");

let html = "";
items.forEach(item => {
const title = item.querySelector("title").textContent;
const link = item.querySelector("link").textContent;
const description = item.querySelector("description").textContent;

html += `
<div class="item">
<a href="${link}" class="title" target="_blank">${title}</a>
<div class="description">${description}</div>
</div>
`;
});

feedContainer.innerHTML = html;
})
.catch(error => {
console.error(error);
feedContainer.textContent = "Error loading RSS feed.";
});
</script>
</body>
</html>

and said this

I've added more whitespace and increased the padding on the .item class to make each feed item stand out. The border-bottom on each item is now a lighter shade

To be fair I don't really see any difference. but it claims it actually changed some things so i thought I would include this as V4

you can download this version below.

Asylum · Feb 19, 2023

After this is where GPT started to shit out on me, and I had to wind up Frankenstein the last full version of this together with some other code i made it write. (Yes, I will post it) But first I wanted to share some of the things I tried to make it do before. Now for these I won't be posting a downloadable version for them because they didn't wind up working anyways. But I will share the code.

First i asked it

can you make this pull images from the rss feed?

and it tried by saying this

Yes, here's an updated version of the script that pulls images from the RSS feed:

and pushing out this code to me

<!DOCTYPE html>
<html>
<head>
<title>RSS Feed Reader</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Basic styles for mobile responsiveness */
body {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
margin: 0;
padding: 0;
background-color: #f7f7f7;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 40px;
background-color: #fff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
border-radius: 5px;
}
.item {
padding: 20px 0;
border-bottom: 1px solid #e6e6e6;
transition: background-color 0.3s ease;
}
.item:last-of-type {
border-bottom: none;
}
.title {
font-weight: bold;
font-size: 1.2rem;
margin-bottom: 10px;
color: #333;
text-decoration: none;
transition: color 0.3s ease;
}
.title:hover {
color: #1a1a1a;
}
.description {
font-size: 1rem;
color: #333;
line-height: 1.4;
}
.image {
max-width: 100%;
height: auto;
margin-bottom: 10px;
}

/* Styles for mobile responsiveness */
@media (max-width: 600px) {
.container {
max-width: 100%;
padding: 20px;
}
.item {
padding: 10px 0;
}
.title {
font-size: 1.1rem;
margin-bottom: 5px;
}
.description {
font-size: 0.9rem;
line-height: 1.3;
}
}
</style>
</head>
<body>
<div class="container">
<h1 style="text-align:center; margin-bottom: 30px;">RSS Feed Reader</h1>
<div id="rss-feed"></div>
</div>
<script>
// JavaScript to fetch and parse RSS feed
const feedUrl = "https://example.com/feed.xml";
const feedContainer = document.getElementById("rss-feed");

fetch(feedUrl)
.then(response => response.text())
.then(xml => {
const parser = new DOMParser();
const doc = parser.parseFromString(xml, "application/xml");
const items = doc.querySelectorAll("item");

let html = "";
items.forEach(item => {
const title = item.querySelector("title").textContent;
const link = item.querySelector("link").textContent;
const description = item.querySelector("description").textContent;
const image = item.querySelector("enclosure[type^='image/']")?.getAttribute("u...st in this conversation I had going with it).

Asylum · Feb 19, 2023

The final version of this is something I put together from other pieces of code that I made GPT write. Sadly, by this point I was sort of drunk and don't have the logs between the bot and I but I am willing to share it for download.

I would up adding a blue banner across the top for the title of the page and above that added a simple menu system.

and on the footer, I added a red line which I will eventually change to the shade of blue that the header is, so it matches.

this version is what I think is version 3 with the added things I put in from other projects.

At the time of writing this I did have a couple of ideas of things i could try and make it do to make it just a bit better so I doubt v4 will be the last version of the single feed reader.

Search

RSS feed reader single feed

Asylum

New member

Asylum

New member

Attachments

Asylum

New member

Attachments

Asylum

New member

Attachments

Asylum

New member

Asylum

New member

Attachments