World Clock

\n \n

\n Select Timezone:\n \n

\n \n

00:00:00

Loading date...

Loading timezone...

\n \n \n \n \n\n",[161],"0ee59938-31a8-11f0-ae47-569c3dd06744","index-with-map.html","0ee599e2-31a8-11f0-ae47-569c3dd06744",10,["D",1747325832263],"\n\n\n \n \n World Clock with Map\n \n \n \n \n \n \n \n\n\n

World Clock

\n \n

\n Select Timezone:\n \n

\n \n

00:00:00

Loading date...

Loading timezone...

\n \n

\n Map shows approximate location of selected timezone\n

\n \n \n \n \n\n",[168],"48651a12-31a8-11f0-851a-569c3dd06744","README.md","63080908-31a6-11f0-99fd-569c3dd06744",14,["D",1747325928722],"# World Clock\n\nA simple, interactive world clock web application that allows users to view the current time in different timezones around the world.\n\n## Features\n\n- Display current time and date\n- Select from a wide range of timezones organized by region\n- Real-time clock updates\n- Responsive design that works on mobile and desktop\n- Visual feedback when time updates\n\n## Implementation Details\n\nThis project is built with:\n\n- Vanilla JavaScript (no frameworks)\n- Tailwind CSS for styling (via CDN)\n- HTML5\n\nThe application uses the browser's built-in `Date` object and `Intl.DateTimeFormat` API to handle timezone conversions and formatting.\n\n## File Structure\n\n- `index.html` - Main HTML file with the clock display and timezone selector\n- `script.js` - JavaScript to handle the clock functionality and timezone selection\n- `style.css` - Additional CSS styles beyond Tailwind\n- `server.js` - Server-side code to handle HTTP requests and serve the static files\n\n## How It Works\n\n1. The application loads with the user's local timezone selected by default\n2. Users can select a different timezone from the dropdown menu\n3. The clock updates every second to show the current time in the selected timezone\n4. The date and timezone information are also displayed\n\n## Future Improvements\n\n- Add ability to save favorite timezones\n- Add a dark mode toggle\n- Add multiple clocks on the same page for comparison\n\n## Feature Branches\n\n### Map Visualization (In Progress)\n\nA feature branch is in progress to add a map visualization of the selected timezone. This feature:\n\n- Shows an interactive map that highlights the selected timezone location\n- Updates the map view when a different timezone is selected\n- Provides a visual context for the time differences\n\nTo test this feature:\n- Access the application with `?map=true` parameter\n- Or navigate to `/map` endpoint\n\nSee `MAP-FEATURE-README.md` for more details.",[175],"402f7fa4-31a8-11f0-98fc-569c3dd06744","MAP-FEATURE-README.md","402f8094-31a8-11f0-98fc-569c3dd06744",13,["D",1747325914952],"# Map Visualization Feature for World Clock\n\nThis feature branch adds an interactive map visualization to the world clock application. The map shows the approximate location of the selected timezone.\n\n## New Features\n\n- Interactive map that updates when a timezone is selected\n- Visual representation of the current timezone location\n- Responsive design that works on both mobile and desktop\n- Feature flag to enable/disable the map functionality\n\n## Implementation Details\n\nThis feature uses:\n- Leaflet.js for the map visualization\n- A mapping of timezone identifiers to geographic coordinates\n- Responsive layout with grid for desktop and stacked for mobile\n\n## Files Added/Modified\n\n- `index-with-map.html` - HTML file with map component added\n- `script-with-map.js` - JavaScript file with map functionality\n- `server-with-map.js` - Updated server file with feature flag support\n\n## How to Test\n\n1. Access the application with the map feature by adding `?map=true` to the URL\n2. Or navigate to `/map` which will redirect to the map version\n3. Select different timezones from the dropdown\n4. Observe how the map updates to show the approximate location\n5. Test on different screen sizes to ensure responsive behavior\n\n## Implementation Notes\n\n- The map uses OpenStreetMap tiles which don't require an API key\n- Each timezone has an approximate geographic coordinate associated with it\n- When a timezone is selected, the map centers on that location\n- For local time, the map attempts to use the browser's timezone to determine location\n- The map includes a marker with a popup showing the timezone name\n\n## Future Improvements\n\n- Add timezone boundary polygons instead of just center points\n- Add day/night visualization overlay\n- Allow clicking on the map to select the nearest timezone\n- Add search functionality for locations",[182],"pulls","branches",1,"forks","envVars",{"_196":40,"_198":40},"connections",{"_196":40,"_197":40},"count","unfilledCount","emptyCount",{"_18":181,"_20":182,"_116":183,"_118":-5,"_119":66,"_120":184,"_122":123,"_22":233,"_63":40,"_125":94,"_126":186,"_128":26,"_129":-5,"_209":234,"_83":235},{"_18":174,"_20":175,"_116":176,"_118":-5,"_119":66,"_120":177,"_122":123,"_22":230,"_63":121,"_125":94,"_126":179,"_128":26,"_129":-5,"_209":231,"_83":232},{"_18":167,"_20":168,"_116":169,"_118":-5,"_119":66,"_120":170,"_122":123,"_22":227,"_63":40,"_125":94,"_126":172,"_128":26,"_129":-5,"_209":228,"_83":229},{"_18":160,"_20":161,"_116":162,"_118":-5,"_119":66,"_120":163,"_122":123,"_22":224,"_63":121,"_125":94,"_126":165,"_128":26,"_129":-5,"_209":225,"_83":226},{"_18":153,"_20":154,"_116":155,"_118":-5,"_119":66,"_120":156,"_122":123,"_22":221,"_63":40,"_125":136,"_126":158,"_128":26,"_129":-5,"_209":222,"_83":223},{"_18":146,"_20":147,"_116":148,"_118":-5,"_119":66,"_120":149,"_122":123,"_22":218,"_63":40,"_125":136,"_126":151,"_128":26,"_129":-5,"_209":219,"_83":220},{"_18":139,"_20":140,"_116":141,"_118":-5,"_119":66,"_120":142,"_122":123,"_22":215,"_63":40,"_125":136,"_126":144,"_128":26,"_129":-5,"_209":216,"_83":217},{"_18":131,"_20":132,"_116":133,"_118":-5,"_119":66,"_120":64,"_122":123,"_22":212,"_63":135,"_125":136,"_126":137,"_128":26,"_129":-5,"_209":213,"_83":214},{"_18":114,"_20":115,"_116":117,"_118":-5,"_119":66,"_120":121,"_122":123,"_22":208,"_63":40,"_125":94,"_126":127,"_128":26,"_129":-5,"_209":210,"_83":211},["D",1747325079355],"children",[],[115],["D",1747327596954],[],[132],["D",1747326261696],[],[140],["D",1747325102881],[],[147],["D",1747325885357],[],[154],["D",1747325204969],[],[161],["D",1747325832263],[],[168],["D",1747325928722],[],[175],["D",1747325914952],[],[182],["D",1747324993095],{"_16":17,"_81":77},{"_16":17,"_75":-5,"_76":77,"_33":34,"_78":79,"_80":26},{"_63":64,"_20":65,"_18":66,"_67":19,"_68":-5,"_69":-5,"_70":-5,"_71":-5,"_72":-5,"_73":21,"_74":17},"ctx",{"_56":-5,"_102":273,"_274":275,"_276":277,"_278":26,"_279":26,"_280":26,"_281":123,"_282":-5,"_283":-7,"_284":-7,"_285":40,"_286":26,"_287":26,"_288":-5,"_289":26,"_290":26,"_291":26,"_292":-5},"ENV",{"_244":245,"_246":247,"_248":65,"_249":250,"_251":252,"_253":254,"_255":256,"_257":258,"_259":260,"_261":262,"_263":264,"_265":266,"_267":268,"_269":270,"_271":272},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e8c4b7030cb7600e4eb0736b15f422c8b8bd130f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Search