top of page

Gallery

Here you’ll find a selection of my work. Explore my projects to learn more about what I do.

Geo-Aware Countdown Timer
Click for my Github Repository 
Click for the Live Demo on Codepen

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

Click for my Github Repository 

 

Click for the Live Demo on  Codepen

​

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

Cash Register App
Click for my Github Repository
Click for the Live Demo on Codepen

This JavaScript-based app simulates a basic cash register system. It calculates and returns the correct change based on the price of an item, cash received, and the current contents of the cash drawer.

How It Works

  • Enter a price and amount paid.

  • Click Purchase to see:

  • The correct change due using the largest denominations first.

  • The status of the register: OPEN, CLOSED, or INSUFFICIENT_FUNDS.

 Example Statuses

  • OPEN: Enough money to return change; drawer still has cash left.

  • CLOSED: Exact change returned; drawer is now empty.

  • INSUFFICIENT_FUNDS: Not enough money in the drawer to return correct change.

Features

  • Calculates change down to the penny

  • Handles rounding issues with .toFixed(2)

  • Real-time drawer update with each transaction

  • Status messages displayed clearly to the user

 Learning Highlights

  • DOM manipulation and event listeners

  • Floating-point precision handling in JS

  • Array iteration with .reduce(), .map(), .push(), and more

  • Conditional logic for financial transaction

topo.png
React Topography Map App
Click for my Github Repository
Click for the Live Demo on Replit

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

todolist.png
Project Name: React To-Do List
Click for my Github Repository
Click for the Live Demo on Codepen

 React To-Do List with UTC Time

This is a simple **React-based To-Do List App** built with core React features like `useState` and `useEffect`. It allows users to add, mark as complete, and delete tasks all while displaying the current UTC time.

​

Features

  •  Add tasks to your to-do list

  • Click on a task to mark it as **complete** or **incomplete**

  • Remove tasks from the list

  • Displays the **current UTC time** using JavaScript's `Date` object

  • Basic inline styling with orange background for a clean visual

​

Key Concepts Used

  •  **React Hooks**:  

  • `useState` for managing state (tasks, input field, and time)  

  •   `useEffect` to fetch and set UTC time when the app load

  •  **Functional Components**:

  • `App` – handles to-do logic and rendering

  • `DateUTC` – displays current UTC time using `Date().toUTCString()`

  • **Unique Task IDs**:

  •   Tasks use `Date.now()` as a unique `id` to differentiate list items

  • **Pure Frontend**:

  •   No database, no API – runs fully in the browser (ideal for learning or sandboxing)​

​

KamikazeScreenShot.png
Python Kamikaze Game
Click for my Github Repository
Download the .exe file to play the game

Kamikaze Run - Pacific Theater Game

A mini arcade-style Python game inspired by the WWII Pacific Theater. You play as a Kamikaze pilot aiming to strike a moving US battleship while dodging flak (anti-aircraft fire). Built using the **Turtle graphics module** for visual simplicity, this game includes moving enemies, animations, and anti-war messaging.

 

Game Concept

  • **Player Role:** Kamikaze pilot flying a special attack aircraft  

  • **Objective:** Reach and strike the enemy **battleship**  

  • **Obstacles:** Avoid moving **flak shells** (anti-aircraft fire)  

  • **Message:** Upon success or failure, the game displays an **anti-war quote** in both English and Japanese to reflect the futility of war.

​

Features

  • Player-controlled airplane with **Up**, **Down**, and **Right** arrow key movement

  • **Random flak shells** that move toward the aircraft

  • Background and sprite graphics (GIF format)

  • Displays **anti-war message** based on outcome:

  • If you hit the ship: _"Nobody is a winner at war 戦争に勝者はいない"_

  • If you're hit by flak: _"Attack failed! 攻撃は失敗した！"_

​​

classic.png
Classic Masterpieces Jukebox
Click for my Github Repository
Click for the Live Demo on Codepen

Classic Masterpieces Jukebox 

A minimalist web-based jukebox that plays short classical music samples with visually rich background art. Keyboard-friendly and ideal for relaxing while appreciating timeless music.

Features

  • Play classical music samples from famous composers like Beethoven, Bach, and Britten.

  • Dynamic background image changes for each track to match the music's mood.

  • Keyboard support: Press keys Q, W, E, A, S, D to play tracks.

  • Responsive layout using Bootstrap 4.5.

  • Elegant aesthetic using wood texture and soft classical font (EB Garamond).

KeyTitleComposerDescription

  • Q Prelude in E MajorLudwig Van BeethovenMajestic and Uplifting - the Classic Ideal

  • W Air on the G StringJohann Sebastian BachQuiet, Calm and Romantic as the Evening Garden

  • E Sleepers AwakeJohann Sebastian BachSweet and Comfortable like Cotton Candy

  • A Little Suite (Anna Magdalena Notebook)Benjamin BrittenFeelings Like Standing in Front of Autumn Lake

  • S Toccata and Fugue in D MinorJohann Sebastian BachLike Watching a Dynamic Change of Emotion

  • D Jesu, Joy of Man's DesiringJohann Sebastian BachReligious and Spiritual - and Joy

bottom of page