Ghost card - Your Life in Weeks

Share & showcase
1

Hi everyone. There’s a great post of Tim Urban about your life in weeks. It was published nearly 10 years ago.

image
image820×203 17.3 KB

So far, there were several implementation of the proposed idea, however very few of them were particularly useful. I was recently working on this widget and created a customizable JS in light and dark modes:

Calendar overview

image
image1130×848 40.7 KB

Milestones popup window

image
image1153×865 134 KB

Users can provide the life periods and milestones in JSON format:

// Call the function with your desired DOB and life expectancy
const data = {  
  dob: '1988-01-01',  
  lifeExpectancy: 78.74,  
  ranges: [  
    {start: '1988-01-01', end: '1995-09-01', title: 'Childhood', color: 'papayawhip'},  
    {start: '1995-09-01', end: '1998-09-01', title: 'Elementary School', color: 'silver'},  
    {start: '1998-09-01', end: '2000-09-01', title: 'Junior School', color: 'aqua'}  
  ],  
  milestones: [  
    {date: '1998-01-01', title: 'My Birthday!', desc: 'Some description without an image'},  
    {date: '2018-01-01', title: 'My another Birthday!', desc: 'Some description with an image', img: 'https://<PATH-TO>.webp'}  
  ]  
};

This widget could be useful for describing other long-lasting concepts, like history events, scientific achievements (i.e. clinical trial processes) and so on.

I have virtually zero experience in packaging the JS into Ghost card format or a standalone npm package. Would be great to collaborate with someone who has an experience in this area (or maybe wants to get this experience!).

Please let me know if this widget looks interesing to you or if you would like to team-up.