Early mechanical clocks were introduced to Japan by the Europeans in the 16th century. During Japan's isolationist period, from 1641, Japanese clockmakers built upon the technology from these first examples. By the Edo period, these skilled clockmakers were making clocks that followed the Japanese system of time, which divided used 12 Toki (hours), 6 for the period of sunlight, and 6 for the period of dark. These clocks were known as 和時計 (Wadokei) and were quite complex due to the "unfixed" nature of the hours. Day Toki were longer in summer and shorter in winter, and night Toki were shorter in summer and longer in winter.

How did the clock makers address this challenge?

1. Make the hands move faster during certain parts of the day
2. Change the size of the Toki regions

Toki names followed the Chinese Zodiac and Japanese numeral system.

By the early Meiji period, Japan switched to the standard 24 'fixed' hour time system, but one can still find these mechanical masterpieces at clock museums in Tokyo and Matsumoto.

Sources: SEIKO Clock Museum Wadokei explanation Wikipedia EN Wikipedia JA Matsumoto Clock Museum

I built this project to improve my React and general frontend skills. It has a toggle between a western style clock and a 和時計. I adjusted the size of the hours based on the sunrise and sunset times, fetched from an API.

Currently it only tells time in Japan :)

Future enhancements coming.

https://ann-kilzer.github.io/wadokei/

In the project directory, you can run:

Runs the app in the development mode.
Open http://localhost:5173 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

Launches vitest in watch mode

Builds the app for production to the build folder.\

Deploy this project to github pages TODO: under maintenance

• https://github.com/wojtekmaj/react-clock
• https://www.sitepoint.com/react-toggle-switch-reusable-component/
• http://sunrise-sunset.org/api for sunrise / sunset data
• https://coolors.co/00112d-00173b-001c49-00296b-072c70-e772a6-fd5e5e-fdc500-fff8d6 for colors

Thank you to Mercari Japan, who allowed me to work on this project as part of a Hackathon. If you'd like to do creative coding and contribute to an exciting e-commerce platform in Japan, please check out our job listings here. Overseas applicants welcome!