{"id":246,"date":"2026-04-13T22:29:20","date_gmt":"2026-04-13T22:29:20","guid":{"rendered":"https:\/\/beginnerprojects.com\/cms\/?p=246"},"modified":"2026-04-24T23:49:08","modified_gmt":"2026-04-24T23:49:08","slug":"learn-how-the-celebrations-app-actually-works","status":"publish","type":"post","link":"https:\/\/beginnerprojects.com\/cms\/learn-how-the-celebrations-app-actually-works\/","title":{"rendered":"Learn How The Celebrations App Actually Works"},"content":{"rendered":"\n

In this guide, I’ll break down the three main parts of the free Celebrations app<\/a>. Think of this as a map of the software.<\/p>\n\n\n\n

For many of you, the code inside that .html<\/code> file looks like a jumble of symbols and brackets. You might be wondering: “What is actually happening in there? And can I change things without breaking it?”<\/p>\n\n\n\n

1. The “Paint & Polish” (The CSS Section)<\/h2>\n\n\n\n

When you open your file, you’ll see a large section wrapped in <style><\/code> tags. This is the CSS (Cascading Style Sheets)<\/strong>.<\/p>\n\n\n\n

What it does:<\/strong> CSS is responsible for everything you see<\/em> but don’t interact<\/em> with. It tells the browser that the background should be dark, the fonts should be “Inter,” and that the “Days Until” tags should be Green, Orange, or Red.<\/p>\n\n\n\n

\ud83d\udca1 Pro Tip:<\/strong> If you are happy with how the app looks, then you can completely ignore this section. You don’t need to touch a single line of CSS for the app to work. However, if you’re feeling adventurous, you can ask an AI: “I have a CSS section in my HTML file; can you help me change the background color to a deep navy blue?”<\/em><\/p>\n\n\n\n

2. The “Skeleton” (The HTML Body)<\/h2>\n\n\n\n

Further down, you’ll find the <body><\/code> section. This is the HTML <\/strong>portion.<\/p>\n\n\n\n

What it does:<\/strong> If CSS is the paint, HTML is the framing of the house. It defines where the Title goes and where the Table is placed.<\/p>\n\n\n\n

Where you’ll spend your time:<\/strong> The most important part of this section for you is the Data Array<\/strong>. Look for the part that looks like this:<\/p>\n\n\n\n

const celebrations = [\n  { name: \"Name_1\", type: \"Birthday\", date: \"1963-09-05T00:00:00\", notes: \"Don't Email. Call 000.000.1234 instead. \" },\n  { name: \"Name_2\", type: \"Birthday\", date: \"1961-12-19T00:00:00\", notes: \"Send flowers.\" }\n];\n<\/code><\/pre>\n\n\n\n
This is where your personal information lives. Each person is wrapped in curly braces {}<\/code>. As long as you keep the quotes \"\"<\/code> and the commas ,<\/code> in the right place, you can add as many people as you like.<\/p>\n\n\n\n
\"Screenshot<\/figure>\n\n\n\n
A Note on the Date Format:<\/strong> You’ll notice dates look like 1968-09-05T00:00:00<\/code>. The T00:00:00<\/code> is a technical marker that tells the computer the date starts exactly at midnight. This ensures that no matter what time of day you open the app, the countdown remains accurate.<\/p>\n\n\n\n
3. The “Brain” (The JavaScript Section)<\/h2>\n\n\n\n
At the bottom of the file, inside the <script><\/code> tags, is the JavaScript (JS)<\/strong>.<\/p>\n\n\n\n
What it does:<\/strong> This is the most powerful part of the app. While HTML and CSS are static, JavaScript is active<\/em>. It is the “Brain” that performs the following logic:<\/p>\n\n\n\n
The Math:<\/strong> It looks at today’s date, looks at the birthday, and calculates exactly how many days are left.<\/p>\n\n\n\n
The Sorting:<\/strong> When you click “Name” or “Days Until,” the JS instantly rearranges the list for you. The sorting works by:<\/p>\n\n\n\n