How to Make a Dynamic News Application With Basic JavaScript, HTML and CSS
My first experience working with an API was in a second level JavaScript class in College. For the assignment, we were to build a weather application that connected to The Weather Underground API. It’s a free database that lets you gather weather information for just about anywhere in the U.S. It lets you search by either zip code or city name. I thought this was a really cool project because it was the first website I made that was actually kind of useful.
At the end of the semester, we were given the choice to choose what our final project would be. Remembering how much I enjoyed doing the weather application, I decided to do something similar except this time gathering news data instead of weather. I decided to make a news app that connected to the News API.
The News API is a really powerful database that lets you gather JSON data for news articles all over the web. It lets you pick a category and country and it returns the top 20 articles in that category. I used the database to make a news application that displays the top stories in the U.S.
View the working application here
How I made it
I first went the the News Api website and requested an API key. They will ask you a few questions about why you want to use their database and if you meet their requirements then they will give you a free key that you can use for personal use.
After I got the key, I connected to the database. I used the AJAX method to return the data Asynchronously. Once I got the connection set up correctly I tested it to make sure I was actually able to get some data. I used a console.log to display the returned object to the console so that I could see the structure of the object that I got. You can also use tools like Postman to accomplish the same thing. If you look at the finished example that I made and open up the browser console, you can see the objects that were returned from each category. If you click into them you can see all the information that is included in each object.
Once you get the data from the database, then comes the fun part. Figuring out how to display the data in a way that looks nice. I won’t go through every step on how I styled and structured the news content but I will tell you everything I was able to pull/ display from the database.
After selecting a category in the finished app, the whole page reloads. I decided to program it this way so that you didn’t have to navigate to a separate HTML file every time you change the categories. This was much easier than having to re-connect to the database every time you navigate to a new page.
Once you are in the selected category the page displays a headline for each story as well as an image, the first 94 characters of the story followed by ellipses, and the time the story was published relative to the current time. If you click on one of the cards the stories are displayed in, it opens up a new window that navigates to the actual story where it was originally published.
Displaying the images, news source and the headlines was as simple as displaying the information straight from the object. The other bits of information required some extra coding on my end. To display the first 94 characters of the story I just used a simple substring function and told it to only return the first 94 character and add a “…” string to the end.
The last part of displaying the information was also the most tricky part. The object returned the datetime of when the article was published. I wanted it to display how long ago the article was published. I had to return that time and dynamically calculate how long ago the article was published. You can look at my GitHub repo to see exactly how I did this part but I basically just had to use a set of built in JavaScript functions to do the converting for me.
That is essentially all of the pieces you would need to recreate this project. I did throw in some media queries to get the stories to stack on mobile sized screens. I also played around with being able to swipe left or right across the screen to be able to navigate the categories but was never able to get it to work well on the Safari browser. I commented that part out in my code but feel free to play around with it. Comment below if you have any suggestions for getting that to work better.
Landon Hatch is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Web & App Development. The following article relates to (Capstone Project) in the (DGM 2760 Course) and representative of the skills learned.
