How to create a user-customizable javascript-only alert?

Question

I have a TV site and would like to know if there is a user who wants to watch a program at a certain time programmed by him, be alerted that the program is to start.

Like I want to see "Deal Done at 9:30 am," then he shows up to be alerted at 9:28 and a message warns "Deal Done will start in 2 minutes".

Answer 1

Note this method being client-side, is only valid as long as it has not deleted the cookie or the cookie has not expired.

Example in JSFIDDLE

<script>

  function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
      var c = ca[i];
      while (c.charAt(0)==' ') c = c.substring(1,c.length);
      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
  }

  function set_cookie() {
    input_hours = document.getElementById("myHour").value;
    input_day = document.getElementById("myDate").value;
    if(input_hours !== '' && input_day !== '') {
      hours = input_hours.split(':');
      slitDate = input_day.split('-');
      ano = slitDate[0];
      mes = slitDate[1]-1;
      dia = slitDate[2];
      hora = hours[0];
      minutos = hours[1];
      var date = new Date(ano, mes, dia, hora, minutos, 0);
      expires = new Date(date.getTime() + 1000 * 60 * 60 * 48);
      document.cookie = "date=" +date+ "; expires=" +expires+ "; path=/";
    }
  }

  now = new Date();
  if(readCookie('date') !== null) {
    var agendado = new Date(readCookie('date')).getTime();
    if(now.getTime() < agendado) {
      falta = ((agendado - now.getTime())/1000) / 60 / 60; // horas
      horas = parseInt(falta, 10);
      minutos = Math.round((falta - Math.floor(falta)) * 60);
      alert('ainda não deu faltam ' +horas+ ' horas e ' +minutos+ ' minutos');
    }
    else {
      alert('deu');
    }
  }

</script>
<input type="time" id="myHour"> // 00-24:0-59, horas:minutos
<input type="date" id="myDate"> // 2016-05-25, yyyy/mm/dd, na realidade por testes que fiz acho que também dá com o dia no meio e mês à direita
<button onclick="set_cookie()"> Gravar alarme
</button>