{"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-14T22:08:57","modified_gmt":"2026-04-14T22:08:57","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\u2019ll 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?”<\/em><\/p>\n\n\n\n

\n\n\n\n

1. The “Paint & Polish” (The CSS Section)<\/h3>\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> For most beginners, you can completely ignore this section.<\/strong> 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

\n\n\n\n

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

Further down, you’ll find the <body><\/code> section. This is the HTML (HyperText Markup Language)<\/strong>.<\/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: const celebrations = [ { name: \"Name_1\", ... } ]<\/code><\/p>\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
Look for the const celebrations section in your editor, as shown above, to enter your own personal dates.<\/figcaption><\/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

\n\n\n\n

3. The “Brain” (The JavaScript Section)<\/h3>\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<\/strong>. It is the “Brain” that performs the following logic:<\/p>\n\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.<\/li>\n\n\n\n
  • The Sorting:<\/strong> When you click “Name” or “Days Until,” the JS instantly rearranges the list for you.<\/li>\n\n\n\n
  • The Alert System:<\/strong> It decides which color tag to apply. If the math results in 3<\/code> or less, the JS tells the CSS to turn the tag Red<\/strong>.<\/li>\n<\/ul>\n\n\n\n

    \ud83d\udca1 Pro Tip:<\/strong> This is the perfect place to experiment with AI. Try pasting the script section into an AI and asking: “Can you add a feature to this JavaScript that sends an alert notification when a birthday is today?”<\/em><\/p>\n\n\n\n

    \n\n\n\n

    Summary: The Big Picture<\/h3>\n\n\n\n

    To put it simply, your app is a team of three:<\/p>\n\n\n\n

      \n
    1. HTML<\/strong> builds the table.<\/li>\n\n\n\n
    2. CSS<\/strong> makes the table look professional.<\/li>\n\n\n\n
    3. JavaScript<\/strong> does the math and keeps the data organized.<\/li>\n<\/ol>\n\n\n\n

      By simply replacing some names in the HTML section, you’ve already performed your first “software configuration.” You’re no longer just a user of technology\u2014you’re starting to control it.<\/p>\n\n\n\n

      Having trouble with your code?<\/strong> If you’ve tried to edit your list and the app stopped working, don’t panic! It usually means a comma or a quote mark is missing. Post a comment below with a snippet of your code<\/strong>, and I will help you find the error and get you back up and running.<\/p>\n","protected":false},"excerpt":{"rendered":"

      In this guide, I\u2019ll break down the three main parts of the free Celebrations app. Think of this as a map of the software. For many of you, the code inside that .html 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 […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-246","post","type-post","status-publish","format-standard","hentry","category-guides"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/beginnerprojects.com\/cms\/wp-json\/wp\/v2\/posts\/246","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/beginnerprojects.com\/cms\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/beginnerprojects.com\/cms\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/beginnerprojects.com\/cms\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/beginnerprojects.com\/cms\/wp-json\/wp\/v2\/comments?post=246"}],"version-history":[{"count":3,"href":"https:\/\/beginnerprojects.com\/cms\/wp-json\/wp\/v2\/posts\/246\/revisions"}],"predecessor-version":[{"id":312,"href":"https:\/\/beginnerprojects.com\/cms\/wp-json\/wp\/v2\/posts\/246\/revisions\/312"}],"wp:attachment":[{"href":"https:\/\/beginnerprojects.com\/cms\/wp-json\/wp\/v2\/media?parent=246"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/beginnerprojects.com\/cms\/wp-json\/wp\/v2\/categories?post=246"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/beginnerprojects.com\/cms\/wp-json\/wp\/v2\/tags?post=246"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}