Country Explorer 🌍

A multi-page web application that lets you explore information about countries from all over the world, add them to your favorites, and get in touch via contact form.

---

Demo

---

Features

• Country Listing — Fetches all countries from the REST Countries API and displays them as cards with flag, name, region, and capital.
• Search / Filter — Instantly filter countries by name without reloading the page.
• Country Details — Click any card to see detailed info: native name, population, region, sub-region, capital, TLD, currencies, and languages.
• Favorites — Add or remove countries from your favorites. Data is persisted using the browser's localStorage. A dedicated page lists all your saved favorites.
• Contact Form — A form with client-side validation (required fields and email format check). Displays a success message on valid submission.
• Loading Spinner — Shown during every external API call.

---

Technologies

• HTML5 — Semantic markup (header, main, nav, section, article, footer)
• CSS3 — Flexbox layout, custom properties, media queries for responsiveness
• Vanilla JavaScript (ES6+) — Fetch API, LocalStorage, DOM manipulation
• REST Countries API — Free, no API key required

---

How to Run

No build step required. Just open the project in your browser:

1. Clone or download this repository.
2. Open index.html in any modern browser (Chrome, Firefox, Edge, etc.).

Tip: For the best experience use Live Server in VS Code.

---

Project Structure

Country-Explorer/
├── index.html          # Home — country listing & search
├── details.html        # Country detail page
├── favorites.html      # Saved favorites
├── contact.html        # Contact form
├── css/
│   └── styles.css      # All styles
└── js/
    ├── api.js          # Fetch helpers + spinner logic
    ├── main.js         # Renders card list & search filter
    ├── details.js      # Renders detail page
    ├── favorites.js    # LocalStorage favorites logic
    └── form.js         # Contact form validation

---

Challenges & Decisions

• Favorite button state — The favorites system needed to work across pages (list → details → favorites page). Keeping minimal data in localStorage (only partial country object) avoided quota issues while still allowing the favorites page to render cards without extra API calls.
• Single CSS file — Instead of one CSS file per page, a single styles.css was used. Sections are clearly commented and page-specific classes (.details-main, .contact-main, etc.) keep rules scoped.
• API field selection — The listing endpoint uses ?fields=name,flags,cca3,region,capital,population to avoid fetching megabytes of unnecessary data for all 250+ countries.