Home

bennet @main - refs - log -
-
https://git.jolheiser.com/bennet.git
Bean boy
bennet / src / index.html
- raw
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<html lang="en">
<head>
    <title>Bennet</title>

    <link rel="stylesheet" href="odometer.css">
    <link rel="stylesheet" href="bennet.css">

    <script src="odometer.js" defer></script>
</head>
<body>
<table>
	<thead>
	<tr>
		<td colspan="2"><span class="label">How old is Bennet?</span></td>
	</tr>
	</thead>
    <tbody>
    <tr>
        <td>
            <div id="year" class="odometer">0</div>
        </td>
        <td><span class="label">Years, or...</span></td>
    </tr>
    <tr>
        <td>
            <div id="month" class="odometer">0</div>
        </td>
        <td><span class="label">Months, or...</span></td>
    </tr>
    <tr>
        <td>
            <div id="week" class="odometer">0</div>
        </td>
        <td><span class="label">Weeks, or...</span></td>
    </tr>
    <tr>
        <td>
            <div id="day" class="odometer">0</div>
        </td>
        <td><span class="label">Days, or...</span></td>
    </tr>
    <tr>
        <td>
            <div id="hour" class="odometer">0</div>
        </td>
        <td><span class="label">Hours, or...</span></td>
    </tr>
    <tr>
        <td>
            <div id="minute" class="odometer">0</div>
        </td>
        <td><span class="label">Minutes, or...</span></td>
    </tr>
    <tr>
        <td>
            <div id="second" class="odometer">0</div>
        </td>
        <td><span class="label">Seconds, or...</span></td>
    </tr>
    <tr>
        <td colspan="2">
			<span id="total" class="label"></span>
        </td>
    </tr>
    </tbody>
</table>


<script type="text/javascript">

    const birth = new Date("11/01/2017 06:13:00");
    const now = new Date();
    let diff = Math.round((now.getTime() - birth.getTime()) / 1000);

    const $year = document.getElementById("year");
    const $month = document.getElementById("month");
    const $week = document.getElementById("week");
    const $day = document.getElementById("day");
    const $hour = document.getElementById("hour");
    const $minute = document.getElementById("minute");
    const $second = document.getElementById("second");
	const $total = document.getElementById("total");

    setInterval(() => {
        $year.innerHTML = Math.floor(diff / 31536000).toString();
        $month.innerHTML = Math.floor(diff / 2592000).toString();
        $week.innerHTML = Math.floor(diff / 604800).toString();
        $day.innerHTML = Math.floor(diff / 86400).toString();
        $hour.innerHTML = Math.floor(diff / 3600).toString();
        $minute.innerHTML = Math.floor(diff / 60).toString();
        $second.innerHTML = diff.toString();

		let total = diff;
		const years = Math.floor(diff / 31536000);
		total -= years * 31536000;
		const months = Math.floor(total / 2592000);
		total -= months * 2592000;
		const days = Math.floor(total / 86400);
		total -= days * 86400;
		const hours = Math.floor(total / 3600);
		total -= hours * 3600;
		const minutes = Math.floor(total / 60);
		total -= minutes * 60;
		const seconds = total;
		$total.innerHTML = `${years} Year${trn(years)}, ${months} Month${trn(months)}, ${days} Day${trn(days)}, ${hours} Hour${trn(hours)}, ${minutes} Minute${trn(minutes)}, and ${seconds} Second${trn(seconds)} old`;

        diff++;
    }, 1000);

	function trn(num) {
		return num === 1 ? "" : "s";
	}
</script>

</body>
</html>