Resilient-Labs · abdirxhmxn · Oct 6, 2025 · Nov 7, 2025
diff --git a/README.md b/README.md
@@ -1,22 +1,77 @@
-# 📊 Project: Complex API 2
+# 📰 News Search with Population Insights
 
-### Goal: Use data returned from one api to make a request to another api and display the data returned
+A web application that combines news search with demographic data visualization. Search for news articles by keyword and country, then see population statistics for that country displayed in an interactive pie chart.
 
-### How to submit your code for review:
+## What It Does
 
-- Fork and clone this repo
-- Create a new branch called answer
-- Checkout answer branch
-- Push to your fork
-- Issue a pull request
-- Your pull request description should contain the following:
-  - (1 to 5 no 3) I completed the challenge
-  - (1 to 5 no 3) I feel good about my code
-  - Anything specific on which you want feedback!
+This project fetches news articles based on your search criteria and simultaneously retrieves population data for the selected country. You'll see:
+
+- Up to 9 recent news articles matching your keyword
+- Total population count for the selected country
+- A pie chart showing the male/female population distribution
+- Clickable article cards with images and descriptions
+
+## Technologies Used
+
+- **HTML/CSS/JavaScript** - Core web technologies
+- **GNews API** - Fetches news articles from around the world
+- **Population.io API** - Retrieves demographic data by country
+- **Chart.js** - Creates the population distribution pie chart
+
+## How to Use
+
+1. Enter a keyword you want to search for (e.g., "technology", "sports", "climate")
+2. Select a country from the dropdown menu
+3. Click the "Search" button
+4. Browse the news results and view the population data
+
+The app currently supports 27 countries including the US, UK, Canada, Japan, Germany, and more.
+
+## Setup Instructions
+
+1. Clone this repository to your local machine
+2. Open `index.html` in your web browser
+3. Start searching for news!
+
+**Note:** The API key is included in the code for demonstration purposes. In a production environment, you'd want to secure this on a backend server.
+
+## Features
+
+- **Responsive Design** - Articles display in a flexible grid layout
+- **External Links** - Click any article to read the full story on the source website
+- **Fresh Data** - Each search clears previous results and generates a new chart
+- **Visual Analytics** - Instantly see gender distribution for your selected country
+
+## Project Structure
 
-Example:
 ```
-I completed the challenge: 5
-I feel good about my code: 4
-I'm not sure if my constructors are setup cleanly...
+├── index.html          # Main HTML structure
+├── css/
+│   └── style.css      # Styling and layout
+└── js/
+    └── main.js        # API calls and DOM manipulation
 ```
+
+## Known Limitations
+
+- The category selector is currently commented out but could be re-enabled
+- Some news sources may not provide images
+- Population API data is for the year 2025
+- Limited to 9 articles per search (API constraint)
+
+## Future Improvements
+
+- Add error handling for failed API requests
+- Implement loading indicators during data fetch
+- Add filtering by news category
+- Include more demographic data visualizations
+- Add pagination for viewing more than 9 articles
+
+## API Credits
+
+- News data provided by [GNews.io](https://gnews.io/)
+- Population data from [Population.io](http://population.io/)
+
+---
+
+Built as a learning project to practice working with multiple APIs and data visualization.
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,46 @@
+* {
+    box-sizing: border-box;
+}
+html{
+    font-size: 62.5%;
+}
+body{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-size: 2rem;
+    background-color: antiquewhite;
+}
+div {
+    display: flex;
+    flex-wrap: wrap;
+    flex: 1;
+    gap: 1em;
+    justify-content: center;
+}
+
+article {
+    width: 30%;
+    border: 2px solid;
+    text-align: center;
+    font-size: 2rem;
+    margin-top: 2%;
+    padding: 2%;
+    background-color: lightgray;
+}
+article h4{
+    height: 50px;
+    margin-top: 0.5%;
+}
+article img {
+    width: 70%;
+}
+
+article a {
+    color: black;
+    text-decoration: none;
+}
+#myChart {
+  width: 300px !important;
+  height: 300px !important;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="ar">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="css/style.css">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+
+    <title>News API Demo</title>
+</head>
+
+<body>
+    <h1>Welcome to my News API</h1>
+    <div class="input">
+        <label for="keyword">Enter a keyword</label>
+        <input type="text" name="keyword" id="keyword">
+        <label for="country">Select a country</label>
+        <select name="country" id="country">
+            <option value="au">Australia</option>
+            <option value="br">Brazil</option>
+            <option value="ca">Canada</option>
+            <option value="cn">China</option>
+            <option value="eg">Egypt</option>
+            <option value="fr">France</option>
+            <option value="de">Germany</option>
+            <option value="gr">Greece</option>
+            <option value="in">India</option>
+            <option value="ie">Ireland</option>
+            <option value="it">Italy</option>
+            <option value="jp">Japan</option>
+            <option value="nl">Netherlands</option>
+            <option value="no">Norway</option>
+            <option value="pk">Pakistan</option>
+            <option value="pe">Peru</option>
+            <option value="ph">Philippines</option>
+            <option value="pt">Portugal</option>
+            <option value="ro">Romania</option>
+            <option value="ru">Russia</option>
+            <option value="sg">Singapore</option>
+            <option value="se">Sweden</option>
+            <option value="ch">Switzerland</option>
+            <option value="tw">Taiwan</option>
+            <option value="ua">Ukraine</option>
+            <option value="gb">United Kingdom</option>
+            <option value="us">United States</option>
+        </select>
+
+        <!-- <label for="category">Select a news category</label>
+        <select id="category">
+            <option value="general">General</option>
+            <option value="world">World</option>
+            <option value="nation">Nation</option>
+            <option value="business">Business</option>
+            <option value="technology">Technology</option>
+            <option value="entertainment">Entertainment</option>
+            <option value="sports">Sports</option>
+            <option value="science">Science</option>
+            <option value="health">Health</option>
+        </select> -->
+
+        <button type="submit">Search</button>
+    </div>
+
+    <h3>Results:</h3>
+    <p></p>
+    <canvas id="myChart"></canvas>
+    <script type="text/javascript" src="js/main.js"></script>
+</body>
+
+</html>