Miscellaneous Projects
Geo-Aware Countdown Timer
This project is a dynamic countdown timer that automatically detects the user's current timezone using the TimeZoneDB API and HTML5 Geolocation. Users can input a time (in seconds), start the countdown, and receive an audio alert when the timer reaches zero.
Features
User-set countdown with formatted timer display (MM:SS)
Real-time timezone detection based on user's geographic location
Custom sound alerts using Howler.js for a smooth audio experience
Timer stop and reset buttons to control the session
Tech Stack
HTML, CSS, JavaScript
TimeZone DB API for timezone data
Howler.js for sound control
Learning Goals
This project helped me practice:
Handling asynchronous JavaScript (via async/await)
Making API requests with fetch()
Using geolocation data in web applications
Managing timers and audio playback
Structuring a simple yet interactive user interface
Geo-Timezone Weather App
This app combines geolocation-based timezone detection with a city-searchable weather forecast using the OpenWeatherMap API. Users can check the current weather and a 3-day forecast (at 12:00 PM local time) for any city in the world.
Features
Detects user's time zone via GPS and TimeZoneDB
City or city,state input for precise weather info
Converts temperature to Celsius and Fahrenheit
Displays weather condition icons and short descriptions
Shows 3-day forecast at midday
Technologies
HTML, CSS, JavaScript
OpenWeatherMap API
TimeZoneDB API
Learning Goals
Parsing and displaying real-time API data
Filtering and displaying forecast times
Working with geolocation and timezones
Enhancing UX with dynamic, user-friendly feedback
Topographic Map Viewer App
This is a simple React-based topographic map viewer that uses **Leaflet** and the OpenTopoMap** tile layer. It automatically detects your location using the browser's **Geolocation API** and centers the map on your current position.
Features
Detects your location with `navigator.geolocation`
Renders a topographic map using OpenTopoMap tiles
Displays a marker at your current location
Popup tooltip: "You are here!"
Responsive full-page map view
Technologies Used
[React](https://reactjs.org/)
[Leaflet](https://leafletjs.com/)
[React-Leaflet](https://react-leaflet.js.org/)
OpenTopoMap tile service
Learning Goals
Use of fetching the user location
Use of OpenTopoMap graphics
Use of Leaflet