Welcome to my World Map Data Site project! This project involves developing an interactive website with an SVG country map, allowing users to click on countries to view capital data such as local time and date, weather, and city population.
PS! Drag the info box around the screen to see each unique weather background! ☀️ 🌧️ ❄️
- Interactive SVG Map: Users can click on countries to view detailed information about the capital city.
- Real-time Data Fetching: Utilizes various APIs to fetch data on country capitals, local time, weather, and population.
- Responsive Design: Frontend crafted using HTML and CSS to ensure a seamless user experience across devices.
- Dynamic Dialogue Box: JavaScript used to create dynamic info box for displaying country information, additionally, enables users to drag the info box across the screen for better usability.
- Dark and Light Mode: JavaScript implemented to switch between dark and light modes, enhancing visual appeal and usability.
- Database Integration: MySQL database on Aiven for storing and retrieving population data.
- Scalable Deployment: Node.js application deployed using Vercel for efficient and scalable hosting.
- Node.js: Backend development to handle API requests and data processing.
- APIs: Fetching data for country capitals, local time, weather.
- MySQL: Database for storing population data, implemented and administered on Aiven.
- HTML & CSS: Frontend development for a responsive and interactive user interface.
- JavaScript: Enhancing user interaction with the dynamic and draggable info box, and provinding a dark/light mode.
- Vercel: Deployment platform for hosting the Node.js application.
- Open the website in your browser.
- Click on any country on the SVG map to view information about its capital city, including local time, weather, and population.
For any questions or suggestions, feel free to reach out to me at [email protected].
Thank you for checking out my World Map Data Site project! I hope you find it useful and informative. 😊 🐇