Checklearn FE Main Stage I Assessment

News Blog Application

Introduction

This project is a front-end application designed to enable users to view news from various websites using the News API. The application provides a user-friendly interface with two main pages: one for displaying all news and another for selected news.

Features

Two Pages:
- All News: Displays news articles from multiple sources.
- Selected News: Shows detailed information about a selected news article.
Search Field: Enables users to filter news by making API calls based on search queries.
Navigation Bar: Includes a logo link leading back to the homepage.

Technologies Used

HTML: Structure of the web pages.
CSS: Styling of the web pages.
JavaScript: Functionality and interactivity of the application.
News API: Fetching news data from various sources. https://newsapi.org/docs

Project Structure

/news-blog-app
│
├── index.html
├── selected-news.html
├── styles.css
|── selected-news.css
|── selected-news.js
├── app.js
|── utils.js
└── README.md

index.html: Homepage displaying all news.
selected-news.html: Page displaying selected news details.
styles.css: Styles for the application.
app.js: Main JavaScript file handling functionality.
README.md: Project documentation.

How to Run the App

Clone the Repository

git clone https://github.com/Blazing-Mike/checklearn-assesment-02.git

Navigate to the Project Directory
```
cd checklearn-assesment-02
```
Open index.html in Your Browser
- You can simply double-click on the index.html file or open it using your preferred web server setup.

Usage

Homepage (All News)
- Displays a list of news articles fetched from the News API.
- Use the search field to filter news articles based on keywords.
- Click on a news article to view its details on the Selected News page.
Selected News Page
- Shows detailed information about the selected news article.
- Use the logo link in the navigation bar to return to the homepage.