Question

I needed a JS that would change the content of these two div’s every day on a yearly basis. For example: on Jan 1 the date div would be “JAN 1” and the moto div would be some moto for Jan 1, then on January 2 the date and the moto changes but not randomly I have text for each of the 365 days. So just a example and I can fill out the rest. I thought JS but can be PHP on serverside if easier.

<div id="date"><h3>JAN 1</h3></div>
<div id="moto" align="center">Example Text.</div>

Answer 1

Just to humor your request I’ve provided a solution…like the other answers say, though: this is best done server-side.

<script>
    var date = new Date(); //get current date
    var month = date.getMonth();
    var day = date.getDate();
    var months = ['JAN', 'FEB', ... , 'DEC']; //array of month formats

    //define mottos as a multi-dimensional array by month and day
    var mottos = [
        [
            'JAN 1 Motto',
            'JAN 2 Motto',
            ...,
            'JAN 31 Motto'
        ],

        ...,

        [
            'DEC 1 Motto',
            ...,
            'DEC 31 Motto'
        ]
    ];

    //set the Date DIV
    document.getElementById('date').innerHTML = months[month] + " " + day;

    //set the Motto DIV; the day - 1 accounts for the zero-indexed arrays
    document.getElementById('moto').innerHTML = mottos[month][day - 1];
</script>

With PHP:

<?php

    //Similar to the above JS method
    $mottos = array(
        array(
            'Jan 1 Motto',
            ...
        ),
        ...
    );

    $date = new DateTime();
    $month = (int) $date->format('n');
    $day = (int) $date->format('j');
?>

<div id="date"><h3><?php echo strtoupper($date->format('M j')); ?></h3></div>
<div id="moto" align="center"><?php echo $motto[$month - 1][$day - 1];</div>