Countdown via user input

Aim

Info and sources

Adapted from mbostock’s block #9843633 Countdown

Time Formatting

<!DOCTYPE html>
<meta charset="utf-8">

<style>

body {
  font-family: 'Source Code Pro', monospace;
  font-size: 72px;
  text-align: center;
  width: 960px;
  color: #454545;
  /*background: yellow;*/
}
form {display: block; background: transparent; margin-top: -30px;}
input {border: 1px dotted #ccc; background: white; padding: 6px 10px; font-size: 18px; margin: 0 10px 20px 0; color: red; max-width: 50px;}
        input:focus { background-color:yellow; outline: none;}
h1  {font-size: 18px; text-align: left; max-width: 60%; margin-left: 20%;}
h2  {font-size: 72px; color: #eee; margin: 0;}
span {color: #888;}

</style>
<h1>Enter a number between 1 and 24, which will be the hour time for  tomorrow, to initiate countdown e.g. 4 would represent 4am </h1>

function handleClick(event){
    console.log(document.getElementById("myVal").value)
    timeLeft(document.getElementById("myVal").value)
    return false;
};

// time via user input tomorrow
function timeLeft(val) {

var formatTime = d3.time.format("%X"),
    countdown = d3.select("#countdown"),
    today = d3.time.day(new Date);

var deadline = d3.time.day.offset(today, 1);
  deadline.setHours(val);

(function tick() {
  var now = new Date;
  countdown.text(formatTime(new Date(+today + +deadline - d3.time.second(now))));
  setTimeout(tick, 1000 - now % 1000);
})();

};

</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.2/d3.js

https://d3js.org/d3.v3.min.js