Skip to content

Commit 436d10c

Browse files
thegeek36thegeek36
committed
Added News app project
1 parent 5d30e18 commit 436d10c

File tree

8 files changed

+343
-5
lines changed

8 files changed

+343
-5
lines changed

‎Web Scraping and API Projects/3-news_app_using_news_api/.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
config.js
2+
3+

‎Web Scraping and API Projects/3-news_app_using_news_api/README.md

+55-5
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@
22

33
## Description
44

5-
A brief description of the news app using news api project.
5+
This project is a simple web application that fetches and displays news articles from the News API. Users can browse news articles by category and search for specific topics of interest.
66

77
## Features
88

9-
- Feature 1
10-
- Feature 2
11-
- Feature 3
9+
- Browse news articles by category (e.g., business, technology, entertainment).
10+
- Search for news articles based on keywords.
11+
- Responsive design for desktop and mobile devices.
1212

1313
## Technologies Used
1414

@@ -18,4 +18,54 @@ A brief description of the news app using news api project.
1818

1919
## Setup
2020

21-
Instructions to set up and run the project.
21+
To set up your News App using News API project from your GitHub repository, follow these steps:
22+
23+
### Cloning the Repository
24+
25+
1. Open your terminal or command prompt.
26+
27+
2. Clone the repository using the following command:
28+
```bash
29+
git clone https://github.com/thegeek36/ULTIMATE-JAVASCRIPT-PROJECT.git
30+
```
31+
32+
3. Navigate to the specific project directory:
33+
```bash
34+
cd ULTIMATE-JAVASCRIPT-PROJECT/Web Scraping and API Projects/3-news_app_using_news_api
35+
```
36+
37+
### Setting Up and Running the Project
38+
39+
1. Once you're in the project directory (`3-news_app_using_news_api`), open the `index.html` file in your preferred web browser.
40+
41+
2. If you haven't already, obtain your News API key by following the steps mentioned earlier in the README file (`config.js` setup).
42+
43+
3. Create a `config.js` file in the project directory (`3-news_app_using_news_api`).
44+
45+
4. Add your News API key to `config.js` as shown:
46+
```javascript
47+
const apiKey = 'YOUR_API_KEY_HERE';
48+
export default apiKey;
49+
```
50+
51+
Replace `'YOUR_API_KEY_HERE'` with your actual News API key.
52+
53+
5. Save `config.js`.
54+
55+
6. Ensure that `config.js` is added to your `.gitignore` file to avoid committing your API key to GitHub.
56+
57+
### Using the News App
58+
59+
- Open `index.html` in your browser.
60+
- Select a category from the navigation menu to view category-specific news.
61+
- Use the search bar to search for news articles by keywords.
62+
63+
### Additional Notes
64+
65+
- Make sure your browser supports JavaScript and that you have an active internet connection to fetch news articles from the News API.
66+
- Customize and enhance the project as needed, considering the features and technologies already listed in the project description.
67+
68+
69+
## Contributing
70+
71+
Contributions are welcome! Fork the repository and submit a pull request with your enhancements.

‎Web Scraping and API Projects/3-news_app_using_news_api/assets/Logo.png

100 KB
Loading

‎Web Scraping and API Projects/3-news_app_using_news_api/assets/favicon.ico

31.6 KB
Binary file not shown.

