Counting the days


by Jeremy Caudle
code

For today's post I wanted to figure out how to count the number of days between when I started the 100 Days of Code challenge and the current day. It was a bit tricky at first, but MDN and StackOverflow had some good info that I was able to wrap my head around. I'm almost half way there!

000

days since I started the #100DaysofCode challenge.

View the code:

HTML and JS 
<div class="code-block">

            <h2 id="days-since">000</h2>
            <p>days since I started the <strong>#100DaysofCode</strong> challenge.</p>
            
            <p id="start-date-display" class="date-display"></p>
            <p id="current-date-display" class="date-display"></p>
            <noscript><p>Uh oh, this post requires JavaScript. <em>A number representing the number of days I've posted code during the 100DaysofCode Challenge.</em></p></noscript>

        </div>
        
        <script>

            // ---------        
            // Variables
            // ---------
            
            const daysDisplay = document.getElementById('days-since');
            const currentDateDisplay = document.getElementById('current-date-display');
            const startDateDisplay = document.getElementById('start-date-display');
            const startDate = new Date("02/09/2021");
            
            // Set and build current date.
            let now = new Date();
            const dayCheck = now.getDate();
            const monthCheck = now.getMonth() + 1;
            const yearCheck = now.getFullYear();
            now.setDate = `${monthCheck}/${dayCheck}/${yearCheck}`;

            // Calculate different between dates in milliseconds
            let timeDifference = now.getTime() - startDate.getTime();

            // Calculate days from milliseconds
            let daysDifference = timeDifference / (1000 * 60 * 60 * 24);

            // ---------        
            // Events
            // ---------
            window.onload = function() {
                daysDisplay.setAttribute('class', 'updated');
                daysDisplay.textContent = Math.floor(daysDifference);
                currentDateDisplay.innerHTML = `${startDate.toDateString()} <em>to</em> ${now.toDateString()}.`;
            };
            
            
        </script>
CSS 
.code-block {
                background-color: dimgray;
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
                color: white;
                padding: 1rem;
                margin: 2rem auto;
                border-radius: 1rem;
                font-size: 20px;
                width: 16em;
            }

            .code-block h2 {
                text-align: center;
                font-size: 5rem;
                margin: 0 auto .5rem auto;
                /* transition: transform .75s ease-out, color .9s ease-out, text-shadow 1s ease-out;
                max-width: 5ch;
                text-shadow: -2px 2px transparent; */
            }

            .code-block p {
                max-width: 60ch;
                text-align: center;
                margin: auto auto .5rem auto;
            }

            .code-block p.date-display {
                max-width: 60ch;
                color: #ccc;
                font-size: .75em;
                text-align: center;
                margin: auto auto .5rem auto;
            }

            h2.updated {
                transform: rotate(1deg) scale(1.5);
                color: orange;
                text-shadow: -2px 2px rgba(0,0,0,0.5);
            }

Tags