Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nanith777/geonavigator-countries
GeoNavigator 🌍 provides an interactive interface for users to explore information about countries from around the world, including their population, area, region, subregion, capital, languages, currencies, and neighboring countries.
https://github.com/nanith777/geonavigator-countries
api-rest css html javascript openstreetmap
Last synced: 8 days ago
JSON representation
GeoNavigator 🌍 provides an interactive interface for users to explore information about countries from around the world, including their population, area, region, subregion, capital, languages, currencies, and neighboring countries.
- Host: GitHub
- URL: https://github.com/nanith777/geonavigator-countries
- Owner: NANITH777
- Created: 2024-07-12T12:32:41.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-08-04T18:12:20.000Z (5 months ago)
- Last Synced: 2024-10-30T19:12:15.591Z (about 2 months ago)
- Topics: api-rest, css, html, javascript, openstreetmap
- Language: JavaScript
- Homepage: https://geo-navigator-countries.vercel.app
- Size: 419 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# GeoNavigator 🌍
Welcome to the **GeoNavigator** project! This project provides an interactive interface for users to explore information about countries from around the world, including their population, area, region, subregion, capital, languages, currencies, and neighboring countries. The project features a dark mode, search functionality, region filtering, and an embedded map for each country.
## Table of Contents
- [Demo](#demo)
- [Features](#features)
- [Installation](#installation)
- [Usage](#usage)
- [Technologies Used](#technologies-used)
- [Project Structure](#project-structure)
## Demo
Check out the live demo of the project [here](https://geo-navigator-countries.vercel.app/).
## Features
- **Dark Mode**: Toggle between light and dark themes for a comfortable viewing experience.
- **Search Functionality**: Easily search for countries by name.
- **Region Filtering**: Filter countries by region.
- **Country Details**: View detailed information about each country, including population, area, region, subregion, capital, languages, and currencies.
- **Neighboring Countries**: Discover and navigate to neighboring countries.
- **Embedded Map**: View a map of each country with a marker indicating its location.
## Installation
To get started with this project locally, follow these steps:
1. **Clone the repository**:
```sh
git clone https://github.com/NANITH777/GeoNavigator-Countries.git
```
2. **Navigate to the project directory**:
```sh
cd Countries-API
```
3. **Open the project**:
Open `index.html` in your web browser to view the project.
## Usage
1. **Explore Countries**: Browse through the list of countries, or use the search bar to find a specific country.
2. **Filter by Region**: Use the dropdown menu to filter countries by region.
3. **View Details**: Click on a country to view detailed information, neighboring countries, and an embedded map.
4. **Toggle Dark Mode**: Use the dark mode toggle button to switch between light and dark themes.
## Technologies Used
- **HTML**: Markup language for structuring the web pages.
- **CSS**: Styling language for designing the user interface.
- **JavaScript**: Programming language for adding interactivity.
- **REST Countries API**: External API used to fetch country data.
- **OpenStreetMap**: Used for embedding maps.
## Project Structure
```plaintext
countries-api/
├── index.html
├── country.html
├── style.css
├── script.js
├── country.js
├── world.png
└── README.md
```
- **index.html**: The main HTML file for the home page.
- **country.html**: The HTML file for displaying detailed information about a country.
- **style.css**: The CSS file for styling the project.
- **script.js**: The JavaScript file for handling interactions on the home page.
- **country.js**: The JavaScript file for handling interactions on the country details page.
- **world.png**: The favicon for the project.
- **README.md**: This README file.