Countries of the World is a dynamic web application built as my first semester final project for Logic and Programming. The project demonstrates fundamental skills in HTML, CSS, and JavaScript by dynamically fetching data from a local JSON file and updating the UI in real time.
What I Worked On
-
Dynamic Data Loading:
Leveraged the Fetch API to retrieve country data from a localcountries.jsonfile and populate a dropdown menu with country names. -
Flag Display and Name Normalization:
Developed logic to display a country’s flag when selected. Special handling was added to normalize country names (e.g., replacing spaces with underscores) so that the correct flag image is loaded from theflags/folder. -
Population and Area Calculations:
Implemented functions to calculate and display population density, area (in square miles or square kilometers), and world population percentage for each country. -
Interactive User Interface:
Added event listeners on dropdowns, radio buttons, and buttons (e.g., a Wiki link) to dynamically update country details.
Project Outcome
This project solidified my understanding of basic web programming techniques:
- HTML & CSS: Structured a clean, responsive layout enhanced with Bootstrap styling.
- JavaScript: Implemented interactive features and data manipulation techniques to present real-world data dynamically.
- Error Handling: Ensured that missing data or images are handled gracefully with fallbacks.
- User Experience: Created a visually engaging interface that displays country details in a clear and interactive manner.