quiero hacer un reloj donde puedas agregar alarmar personalizadas, obviamente como toda alarma que suene cuando sea la hora, pero a la hora de reproducir el codigo me salta que hay error en la siguiente linea del código (la 70):
lo que quiero es que esas dos funciones que marque en el codigo funcionen y no tiren error, desconozco si alguna esta al escrita o no hace lo que deberia hacer, sinceramente estoy en bolas
let setAlarm = document.getElementById("set");
let ActiveAlarm = document.querySelector("activarAlarma");
let hourInput = document.querySelector("HourInput");
let minuteInput = document.querySelector("MinuteInput");
let alarmsArray = [];
let Sound = new Audio(`paradise.mp3`);
let initialHour = 0,
initialMinute = 0,
alarmIndex = 0;
const appendZero = (value) => (value < 10 ? "0" + value : value);
//Search for value in object
const searchObject = (parameter, value) => {
let alarmObject,
objIndex,
exists = false;
alarmsArray.forEach((alarm, index) => {
if (alarm[parameter] == value) {
exists = true;
alarmObject = alarm;
objIndex = index;
return false;
}
});
return [exists, alarmObject, objIndex];
};
function currentTime() {
let date = new Date ();
let hh = date.getHours();
let mm = date.getMinutes();
let ss = date.getSeconds();
hh = (hh < 10) ? "0" + hh : hh;
mm = (mm < 10) ? "0" + mm : mm;
ss = (ss < 10) ? "0" + ss : ss;
let time = hh + ":" + mm + ":" + ss;
let watch = document.querySelector(`#watch`);
watch.innerHTML = time;
alarmsArray.forEach((alarm, index) => {
if (alarm.isActive) {
if (`${alarm.alarmHour}:${alarm.alarmMinute}` === `${hours}:${minutes}`) {
alarmSound.play();
alarmSound.loop = true;
}
}
});
}
//!AGREGA UN CERO AL VALOR DEL INPUT
const inputCheck = (inputValue) => {
inputValue = parseInt(inputValue);
if (inputValue < 10) {
inputValue = appendZero(inputValue);
}
return inputValue;
};
hourInput.addEventListener("input", () => {
hourInput.value = inputCheck(hourInput.value); //--->estas 2 son las que dan error
});
minuteInput.addEventListener("input", () => {
minuteInput.value = inputCheck(minuteInput.value); //--->estas 2 son las que dan error
});
*{
margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
cursor: default;
}
body{
display: flex;
justify-content: center;
/* width: 100vw;
height: 100vh; */
width: 100%;
height: 100vh;
overflow: hidden;
background-color: #252525;
padding: 30px 40px 20px 40px;
/* border: 2px solid #f00; */
/* padding: 50px 0 0 0; */
}
#watch{
display: flex;
align-items: center;
justify-content: center;
height: 280px;
width: 280px;
border: 4px solid #b16904;
color: #b16904;
border-radius: 50%;
font-family: monospace;
font-size: 1.8rem;
}
.container{
padding: 20px 0 0 0;
display: flex;
flex-direction: column;
align-items: center;
/* justify-content: flex-start; */
background-color: #333333;
border-radius: 20px;
width: 400px;
height: 500px;
}
.inputs{
padding: 25px;
}
.inputs input{
width: 60px;
height: 60px;
border-radius: 5px;
padding: 5px 5px 5px 20px;
font-size: 1.2rem;
color: #fff;
font-family: monospace;
text-align: center;
background-color: #252525;
border: 0;
}
.inputs input::placeholder{
color: #fff;
}
.inputs input:focus{
outline: none;
}
#set{
width: 120px;
height: auto;
/* outline: none; */
border: 2px solid #333333;
border-radius: 6px;
background-color: #b16904;
color: #fff;
font-size: 1.2em;
font-family: monospace;
padding: 5px;
}
#set:active{
cursor: pointer;
outline: none;
background-color: #252525;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alarma</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div id="watch"></div>
<div class="inputs">
<input type="number" id="HourInput" placeholder="00" min="0" max="23"/>
<input type="number" id="MinuteInput" placeholder="00" min="0" max="59" step="15"/>
</div>
<button id="set">Añadir Alarma</button>
<div class="activarAlarma"></div>
</div>
<script src="script.js"></script>
</body>
</html>
algo a destacar del codigo es la funcion currentTime, la saque de un video de como hacer un reloj, y todo el otro codigo de un tutorial de como hacer una alarma, queria combinarlos, no se si eso genera el problema...