Article Of The Day
By
@Visott
- 4 Devlogs
- 15 Total hours
A random article generator! One day, one article.
Ship #1
Pending review
Article Of The Day V1.0
This website generates one random article a day! You can re-roll for another article if you don’t like the current one. You can also select different topics based on your interests.
Features:
- Custom Coffee Bean Cursor
- Satisfying Buttons
- Topic/Category Selectors
- Randomly Generated Article
Implementing RSS feeds in order to parse the articles onto the site was quiet challenging, but I learned a lot about Javascript, RSS Parser, and RSS Feeds in the process. 
This website works on all devices; just click on the link and you should be good to go! 
2h 10m 44s logged
8h 3m 30s logged
Devlog 3
I have expanded support from Wikipedia to more sources like Wired, BBC, The Verge, etc… It took a while because I had to learn how to use npm and the rss-parser library.
Bugs 🐛
- Confused between which variable to use for selecting the articles (i.e. sources vs feed vs article in article.js)
Changes 
- I added rss links for each source
- Drafted a README file
- Learned how to use async functions to reduce load times
- Learned how to use Vercel CLI to test backend api code.
- Learned type module for Javascript.
- Also learned that I need to use `` instead of “” when using/embedding variables like
response.status. - Also spent a lot of time trying to make the category feature work where users can which categories they want for the random articles.
- Choosing which CSS selectors to use so that the category buttons have the proper hover and active transitions
Future Plans
- Add a link to the project’s github.
- More sources/categories!
1h 10m 56s logged
Devlog #2
I added an open article button which opens the random article on click. I learned how to implement this through Javascript by using article.content_urls.desktop.page; to get the article url and then open the article on click using window.open(url, "_blank");, and an event listener on the open article button.
I also added the current date at the top of the title using date.toLocaleDateString.
I styled the buttons to slightly glow on hover and sink into the screen (inset box-shadow) on click.
3h 10m 36s logged
Devlog #1
I started with Astro but after learning astro for about 1 hour, I realized that it was overkill for what I was trying to do. So instead I swapped to HTML, CSS, and JS (although, I’ll probably try programming it in Astro when I get the html/css/js version to work).
I spent around 15 minutes looking for colors, fonts, and a custom cursor icon for the site. I settled with the cute coffee bean icon which you can see in the image!
The rest of the time was spent adding the styles to styles.css, setting up the HTML to work with the Javascript code, and implementing API fetch functions. The Javascript kinda works, but I haven’t linked it with the button yet, so it only loads the article on page refresh. Also, the JS only works with Wikipedia API for now, but more sites are going to be added very soon.