Welcome to yet another exciting tutorial by Coding Artist. Building projects is one of the best ways to learn Javascript. So in today’s tutorial let us expand our javascript knowledge with a fun and easy-to-build project called ‘News App’. To build this project we need HTML, CSS, Javascript, and the news API from newsapi.org.
Video Tutorial:
For a better understanding of how we built the functionality of this project, I would advise you to watch the video below.If you find the video helpful give it a like and subscribe to my YouTube channel where I post new tips, tricks, and tutorials related to HTML, CSS, and Javascript.
Project Folder Structure:
Let’s build the project folder structure before we begin writing the code. We create a project folder called ‘News App’. Inside this folder, we have index.html, style.css, script.js, and API-key.js.
HTML:
We begin with the HTML Code. First, create a file called – ‘index.html’. Copy the code below and paste it into your HTML file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>News App</title>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="heading-container">
<h4>News Website</h4>
</div>
<div class="options-container"></div>
<div class="container"></div>
<!-- API Key -->
<script src="api-key.js"></script>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
Next, we style our list using CSS. For this copy, the code provided to you below and paste it into your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #f3f3f3;
}
img {
width: 100%;
height: 30vh;
object-fit: cover;
}
.heading-container {
background-color: #cb202d;
color: #ffffff;
font-size: 2.5em;
padding: 0.8em 0;
position: fixed;
top: 0;
width: 100%;
text-align: center;
box-shadow: 0 10px 50px 0 rgba(2, 0, 31, 0.3);
z-index: 1;
}
.heading-container h4 {
font-weight: 600;
font-size: 40px;
letter-spacing: 5px;
}
.options-container {
margin: 10em 0 2em 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1em;
text-align: center;
}
.option {
background-color: #d5d5d5;
border: none;
cursor: pointer;
padding: 0.8em 1.5em;
border-radius: 0.5em;
border: none;
text-transform: capitalize;
}
.container {
width: 90%;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 1em;
}
.news-card {
display: grid;
position: relative;
grid-template-rows: auto 1fr;
box-shadow: 0 0 15px rgba(85, 85, 85, 0.2);
margin: 1em 0;
border-radius: 15px;
}
.news-card img {
border-radius: 15px 15px 0 0;
}
.news-content {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 1em;
font-size: 15px;
}
.news-title {
font-weight: 600;
color: #0b0028;
}
.news-description {
color: #6f6f6f;
text-align: justify;
margin: 0.8em 0 1em 0;
}
.view-button {
position: relative;
text-decoration: none;
background-color: #cb202d;
color: #ffffff;
width: 7em;
text-align: center;
padding: 0.3em 0.2em;
border-radius: 5px;
}
.active {
background-color: #cb202d;
color: #ffffff;
}
@media only screen and (max-width: 768px) {
.container {
grid-template-columns: repeat(1, 1fr);
}
}
Javascript:
Finally, we add functionality using Javascript. Once again copy the code below and paste it into your script file.
Before moving to actual implementation we store the API key in the file ‘api-key.js’. Then let’s move on to the implementation steps:
- Create initial HTML references and store the API URL in a variable
- Create buttons for options stored in the options array. When the user clicks on any option we append the category to our URL and make another call to get new results.
- Then create the function ‘getNews’ to make a request to the API and get a response with all news articles or an error. In case of an error we display a message and stop code execution else we call the function ‘generateUI’.
- In the ‘generateUI’ function we create a card for each article and append it to our container to display all the news articles.
Â
-
//API Used: http://newsapi.org/s/india-news-api const container = document.querySelector(".container"); const optionsContainer = document.querySelector(".options-container"); // "in" stands for India const country = "in"; const options = [ "general", "entertainment", "health", "science", "sports", "technology", ]; //100 requests per day let requestURL; //Create cards from data const generateUI = (articles) => { for (let item of articles) { let card = document.createElement("div"); card.classList.add("news-card"); card.innerHTML = `<div class="news-image-container"> <img src="${item.urlToImage || "./newspaper.jpg"}" alt="" /> </div> <div class="news-content"> <div class="news-title"> ${item.title} </div> <div class="news-description"> ${item.description || item.content || ""} </div> <a href="${item.url}" target="_blank" class="view-button">Read More</a> </div>`; container.appendChild(card); } }; //News API Call const getNews = async () => { container.innerHTML = ""; let response = await fetch(requestURL); if (!response.ok) { alert("Data unavailable at the moment. Please try again later"); return false; } let data = await response.json(); generateUI(data.articles); }; //Category Selection const selectCategory = (e, category) => { let options = document.querySelectorAll(".option"); options.forEach((element) => { element.classList.remove("active"); }); requestURL = `https://newsapi.org/v2/top-headlines?country=${country}&category=${category}&apiKey=${apiKey}`; e.target.classList.add("active"); getNews(); }; //Options Buttons const createOptions = () => { for (let i of options) { optionsContainer.innerHTML += `<button class="option ${ i == "general" ? "active" : "" }" onclick="selectCategory(event,'${i}')">${i}</button>`; } }; const init = () => { optionsContainer.innerHTML = ""; getNews(); createOptions(); }; window.onload = () => { requestURL = `https://newsapi.org/v2/top-headlines?country=${country}&category=general&apiKey=${apiKey}`; init(); };Â
Go ahead and customize the project the way you like. If you have any queries, suggestions, or feedback comment below. Download the source code by clicking the ‘Download Code’ button below.
Â
it says Data unavailable at the moment
that is true, I have generated my own API key from the website and it’s still not working.
Hi mate, sorted?
Can you suggest how to add a login form for this website ??