‎Web Scraping and API Projects/3-news_app_using_news_api/index.html

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Samachar:Daily News Updates</title>
7+
<link rel="shortcut icon" type="image/x-icon" href="assets/favicon.ico">
8+
<link rel="stylesheet" href="style.css">
9+
10+
</head>
11+
<body>
12+
13+
<!-- nav bar -->
14+
<nav>
15+
<div class="main-nav container flex">
16+
<a href="#" onclick="reload()" class="company-logo">
17+
<img src="./assets/logo.png" alt="company logo">
18+
</a>
19+
<div class="nav-links">
20+
<ul class="flex">
21+
<li class="hover-link nav-item" id="ipl" onclick="onNavItemClick('ipl')">IPL</li>
22+
<li class="hover-link nav-item" id="finance" onclick="onNavItemClick('finance')">Finance</li>
23+
<li class="hover-link nav-item" id="politics" onclick="onNavItemClick('politics')">Politics</li>
24+
<li class="hover-link nav-item" id="politics" onclick="onNavItemClick('odisha')">Odisha</li>
25+
</ul>
26+
</div>
27+
<div class="search-bar flex">
28+
<input id="search-text" type="text" class="news-input" placeholder="e.g. Science">
29+
<button id="search-button" class="search-button">Search</button>
30+
</div>
31+
</div>
32+
</nav>
33+
34+
<main>
35+
<div class="cards-container container flex" id="cards-container">
36+
37+
</div>
38+
</main>
39+
40+
<template id="template-news-card">
41+
<div class="card">
42+
<div class="card-header">
43+
<img src="https://via.placeholder.com/400x200" alt="news-image" id="news-img">
44+
</div>
45+
<div class="card-content">
46+
<h3 id="news-title">This is the Title</h3>
47+
<h6 class="news-source" id="news-source">End Gadget 26/08/2023</h6>
48+
<p class="news-desc" id="news-desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Recusandae saepe quis voluptatum quisquam vitae doloremque facilis molestias quae ratione cumque!</p>
49+
</div>
50+
</div>
51+
</template>
52+
<footer>
53+
Made By Priyanshu Panda with <a href="www.newsapi.org">News Api.</a>
54+
</footer>
55+
56+
<script type="module" src="script.js"></script>
57+
</body>
58+
</html>

‎Web Scraping and API Projects/3-news_app_using_news_api/script.js

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
// app.js or main.js
2+
import API_KEY from './config.js';
3+
4+
console.log(API_KEY); // Use the API key in your application
5+
6+
const url = "https://newsapi.org/v2/everything?q=";
7+
8+
9+
window.addEventListener('load',() => fetchNews("India"));
10+
11+
async function fetchNews (query){
12+
const res = await fetch(`${url}${query}&apiKey=${API_KEY}`);
13+
const data = await res.json();
14+
//console.log(data);
15+
bindData(data.articles);
16+
17+
}
18+
19+
function bindData(articles)
20+
{
21+
const cardsContainer = document.getElementById('cards-container');
22+
const newsCardTemplate = document.getElementById('template-news-card');
23+
cardsContainer.innerHTML = '';
24+
25+
articles.forEach((article) => {
26+
if (!article.urlToImage) return;
27+
const cardClone = newsCardTemplate.content.cloneNode(true);
28+
fillDataInCard(cardClone, article);
29+
cardsContainer.appendChild(cardClone);
30+
});
31+
}
32+
33+
function fillDataInCard(cardClone, article) {
34+
const newsImg = cardClone.querySelector("#news-img");
35+
const newsTitle = cardClone.querySelector("#news-title");
36+
const newsSource = cardClone.querySelector("#news-source");
37+
const newsDesc = cardClone.querySelector("#news-desc");
38+
39+
newsImg.src = article.urlToImage;
40+
newsTitle.innerHTML = article.title;
41+
newsDesc.innerHTML = article.description;
42+
43+
const date = new Date(article.publishedAt).toLocaleString("en-US", {
44+
timeZone: "Asia/Jakarta",
45+
});
46+
47+
newsSource.innerHTML = `${article.source.name} · ${date}`;
48+
49+
cardClone.firstElementChild.addEventListener("click", () => {
50+
window.open(article.url, "_blank");
51+
});
52+
}
53+
54+
let curSelectedNav = null;
55+
function onNavItemClick(id) {
56+
fetchNews(id);
57+
const navItem = document.getElementById(id);
58+
curSelectedNav?.classList.remove("active");
59+
curSelectedNav = navItem;
60+
curSelectedNav.classList.add("active");
61+
}
62+
63+
const searchButton = document.getElementById("search-button");
64+
const searchText = document.getElementById("search-text");
65+
66+
searchButton.addEventListener("click", () => {
67+
const query = searchText.value;
68+
if (!query) return;
69+
fetchNews(query);
70+
curSelectedNav?.classList.remove("active");
71+
curSelectedNav = null;
72+
});

