How The Celebrations Web App Works – Ernst Renner – Migrating from Linux to GhostBSD

Did you just grab the Celebrations app code and now you’re wondering “How do I change or add names and dates?” You’re in the right place!

This post will walk you through what the code does, and how you can safely edit, add, or delete your own birthdays, anniversaries, or any special events.

How the App is Structured

The app is written in HTML, and it’s split into two main parts:

1. Visual Styles – Inside the `<style>` tags

CSS (Cascading Style Sheets) control how the app looks, the colors, spacing, fonts, etc.

Unless you know CSS, it’s best not to edit anything inside the <style> tags. You won’t need to touch this part to update names or dates.

2. The Code Logic – Inside the `<script>` tags

JavaScript controls how the app works. Everything like sorting, countdowns, and showing the data happens here.

This is where we’ll focus.

What This App Does

The app shows a table of birthdays and anniversaries, along with a countdown showing how many days are left.

Name	Type	Date	Days Until	Notes
Alex Johnson	Birthday	1992-03-15	165 Days	Friend’s birthday
Maria Garcia	Anniversary	1985-07-22	45 Days	15th wedding anniversary

You can click the “Name” or “Days Until” column headers to sort the table.

How to Edit the Celebration Entries

Scroll down in the code until you find this section inside the <script> tags:

const celebrations = [
  { name: "Alex Johnson", type: "Birthday", date: "1992-03-15T00:00:00", notes: "Friend's birthday" },
  { name: "Maria Garcia", type: "Anniversary", date: "1985-07-22T00:00:00", notes: "15th wedding anniversary" },
  ...
];

Each line is one event in the app. Let’s break it down:

{ 
  name: "Alex Johnson",          // Person's name
  type: "Birthday",              // Can be "Birthday" or "Anniversary"
  date: "1992-03-15T00:00:00",   // Date in YYYY-MM-DD format
  notes: "Friend's birthday"     // Optional notes
}

To edit an entry:

Change the text inside quotes.
Example: Change “Alex Johnson” to “Samantha Lee”

{ name: "Samantha Lee", type: "Birthday", date: "1992-03-15T00:00:00", notes: "College friend" }

To add a new celebration:

Copy an entire line (don’t forget the comma at the end!), and paste it after the last entry but before the closing ].

Example:

{ name: "Emily Davis", type: "Birthday", date: "1989-12-12T00:00:00", notes: "New year gift" },
{ name: "John Smith", type: "Anniversary", date: "2000-10-10T00:00:00", notes: "Work anniversary" }

Make sure all but the last entry have a comma at the end.

To delete an entry:

Just delete the entire line for that person.

Example:
To remove “David Miller”, delete this line:

{ name: "David Miller", type: "Anniversary", date: "1995-04-30T00:00:00", notes: "10th anniversary" },

Suggestions

Keep the date format exactly as "YYYY-MM-DDT00:00:00"
(the T00:00:00 is required for JavaScript to process the date correctly).
You can mix Birthdays and Anniversaries, just change the "type" value.
The app automatically calculates how many days are left until the next celebration, even across years.
If a date already passed this year, the app rolls it forward to next year.

Special Features: Sorting the Table

Click the “Name” column to sort alphabetically, or the “Days Until” column to sort by soonest events.

Final Thoughts

This web app is a great starting point for learning basic JavaScript and working with arrays of objects. By changing just a few lines, you can fully personalize it for your own birthday or event tracker.

Have fun, and don’t be afraid to experiment. If something breaks, you can always undo or start over!