Projects › Family › Christmas countdown

Christmas countdown for kids, and how to make your own

How many sleeps until Christmas? Watch the seconds tick down, then open a door of the advent calendar each day from 1 December. Then make your family's own countdown with a free AI assistant.

Starter 30 to 45 minutes Free · nothing to install Works on phones and tablets

Counting the sleeps…

0Days
00Hours
00Minutes
00Seconds

Advent calendar

Watch it come together, start to finish
What you'll build

A countdown full of your family's traditions

You'll describe the countdown to a free AI assistant, paste what it writes into a file, and open it in your browser. Then fill the doors with your own surprises.

  • A live countdown to Christmas Day: days, hours, minutes and seconds, plus "sleeps"
  • Falling snow you can switch on and off
  • An advent calendar with 24 doors that only open on the right day
  • A surprise behind each door: a joke, an activity, or a message you've written
  • Festive sounds when a door opens
  • Your family's own names, pictures and traditions

Good for: parents of children asking "how many more sleeps?" every morning, families who want an advent calendar without (or as well as) chocolate, and grandparents far away.

Before you start

What you need

An AI chat assistantClaude, ChatGPT or Gemini. The free version is fine. Most AI assistants are for adults or teens only, so do the chatting yourself and let the children choose the ideas.
A plain text editorNotepad (Windows) or TextEdit (Mac; choose Format then Make Plain Text first).
A web browser
First time? Read How to save and open an HTML file. It takes two minutes.
Step by step

Build it in six steps

  1. Ask for the countdown

    Copy this prompt into your AI assistant:

    Copy this prompt
    I don't know how to code. Please make me a Christmas countdown page for children, that runs in a web browser.
    
    Requirements:
    - ONE single HTML file (HTML, CSS and JavaScript together), no external libraries, no internet needed. I will save it and double-click it.
    - A big live countdown to 25 December at midnight, in my computer's own time zone, showing days, hours, minutes and seconds, updating every second.
    - Underneath, in friendly words: "Only 12 sleeps until Christmas!" (sleeps = number of nights left).
    - After Christmas has passed this year, count down to next year's Christmas automatically. On Christmas Day itself, show "Merry Christmas!" instead.
    - A cosy festive design: deep red or dark green background, gold numbers, a simple Christmas tree drawn with CSS or emoji.
    
    Please give me the complete file in one code block, then tell me in simple steps how to save and open it.

    Copy the code, paste it into your text editor, and save it as countdown.html. Double-click it and watch the seconds tick down.

  2. Add falling snow

    Copy this prompt
    That works, thank you. Please add gentle falling snowflakes over the whole page, drawn on a canvas, with a "Snow on/off" button. Make the snow lighter on phones so it doesn't slow them down, and turn it off automatically if the computer is set to reduce motion. Remember the setting.
    
    Send me the complete updated file.
    Always ask for the complete file. Replace everything in countdown.html, save, and refresh the tab (F5 or Cmd+R).
  3. Add an advent calendar

    Copy this prompt
    Please add an advent calendar under the countdown: 24 doors in a jumbled order, numbered 1 to 24.
    - From 1 December, a door can be opened on its date or any later date. Doors for future days give a little shake and say "Not yet! Come back in 3 sleeps".
    - Opening a door plays a flip animation and shows what's behind it.
    - Behind each door put a child-friendly Christmas joke, and alternate them with simple family activities (e.g. "Make a paper snowflake", "Have hot chocolate and watch a Christmas film").
    - Remember which doors have been opened in localStorage, so they stay open.
    
    Send me the complete updated file.
  4. Write your own surprises

    Now make the calendar yours. Write a list of 24 things your family does in December (or ask the AI to suggest some, then edit them).

    Copy this prompt
    Please replace the jokes and activities behind the doors with this list, in order from door 1 to door 24:
    
    1. [your surprise, e.g. Look in the cupboard under the stairs for a treat!]
    2. [your surprise, e.g. Tonight we're decorating the tree]
    ...
    24. [your surprise, e.g. Leave a carrot out for the reindeer]
    
    Keep the list near the top of the file in a clearly labelled section so I can change it myself next year without asking you.
    
    Send me the complete updated file.
    Tip: keep real surprises a secret by putting a clue behind the door, not the present itself. "Look somewhere cold" works better than "There's ice cream in the freezer".
  5. Add sounds and a character

    Copy this prompt
    Please add:
    - A jingle-bell sound when a door opens, and a short tune when the countdown is opened on Christmas Eve or Christmas Day. Make the sounds with the Web Audio API so no sound files are needed, and add a mute button.
    - A character drawn with CSS or emoji (my children chose [a reindeer / Santa / a penguin / our dog]) who says something different each day, getting more excited the closer it is to Christmas.
    
    Send me the complete updated file.
  6. Share it with family

    To use it on a tablet or send it to grandparents, put it online for free (see free hosting). Everyone gets their own advent calendar, and each person's opened doors are saved on their own device.

    Copy this prompt
    I'm going to put this page online so relatives can open it on their phones. Please make sure it looks good and fits a phone screen without scrolling sideways, that the doors are big enough to tap, and add a title at the top: "[e.g. The Patel Family Christmas Countdown]".
    
    Send me the complete updated file.
ADVERTISEMENT · IN-ARTICLE
If it goes wrong

Quick fixes

The countdown is an hour out

It should use your device's own clock and time zone. Tell the AI: "Please count down to 25 December at 00:00 in my local time, using new Date(year, 11, 25), not a UTC time." Ask for the complete file.

I want to test the doors before December

Ask the AI:

Copy this prompt
Please add a hidden test mode: if the page address ends with ?test=15, pretend today is 15 December so I can try opening doors. Without that, use the real date. Send me the complete file.
The doors have all reset

Opened doors are saved in the browser you used. A different browser, a private window or clearing your browsing data starts fresh.

The snow makes the laptop slow

Ask the AI to "use fewer snowflakes and pause the snow when the tab isn't visible".

It opens as text

Re-save as plain text with exactly .html at the end, not .txt.

Make it your own

Twist it into something else

A countdown works for any big day. Change the first prompt to make:

A birthday countdown

"sleeps until I'm 7!", with balloons instead of snow

A holiday countdown

a plane that flies a little further across a map each day

A school holidays countdown

weekdays only, with the last day of term in big letters

A new baby countdown

for big brothers and sisters

Other festivals

Diwali, Eid, Hanukkah (eight doors, one per night) or Chinese New Year

A reverse advent calendar

each door names something to give to a food bank

Why build it yourself?

It's yours, in-jokes and all

Online countdowns are fine, but they're covered in adverts and they're the same for everyone. Yours can hold your family's in-jokes, clues to real treats, and a character your children invented. It's also a lovely first project to make with children: they see their own ideas turn into something real, and it's ready in an evening.

Keep going

What to build next