‎Web Scraping and API Projects/3-news_app_using_news_api/style.css

+155
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500&family=Roboto:wght@500&display=swap");
2+
3+
* {
4+
padding: 0;
5+
margin: 0;
6+
box-sizing: border-box;
7+
}
8+
9+
:root {
10+
--primary-text-color: #183b56;
11+
--secondary-text-color: #577592;
12+
--accent-color: #2294ed;
13+
--accent-color-dark: #1d69a3;
14+
}
15+
16+
body {
17+
font-family: "Poppins", sans-serif;
18+
color: var(--primary-text-color);
19+
}
20+
21+
p {
22+
font-family: "Roboto", sans-serif;
23+
color: var(--secondary-text-color);
24+
line-height: 1.4rem;
25+
}
26+
27+
a {
28+
text-decoration: none;
29+
}
30+
31+
ul {
32+
list-style: none;
33+
}
34+
35+
.flex {
36+
display: flex;
37+
align-items: center;
38+
}
39+
40+
.container {
41+
max-width: 1180px;
42+
margin-inline: auto;
43+
overflow: hidden;
44+
}
45+
46+
nav {
47+
background-color: #bcf199;
48+
box-shadow: 0 0 4px #bbd0e2;
49+
position: fixed;
50+
top: 0;
51+
z-index: 99;
52+
left: 0;
53+
right: 0;
54+
}
55+
56+
.main-nav {
57+
justify-content: space-between;
58+
padding-block: 8px;
59+
}
60+
61+
.company-logo img {
62+
width: 120px;
63+
}
64+
65+
.nav-links ul {
66+
gap: 16px;
67+
}
68+
69+
.hover-link {
70+
cursor: pointer;
71+
}
72+
73+
.hover-link:hover {
74+
color: var(--secondary-text-color);
75+
}
76+
77+
.hover-link:active {
78+
color: red;
79+
}
80+
81+
.nav-item.active {
82+
color: var(--accent-color);
83+
}
84+
85+
.search-bar {
86+
height: 32px;
87+
gap: 8px;
88+
}
89+
90+
.news-input {
91+
width: 200px;
92+
height: 100%;
93+
padding-inline: 12px;
94+
border-radius: 4px;
95+
border: 2px solid #bbd0e2;
96+
font-family: "Roboto", sans-serif;
97+
}
98+
99+
.search-button {
100+
background-color: var(--accent-color);
101+
color: white;
102+
padding: 8px 24px;
103+
border: none;
104+
border-radius: 4px;
105+
cursor: pointer;
106+
font-family: "Roboto", sans-serif;
107+
}
108+
109+
.search-button:hover {
110+
background-color: var(--accent-color-dark);
111+
}
112+
113+
main {
114+
padding-block: 20px;
115+
margin-top: 80px;
116+
}
117+
118+
.cards-container {
119+
justify-content: space-between;
120+
flex-wrap: wrap;
121+
row-gap: 20px;
122+
align-items: start;
123+
}
124+
125+
.card {
126+
width: 360px;
127+
min-height: 400px;
128+
box-shadow: 0 0 4px #d4ecff;
129+
border-radius: 4px;
130+
cursor: pointer;
131+
padding-top: 40px;
132+
background-color: #fff;
133+
overflow: hidden;
134+
transition: all 0.3s ease;
135+
}
136+
137+
.card:hover {
138+
box-shadow: 1px 1px 8px #d4ecff;
139+
background-color: #ffffff;
140+
transform: translateY(-2px);
141+
}
142+
143+
.card-header img {
144+
width: 100%;
145+
height: 180px;
146+
object-fit: cover;
147+
}
148+
149+
.card-content {
150+
padding: 12px;
151+
}
152+
153+
.news-source {
154+
margin-block: 12px;
155+
}

‎Web Scraping and API Projects/3-news_app_using_news_api/utils.css

Whitespace-only changes.

0 commit comments

Comments
 (0)