<head>
  <title>tile until counter</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Parkinsans:wght@300..800&display=swap" rel="stylesheet">
</head>
<h1 style="display:inline; ">Pick time</h1><p style="display:inline" id="label"></p>
<div>
  <input type="time" id="input">
<button onclick="set()">set time</button> 
</div>
<script>
  const url = new URL(window.location.href)
  if(url.searchParams.has("time")){document.querySelector('#input').value = url.searchParams.get("time");document.querySelector('title').innerText = document.querySelector('#input').value;document.querySelector('#input').style.display = 'none'; document.querySelector('button').style.display = 'none'  ; update()}
  function set(){window.location.href = `?time=${encodeURIComponent(document.querySelector('#input').value)}&format=4`}
  
function update(){
var value = document.querySelector('#input').value
var format = url.searchParams.get("format")
const date = new Date()
let valmin = value.split(':')[0] 
let valts = () => {var mins = Number(value.split(":")[1] * 60); var hrs = valmin * 3600; return hrs + mins}
let valtcv = () => {var mins = Number(date.getMinutes() * 60); var hrs = date.getHours() * 3600; return hrs + mins + date.getSeconds()}
const seconds = valts() - valtcv()
const minutes = Math.floor(seconds / 60)
const minandsec = `${Math.floor(seconds / 60)}:${seconds % 60}`
const hms = `${Math.floor(minutes / 60)}:${Math.floor(minutes % 60)}:${Math.floor(seconds % 60)}`
let ba = (num, format) => {var mnum = Number(num); if(mnum < 0){return `${Math.abs(mnum)} ${format} ago`} else{return `in ${mnum} ${format}`}}

switch(format){
  case '1':
    document.querySelector("h1").innerText = `${ ba(seconds, "seconds")}`;
    document.querySelector("p").innerText = ` it will be ${value}`;
    break;
  case '2':
    document.querySelector("h1").innerText = `${ ba(minutes, "minutes")}`;
    document.querySelector("p").innerText = ` it will be ${value}`;
    break;
  case '3':
    document.querySelector("h1").innerText = `${minandsec}`;
    document.querySelector("p").innerText = ` until ${value}`;
    break;
  case '4':
    document.querySelector("h1").innerText = `${hms}`;
    document.querySelector("p").innerText = ` until ${value}`;
    break;
  default:
    document.querySelector("h1").innerText = `${hms} ${minandsec} ${minutes} ${seconds}`; 
}
  document.querySelector('title').innerText = `${document.querySelector("h1").innerText} until ${value}`
setTimeout(() => {update()}, 1000)
}
</script>
<style>
  body {background-color:white}
  * {font-family:parkinsans}
  button {color:white; background-color:darkblue; border-radius:4px}
  button:hover {color:white; background-color:blue}
  button:active {background-color:darkblue}
</style>
