⏳🔮✨ Time calculation has never been so fun!
With Moments one can do two things (sometimes three):
-
Find how many years, months, weeks, days, hours, minutes or seconds are there between two moments in time.
-
Find the exact moment in time when defining a specific time unit (years, months, weeks, days, hours, minutes or seconds) relative to a 'base' moment.
-
If the resulting moment is in the future, one will have the opportunity to set a calendar event.
There are three modes one can use:
Set a base date and get the time difference between that date and now. If the base date is set in the future the calculation will still be done. One will see a visual representation of chronology, with a respective "time since" or "time until" heading over the results.
It can be accessed at:
https://dreamyguy.github.io/moments/#/1/relative-to-now/
Set a base date (Date A) and a target date (Date B) and get the time difference between them.
It can be accessed at:
https://dreamyguy.github.io/moments/#/2/between-two-dates/
Set a base date and get the time difference between that date and now. At the bottom of the page, one will see the results, which can be used as inspiration.
Right below the set date one will get some "time-unit" fields that can be filled with numbers. The resulting moment will render below each field. If the result is in the future, one will be able to set calendar events (this feature is in the works).
It can be accessed at:
https://dreamyguy.github.io/moments/#/3/discover-moment/
Thanks to the nature of dates, the output of Moments can be both presented and requested in a very structured way. One can set the date and time dynamically (ie. at another website) and link to Moments, triggering a render of what was entered through URL parameters. The resulting URLs reproduceable, and therefore shareable.
Link to the Moments website on Github, passing the expected time parameters. The link can be copied to your clipboard by clicking on the button Copy Moment to clipboard (the button will only appear when it's click-able).
/1/:urlMode/date-a/:urlBaseYear/:urlBaseMonth/:urlBaseDay/:urlBaseHour/:urlBaseMinute/:urlBaseSecond/
Ex.: https://dreamyguy.github.io/moments/#/1/relative-to-now/date-a/1975/February/19/21/0/0/
/2/:urlMode/date-a/:urlBaseYear/:urlBaseMonth/:urlBaseDay/:urlBaseHour/:urlBaseMinute/:urlBaseSecond/date-b/:urlTargetYear/:urlTargetMonth/:urlTargetDay/:urlTargetHour/:urlTargetMinute/:urlTargetSecond
/3/:urlMode/date-a/:urlBaseYear/:urlBaseMonth/:urlBaseDay/:urlBaseHour/:urlBaseMinute/:urlBaseSecond/
Ex.: https://dreamyguy.github.io/moments/#/3/discover-moment/date-a/1975/February/19/21/0/0/
All these dates are relative to now, without the benefit of time zones:
Cheeful moments
- Jesus is born - 25 December 0000
- Eyeglasses invented in Italy - 1286
- Invention of the Printing Press - 1440
- The first photograph of Earth from space is taken - 24 October 1946
- First Beatles concert ever - 9 February 1961
- Martin Luther King Jr. gives his "I have a dream" speech - 28 August 1963
- Apollo 11 lands on Moon - 20 July 1969 20:17:40
- Neil Armstrong steps on the Moon's surface - 21 July 1969 02:56:15
- Tim Berners-Lee invents the internet - 12 March 1989
- First episode of Friends is aired - 22 September 1994 20:30
- Malala Yousafzai delivers her speech at the United Nations Youth Assembly in New York (her 16th birthday) - 12 July 2013
World wars:
WW1
- First event leading to WW1 (assassination of the Austrian archduke, Franz Ferdinand and his wife) - 28 June 1914
- Last event of WW1 (Treaty of Versailles) - 28 June 1919
- WW1 Duration (between two dates)
WW2
- First event of WW2 (invasion of Poland) - 1 September 1939
- Last event of WW2 (Japan formally surrenders) - 14 August 1945
- WW2 Duration (between two dates)
Nr. days from 1st event of WW1 to last event WW2 (between two dates)
Major tragedies:
- The Black Death pandemic starts - 1346
- Hiroshima explosion - 6 August 1945 08:16
- Chernobyl explosion - 26 April 1986 01:23:45
- First plane crashes on WTC, NY - 11 September 2001 08:46:40
- Trump's presidency starts - 20 January 2017 12:00:00
Timezones would add a lot of complexity to this application, for little benefit (as 100% accuracy would require a tremendous job). There are so many not-so-obvious caveats and edge-cases that in the end of the day it is simply better to let the end the user take responsibility to set it right (if at all necessary) to compensate for the time difference.
For instance, if you're born in Brazil but currently live in Australia.
While creating a calendar event to be notified of your 1,111,111,111st second since your birth at 6:50 PM, you would want to set an event on the next day at 7:50 AM - as in Australia you'd be 13 hours ahead of Brazil.
Remember to check for Daylight Time Saving in both areas.
Clone this repo locally. You'll need to have NodeJS installed. Install all dependencies by running:
npm i
If not already present, you need Watchman to run the test with --watch flag. You can install it in a number of ways, but I recommend using Homebrew:
brew install watchman
To start the app locally, run:
npm run dev
This command fires up the application on port 9876, making it visible on http://localhost:9876. Because this app is based on create-react-app, the port number should be configured on the .env file.
When you're ready to build for production, run:
npm run build
This command compiles all production-optimised resources to a folder called build. It's meant to be run remotely, at the environment host, at build time.
To test the application remotely (Jenkins, Travis, etc) , run:
npm run test
For the best integration experience while developing, run (it will start the --watch flag):
npm run test:local
It's recommended to keep tests running locally as one develops. Running tests on your IDE's terminal window, kept visible while you're writing the application would be for instance a great place to start. VS Code supports that natively.
Tests can be written in different ways, but Jest (for unit tests) and Enzyme (for integration tests) are good starting points. At this point Enzyme still needs to be implemented.
Test coverage won't ever hit 100%, but can be used as a way to trace exceptions/exclusions. If a file shouldn't be tested, it should be ignored by tests. That way test coverage is kept at an acceptable level.
To run test coverage, run:
npm run test:coverage
Moments was conceived and developed by Wallace Sidhrée. is written in React, with Redux used for state management. It was initialized through create-react-app 2 and built upon that with some sensible strategies. Jest and Enzyme are used for tests. Momentjs is used for time calculations. VS Code was used as the IDE of choice.