Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/himanshukr7/infocus_news
A short news Application fetching news from API ( html,css,js)
https://github.com/himanshukr7/infocus_news
Last synced: 1 day ago
JSON representation
A short news Application fetching news from API ( html,css,js)
- Host: GitHub
- URL: https://github.com/himanshukr7/infocus_news
- Owner: himanshuKr7
- Created: 2024-06-30T18:57:40.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-08-11T02:14:30.000Z (3 months ago)
- Last Synced: 2024-08-11T04:12:17.048Z (3 months ago)
- Language: CSS
- Homepage:
- Size: 43.9 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
# InFocus News
## Introduction
**InFocus News** is a responsive web application that provides the latest news updates. The news is fetched dynamically from the Open News API, ensuring that users receive the most current information.
## Features
- **Responsive Design**: Compatible with various devices, including desktops, tablets, and mobile phones.
- **Dynamic Content**: News articles are fetched and displayed in real-time using the Open News API.
- **Search Functionality**: Users can search for news articles based on keywords.
- **Category Filtering**: News can be filtered by categories such as Technology, Sports, Business, and more.
## Technologies Used
- **HTML**: For structuring the web pages.
- **CSS**: For styling the web pages.
- **JavaScript**: For fetching and displaying news articles dynamically.
- **Open News API**: For retrieving the latest news articles.
## Getting Started
To get a local copy of InFocus News up and running, follow these steps:
### Installation
1. **Clone the repository:**
```sh
git clone https://github.com/himanshuKr7/infocus-news.git
```
2. **Navigate to the project directory:**
```sh
cd infocus-news
```
3. **Open the `index.html` file in your preferred web browser:**
```sh
open index.html
```
## API Integration
InFocus News uses the Open News API to fetch news articles. You need to sign up for an API key at [Open News API](https://newsapi.org/) and replace the placeholder in the JavaScript code with your actual API key.
### Example:
```javascript
const apiKey = 'YOUR_API_KEY_HERE';
const apiUrl = `https://newsapi.org/v2/top-headlines?country=us&apiKey=${apiKey}`;
```
## File Structure
```
infocus-news/
├── style.css
├── script.js
├── index.html
├── README.md
```
- **css/**: Contains all the CSS files.
- **js/**: Contains all the JavaScript files.
- **index.html**: The main HTML file for the webpage.
- **README.md**: The README file for the project.
## Usage
1. **Open the `index.html` file in a web browser:**
```sh
open index.html
```
2. **Explore the latest news articles**: Use the navigation bar to filter news by category or use the search bar to find specific news articles.
## Contributing
Contributions are welcome! Please follow these steps to contribute:
## Screenshots
## License
Distributed under the MIT License. See `LICENSE` for more information.
---
Thank you for using InFocus News! If you have any questions or feedback, please don't hesitate to reach out.