Rest-Countries-Dashboard

KO | EN

gitlite — search

#javascript #hacktoberfest #ai #typescript #llm #go #golang #rust #deep-learning #linux #nodejs #windows #kubernetes #security

Rest-Countries-Dashboard

(★ 9)

🌍 REST Countries API web app featuring dark/light theme switcher. Browse, search & filter 250+ countries with detailed views and border navigation. Built with vanilla HTML, CSS & JavaScript. Responsive design, API integration with fallback, and smooth theme transitions.

Rest-Countries-Dashboard 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Frontend Mentor - REST Countries API with color theme switcher

This is a completed solution for the [REST Countries API with color theme switcher challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/rest-countries-api-with-color-theme-switcher-5cacc469fec04111f7b848ca).

## Overview

### The challenge

Users should be able to:

- See all countries from the API on the homepage
- Search for a country using an `input` field
- Filter countries by region
- Click on a country to see more detailed information on a separate page
- Click through to the border countries on the detail page
- Toggle the color scheme between light and dark mode

![Design preview for the REST Countries API with color theme switcher coding challenge](https://raw.githubusercontent.com/Ayokanmi-Adejola/Rest-Countries-Dashboard/main/preview.jpg)

## ✨ Features Implemented

- ✅ **View all countries** - Browse through all countries from the REST Countries API
- ✅ **Search functionality** - Search for countries by name or capital city
- ✅ **Region filtering** - Filter countries by region (Africa, Americas, Asia, Europe, Oceania)
- ✅ **Country details** - Click on any country to view detailed information in a modal
- ✅ **Border navigation** - Click on border countries to navigate between them
- ✅ **Theme switcher** - Toggle between light and dark modes with persistence
- ✅ **Responsive design** - Optimized for mobile (375px) and desktop (1440px)
- ✅ **API integration** - Uses REST Countries API with automatic fallback to local data

## 🛠 Built With

- **HTML5** - Semantic markup
- **CSS3** - Custom properties, Grid, Flexbox
- **Vanilla JavaScript** - ES6+ features, Fetch API
- **Font Awesome** - Icons for UI elements
- **Nunito Sans** - Google Fonts typography
- **REST Countries API** - Live country data

## 📁 Project Structure

```
├── index.html          # Main application page
├── styles.css          # Complete styling with theme system
├── script.js           # Application functionality
├── data.json           # Fallback country data
├── test.html           # Testing page for functionality
├── PROJECT_README.md   # Detailed technical documentation
└── design/             # Original design files
```

## 🎨 Design Implementation

- **Mobile & Desktop layouts** - Responsive design that adapts to all screen sizes
- **Light & Dark themes** - Complete theme system with smooth transitions
- **Typography** - Nunito Sans font with correct weights (300, 600, 800)
- **Color scheme** - Exact colors from the style guide
- **Spacing & Layout** - Carefully matched to design specifications

## 🚀 How to Use

1. **Open the application**: Simply open `index.html` in any modern web browser
2. **Browse countries**: Scroll through the responsive grid of country cards
3. **Search**: Use the search bar to find countries by name or capital
4. **Filter**: Select a region from the dropdown to filter countries
5. **View details**: Click any country card to see detailed information
6. **Navigate borders**: Click border country buttons to explore neighboring countries
7. **Toggle theme**: Click the theme button in the header to switch between light/dark modes

## 🔧 Technical Highlights

- **No build process** - Pure HTML, CSS, and JavaScript
- **Progressive enhancement** - Works without JavaScript for basic functionality
- **API resilience** - Automatic fallback to local data when API is unavailable
- **Performance optimized** - Lazy loading images, efficient filtering
- **Accessibility focused** - Keyboard navigation, ARIA labels, high contrast
- **Cross-browser compatible** - Works in all modern browsers

## API Integration

The application uses the [REST Countries API](https://restcountries.com/v2/all) to fetch country data. If the API is unavailable, it automatically falls back to the local `data.json` file.

### Data Structure
Each country object includes:
- Basic info: name, capital, population, region, subregion
- Geographic: borders, area, coordinates
- Cultural: languages, currencies, native name
- Visual: flag images
- Administrative: top-level domains, calling codes

## Browser Compatibility

- Modern browsers with ES6+ support
- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+

## 🧪 Testing

A test page (`test.html`) is included to verify:
- API connectivity
- Local data fallback
- Theme functionality
- Browser feature support

## 📱 Responsive Breakpoints

- **Mobile**: 375px and up
- **Tablet**: 768px and up
- **Desktop**: 1440px and up

## 🌐 Deployment Options

This project can be easily deployed to any static hosting service:

- **GitHub Pages** - Push to GitHub and enable Pages
- **Vercel** - Drag and drop deployment
- **Netlify** - Connect your repository for automatic deployments
- **Local Server** - Use any local server (Python, Node.js, etc.)

## Author

- Frontend Mentor - [@Ayokanmi-Adejola](https://www.frontendmentor.io/profile/Ayokanmi-Adejola)

Rest-Countries-Dashboard

Rest-Countries-Dashboard 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Rest-Countries-Dashboard

Rest-Countries-Dashboard 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README