0

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...

1 respuesta 1

1

Tu problema está en el uso de querySelector, esta función te permite buscar elementos por id, clase, atributo, tag, etc. La distinción de que estas buscando es la misma que en el CSS, por ejemplo:

  • id -> Se agrega el prefijo # -> querySelector("#id")
  • clase -> Se agrega el prefijo . -> querySelector(".clase")
  • tag-> No se agrega prefijo -> querySelector("tag")

Entonces tu tienes que corregir tus selectores a:

let ActiveAlarm = document.querySelector(".activarAlarma"); //busca la clase activarAlarma
let hourInput = document.querySelector("#HourInput"); // busca el id HourInput
let minuteInput = document.querySelector("#MinuteInput"); // busca el id MinuteInput
1
  • muchas gracias, ya mismo voy a probar si funciona, tenes razon, no me habia dado cuenta, era una re boludes Commented el 20 abr. a las 12:28

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.