tonyb486/2021_clock_overlay_obs.html

## 2021_clock_overlay_obs.html
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>clock</title>
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">

  <script type="text/javascript">

    function padNum(i) {
        return i<10 ? "0"+i : i;
    }

    window.onload = function() {
        var clock = document.getElementById("clock")
        var countdown = document.getElementById("countdown")

        var midnight = new Date("January 1, 2021 EST");
        setInterval(
            function() {
                var d = new Date();
                timeToMidnight = Math.ceil((midnight - d)/1000);

                var hours = Math.floor((timeToMidnight % ( 60 * 60 * 24)) / ( 60 * 60));
                var minutes = Math.floor((timeToMidnight % ( 60 * 60)) / ( 60));
                var seconds = Math.floor((timeToMidnight % ( 60)));

                if(timeToMidnight > 0) {
                    clock.innerHTML = padNum(hours)+":"+padNum(minutes)+":"+padNum(seconds);
                    countdown.innerHTML =  "Time to Midnight"
                } else {
                    clock.innerHTML = "2021!"
                    countdown.innerHTML =  "HAPPY NEW YEAR!"
                }

            }, 500 )
    }


  </script>
  <style type="text/css">
     body {
        font-family: "lato", sans-serif;
     }
     div#clock {
         text-align: center;
         font-size: 60px;
         display: inline-block;
         -webkit-text-stroke-width: 2px;
         -webkit-text-stroke-color: white;
     }

     div#countdown {
         font-size: 20px;
         font-weight: bold;
         text-shadow: 0 0 3px white;
         transition: 10s;
     }


  </style>
</head>

<body>
  <div style="text-align: center">
    <div id="clock">[clock loading]</div>
    <div id="countdown"></div>
  </div>
</body>

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

	<head>
	<meta charset="UTF-8">
	<title>clock</title>
	<link rel="preconnect" href="https://fonts.gstatic.com">
	<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">

	<script type="text/javascript">

	function padNum(i) {
	return i<10 ? "0"+i : i;
	}

	window.onload = function() {
	var clock = document.getElementById("clock")
	var countdown = document.getElementById("countdown")

	var midnight = new Date("January 1, 2021 EST");
	setInterval(
	function() {
	var d = new Date();
	timeToMidnight = Math.ceil((midnight - d)/1000);

	var hours = Math.floor((timeToMidnight % ( 60 * 60 * 24)) / ( 60 * 60));
	var minutes = Math.floor((timeToMidnight % ( 60 * 60)) / ( 60));
	var seconds = Math.floor((timeToMidnight % ( 60)));

	if(timeToMidnight > 0) {
	clock.innerHTML = padNum(hours)+":"+padNum(minutes)+":"+padNum(seconds);
	countdown.innerHTML = "Time to Midnight"
	} else {
	clock.innerHTML = "2021!"
	countdown.innerHTML = "HAPPY NEW YEAR!"
	}

	}, 500 )
	}


	</script>
	<style type="text/css">
	body {
	font-family: "lato", sans-serif;
	}
	div#clock {
	text-align: center;
	font-size: 60px;
	display: inline-block;
	-webkit-text-stroke-width: 2px;
	-webkit-text-stroke-color: white;
	}

	div#countdown {
	font-size: 20px;
	font-weight: bold;
	text-shadow: 0 0 3px white;
	transition: 10s;
	}



	</style>
	</head>

	<body>
	<div style="text-align: center">
	<div id="clock">[clock loading]</div>
	<div id="countdown"></div>
	</div>
	</body>

	</html>