JS Alarmclock needs adjustment-CodePudding

I'm trying to set an alarmclock for the webapp I'm creating with Django. To do so, I followed some tutorials and adjusted the code for my needs and all. It works. My problem is, I want to set the time and date, manually, with the variables I get from Django views (I passed the hour and min variables into my HTML file). Here is my alarm.html file:

{% extends 'mainapp_hf/base.html' %}
{% block content %}

 {{ js_hour  }}


      <div style="width: 100%; display: flex; justify-content: center; ">

          <div id="clock"></div>


    <script> 
        const display = document.getElementById('clock');
        
        
        const audio = new Audio('https://assets.mixkit.co/sfx/preview/mixkit-alarm-digital-clock-beep-989.mp3');
        audio.loop = true;
        let alarmTime = null;
        let alarmTimeout = null;
        
        
        function updateTime() {
            const date = new Date();
        
            const hour = formatTime(date.getHours());
            const minutes = formatTime(date.getMinutes());
            const seconds = formatTime(date.getSeconds());
        
        
        
            display.innerText=`${hour} : ${minutes} : ${seconds}`
        }
        
        function formatTime(time) {
            if ( time < 10 ) {
                return '0'   time;
            }
            return time;
        }
        
        function setAlarmTime(value) {
        
            alarmTime = value;
        }
        
        function setAlarm() {
            if(alarmTime) {
                const current = new Date();
                const timeToAlarm = new Date(alarmTime);
        
                if (timeToAlarm > current) {
                    const timeout = timeToAlarm.getTime() - current.getTime();
                    alarmTimeout = setTimeout(() => audio.play(), timeout);
                    setTimeout(clearAlarm, timeout   5000);
                    alert( value );
                }
            }
        }
        
        function clearAlarm() {
            audio.pause();
            if (alarmTimeout) {
                clearTimeout(alarmTimeout);
                alert("value");
            }
        }
        
        setAlarmTime
        setAlarm
        alert( value )
        
        setInterval(updateTime, 1000);
    </script>
    </div>
{% endblock %}

I'm newborn JS learner. I have no clue how to go further at this point, just to understand and adjust this current code took me hours. For starter, I'm okay to ignore all other variables (like date, minute, second). Can anyone guide me to just to get the realtime hour and then compare it with my django variable {{ js_hour }} (data type is number, and lets say its equal to 15) and if they match, ring the sound (regardless of date or minute).

The variable "value" in setAlarmTime, is the user input that is being submitted via a form, but since I dont want that form anymore, (instead, I want to use my django variables), I didnt include that part of the code here.

The form user normally submits, has HTML input field that has type of "datetime-local". I tried to write my js_hour python variable in this format, like following

views.py

js_hour = "2022-03-29T11:00"

and then adjusted following part:

alarm.html

        function setAlarmTime(value) {
        
            alarmTime = {{ js_hour  }};
        }

Thought this should do the trick. When I dont play around and just get the user input, type of alarmTime is [object HTMLInputElement], and when I replace it with {{ js_hour }}, data type turns into an object. And no alarm rings, code stop working.

Any suggestions?

CodePudding user response：

Just do

setAlarmTime("{{ js_time }}");
setAlarm()

and remove the alerts - you do not have a var called value

const display = document.getElementById('clock');
const audio = new Audio('https://assets.mixkit.co/sfx/preview/mixkit-alarm-digital-clock-beep-989.mp3');
audio.loop = true;
let alarmTime = null;
let alarmTimeout = null;


function updateTime() {
  const date = new Date();

  const hour = formatTime(date.getHours());
  const minutes = formatTime(date.getMinutes());
  const seconds = formatTime(date.getSeconds());
  display.innerText = `${hour} : ${minutes} : ${seconds}`
}

function formatTime(time) {
  if (time < 10) {
    return '0'   time;
  }
  return time;
}

function setAlarmTime(value) {
  alarmTime = value;
}

function setAlarm() {
  if (alarmTime) {
    const current = new Date();
    const timeToAlarm = new Date(alarmTime);
console.log(timeToAlarm)
    if (timeToAlarm > current) {
      const timeout = timeToAlarm.getTime() - current.getTime();
      alarmTimeout = setTimeout(() => audio.play(), timeout);
      setTimeout(clearAlarm, timeout   5000);
    }
    else { console.log("time has passed") }
  }
}

function clearAlarm() {
  audio.pause();
  if (alarmTimeout) {
    clearTimeout(alarmTimeout);
    console.log("Cleared");
  }
}
setAlarmTime("2022-03-29T12:23"); // "{{ js_time }}";
// debug
let d = new Date()
d.setSeconds(d.getSeconds()   10)
setAlarmTime(d.toString())
// end debug

setAlarm()
setInterval(updateTime, 1000);

<div style="width: 100%; display: flex; justify-content: center; ">

  <div id="clock"></div>
</div>