Building a “Naughty or Nice” Dashboard for My Kids With Zero Dev Experience

If you’ve ever lived with young kids in December, you know exactly what our house turns into two tiny Tasmanian devils counting down to Christmas Eve.

Last year, my wife and I were exhausted constantly reminding them to behave so Santa will still visit. It felt like a losing battle.

This year, I had an idea!

Screen time has become a huge part of my children’s world (even though we attempt to limit!) They use technology in school and nursery. So why not use that to help us instead of working against us?

I had no background in APEX, no developer experience, nothing! other than a great team around me that over the years have given me a glimpse into what Apex is and can do!

So I started experimenting.

What came out of it is something that i hope my kids will be enjoy:

The “Are You Naughty or Nice?” Dashboard

I built a simple table where parents can add each child (or grown-up!) and track their Naughty Marks and Nice Marks:

The actual dashboard looks like this:

How It Works (Kid-Friendly and Parent-Friendly)

Select a name

Parents pick who they want to update:

Tap a button

Two big buttons:

• Mark Naughty

• Mark Nice

Each tap updates the values…and instantly updates the dashboard cards.

Here’s an example of me “testing” the Naughty button:

Here’s an example of me “testing” the Nice button:

Here’s an example of me “testing” the Nice Colour Condition:

My Favourite Part:

The dashboard will make my kids think about their choices completely on their own as they will be the ones adding the points

We will never force them to use it. But i am hoping they LOVE checking the cards.

Each morning they run over and ask:

Am I still green?!

How I Got the Naughty/Nice Cards Working

I’m very new to APEX and PL/SQL, so this part took me a bit of trial and error.I wanted each person to show up as a little card on the screen — green if they’re on the Nice List, red if they aren’t. I couldn’t quite get the built-in APEX components to look the way I wanted, so I ended up making a PL/SQL region that prints out the HTML myself.

This is the code that finally worked:

BEGIN
    htp.p('<div class="row gx-3 gy-3">');

    FOR record IN (
        SELECT 
            NAME,
            NAUGHTY_MARKS,
            NICE_MARKS,
            CASE
                WHEN NICE_MARKS > NAUGHTY_MARKS THEN 'Yes'
                ELSE 'No'
            END AS IS_NICE_MORE_THAN_NAUGHTY,
            CASE
                WHEN NICE_MARKS > NAUGHTY_MARKS THEN 'card-green'
                ELSE 'card-red'
            END AS CARD_COLOR
        FROM SANTA_LIST
    )
    LOOP
        htp.p('<div class="col-md-4">');
        htp.p('  <div class="' || record.CARD_COLOR || '">');
        htp.p('      <h5>' || record.NAME || '</h5>');
        htp.p('      <p>Naughty Marks: ' || record.NAUGHTY_MARKS || '</p>');
        htp.p('      <p>Nice Marks: ' || record.NICE_MARKS || '</p>');
        htp.p('      <h2>Nice List: ' || record.IS_NICE_MORE_THAN_NAUGHTY || '</h2>');
        htp.p('  </div>');
        htp.p('</div>');
    END LOOP;

    htp.p('</div>');
END;

What this actually does

• The code looks at every row in my SANTA_LIST table.

• For each row (each person), it checks whether the Nice Marks are higher than the Naughty Marks.

• Based on that, it decides:

  • Yes or No for being on the Nice List

  • Whether the card should be green or red

• Then it prints out a little block of HTML for each person.

It basically “loops” through everyone and creates the tiles you see on the screen.

A bit about the colours

I added two simple CSS classes in the page CSS:

.card-container {
    padding: 10px;
}

.card-green {
    background-color: green;
    color: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
}


.card-red {
    background-color: red;
    color: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
}


.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin: 0 auto;
}


body {
    background-image: url('#APP_FILES#—Pngtree—painted christmas         .theme background_965436.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.transparent-region {
    background-color: rgba(255, 255, 255, 0);
    border: none;
    box-shadow: none;
}

See the Below Video of a walk through! For the Video i have truncated the table and will use the Grinch and Max as the examples!