/Intro-to-Js-workshop-project

This repo features the final project for the 5 days workshop of the html, css and the javascript, titled as Intro to Javascript help by our organization and the

Primary LanguageCSS

News Web App

A dynamic news web app that fetches news articles using the NewsAPI.org API and displays them in an attractive and responsive manner. The app allows users to select news categories from a navbar and provides pagination for easy navigation through the news articles.

Features

  • Fetches news articles from the NewsAPI.org API.
  • Supports category selection to view news from different categories.
  • Provides pagination for easy navigation through news articles.
  • Responsive design for optimal viewing on various devices.
  • Uses semantic HTML and vanilla JavaScript for enhanced accessibility.

Demo

There is no demo since the developer plan just accepts 100 requests.

Screenshots

Screenshot from 2023-07-20 08-15-02

Screenshot from 2023-07-20 08-15-59

Installation

1. Clone the repository to your local machine:

```bash

git clone https://github.com/your-username/news-web-app.git

```

2. Navigate to the project directory:

```bash

cd news-web-app

```

3. Open `index.html` in your web browser to view the app:

## Configuration

To use this app, you'll need to obtain an API key from NewsAPI.org. Once you have the API key, replace YOUR_API_KEY in script.js with your actual API key.

Usage

  1. Open index.html in your web browser.
  2. The app will display news articles from different categories on the home page.
  3. Click on a category from the navbar to view news articles specific to that category.
  4. Use the pagination buttons at the bottom to navigate through different pages of news articles.

Contributing

Contributions are welcome! If you find any issues or have suggestions for improvement, feel free to open an issue or create a pull request.

License

This project is licensed under the MIT License.

Acknowledgments

  • The app uses the NewsAPI.org API for fetching news articles.

Credits

Feel free to customize the README.md file with additional information specific to your project. Include any necessary instructions for setting up and running the app, as well as any additional features or functionalities you've implemented. You can also add more details about the technologies used and the project structure.

Remember to include relevant links, such as a link to a live demo (if available) and any external resources you used.

If you have any questions or need further assistance, feel free to ask! Happy coding!