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.

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

✨ 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 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