techeverri · July 20, 2019 22:00 · techeverri · May 20, 2018
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>

 <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Math Birthdays</title>
    <link rel="stylesheet" href="https://unpkg.com/flatpickr/dist/flatpickr.min.css">
    <link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/themes/material_green.css">
    <style>
        * {
            font-family: sans-serif;
            margin: 0;
        }

        .content {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: space-around;
            flex-direction: column;
            text-align: center;
            font-size: larger;
        }

        #birthday {
            text-align: center;
        }
    </style>
 </head>

 <body>
    <div class="content">
        <h1>Math Birthdays</h1>
        <div>
            <p>When Were You Born?</p>
            <input id="birthday" type="date">
        </div>
        <div>
            <p>Your next math birthday is</p>
            <p id="next-math-birthday">Loading...</p>
        </div>
    </div>
    <script src="https://unpkg.com/flatpickr"></script>
    <script>
        (function () {
            var birthdayElement = document.querySelector("#birthday");
            var nextMathBirthdayElement = document.querySelector("#next-math-birthday");

            birthdayElement.onchange = function (event) {
                var value = event.target.value.split('-');
                var birthdate = new Date(value[ 0 ], value[ 1 ] - 1, value[ 2 ]);
                nextMathBirthdayElement.innerHTML = yourNextMathBirthdayIs(birthdate);
            };

            var today = new Date();
            flatpickr(birthdayElement, {
                defaultDate: today,
                maxDate: today
            });

            nextMathBirthdayElement.innerHTML = yourNextMathBirthdayIs(today);

            function daysBetweenDates(startDate, endDate) {
                var DAY_IN_MILLISECONDS = 24 * 60 * 60 * 1000;
                var differenceInMilliseconds = Math.abs(startDate.getTime() - endDate.getTime());
                var differenceInDays = Math.round(differenceInMilliseconds / DAY_IN_MILLISECONDS);
                return differenceInDays;
            }

            function upcomingPowerOfTen(days, exponent) {
                var power = Math.pow(10, exponent);
                if (days < power) {
                    return power;
                }
                return upcomingPowerOfTen(days, exponent + 1);
            }

            function upcomingMathBirthday(daysSinceBirthdate, nextPowerOfTen) {
                var daysToNextMathBirthday = nextPowerOfTen - daysSinceBirthdate;
                var mathBirthday = new Date();
                mathBirthday.setDate(mathBirthday.getDate() + daysToNextMathBirthday);
                return mathBirthday;
            }

            function yourNextMathBirthdayIs(birthdate) {
                var now = new Date();
                var daysSinceBirthdate = daysBetweenDates(birthdate, now);
                var nextPowerOfTen = upcomingPowerOfTen(daysSinceBirthdate, 1);
                var mathBirthday = upcomingMathBirthday(daysSinceBirthdate, nextPowerOfTen);
                return "your " + nextPowerOfTen + "-day-old birthday on " + mathBirthday.toString().slice(0, 15);
            }
        })();
    </script>
 </body>

 </html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Math Birthdays</title>
	<link rel="stylesheet" href="https://unpkg.com/flatpickr/dist/flatpickr.min.css">
	<link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/themes/material_green.css">
	<style>
	* {
	font-family: sans-serif;
	margin: 0;
	}

	.content {
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: space-around;
	flex-direction: column;
	text-align: center;
	font-size: larger;
	}

	#birthday {
	text-align: center;
	}
	</style>
	</head>

	<body>
	<div class="content">
	<h1>Math Birthdays</h1>
	<div>
	<p>When Were You Born?</p>
	<input id="birthday" type="date">
	</div>
	<div>
	<p>Your next math birthday is</p>
	<p id="next-math-birthday">Loading...</p>
	</div>
	</div>
	<script src="https://unpkg.com/flatpickr"></script>
	<script>
	(function () {
	var birthdayElement = document.querySelector("#birthday");
	var nextMathBirthdayElement = document.querySelector("#next-math-birthday");

	birthdayElement.onchange = function (event) {
	var value = event.target.value.split('-');
	var birthdate = new Date(value[ 0 ], value[ 1 ] - 1, value[ 2 ]);
	nextMathBirthdayElement.innerHTML = yourNextMathBirthdayIs(birthdate);
	};

	var today = new Date();
	flatpickr(birthdayElement, {
	defaultDate: today,
	maxDate: today
	});

	nextMathBirthdayElement.innerHTML = yourNextMathBirthdayIs(today);

	function daysBetweenDates(startDate, endDate) {
	var DAY_IN_MILLISECONDS = 24 * 60 * 60 * 1000;
	var differenceInMilliseconds = Math.abs(startDate.getTime() - endDate.getTime());
	var differenceInDays = Math.round(differenceInMilliseconds / DAY_IN_MILLISECONDS);
	return differenceInDays;
	}

	function upcomingPowerOfTen(days, exponent) {
	var power = Math.pow(10, exponent);
	if (days < power) {
	return power;
	}
	return upcomingPowerOfTen(days, exponent + 1);
	}

	function upcomingMathBirthday(daysSinceBirthdate, nextPowerOfTen) {
	var daysToNextMathBirthday = nextPowerOfTen - daysSinceBirthdate;
	var mathBirthday = new Date();
	mathBirthday.setDate(mathBirthday.getDate() + daysToNextMathBirthday);
	return mathBirthday;
	}

	function yourNextMathBirthdayIs(birthdate) {
	var now = new Date();
	var daysSinceBirthdate = daysBetweenDates(birthdate, now);
	var nextPowerOfTen = upcomingPowerOfTen(daysSinceBirthdate, 1);
	var mathBirthday = upcomingMathBirthday(daysSinceBirthdate, nextPowerOfTen);
	return "your " + nextPowerOfTen + "-day-old birthday on " + mathBirthday.toString().slice(0, 15);
	}
	})();
	</script>
	</body>

	</html>