Accueil
JavaScript

Créer une application web d'alarme avec JavaScript

Salut à tous benvenue dans le tutoriel d’aujourd’hui, nous allons apprendre à créer une application de réveil. Pour créer cette application, nous avon
Coding Team
Salut à tous benvenue dans le tutoriel d’aujourd’hui, nous allons apprendre à créer une application de réveil. Pour créer cette application, nous avons besoin de HTML, CSS et Javascript. Cette application est livrée avec une fonctionnalité pour définir plusieurs alarmes en même temps.

Il s’agit d’un projet javascript de niveau intermédiaire. Je suggérerais aux débutants d’essayer d’autres projets avant d’essayer celui-ci. Si vous voulez apprendre javascript à travers plus de projets de ce type alors je vous recommande de faire une recherche à travers notre blog

Structure des dossiers du projet :

Avant de commencer à coder, nous examinons la structure des dossiers du projet. Nous créons un dossier de projet appelé - 'Alarme'. Le dossier se compose de trois fichiers. Ces fichiers sont index.html, style.css et script.js.

Code HTML

Nous commençons par le code HTML. Tout d’abord, copiez le code ci-dessous et collez-le dans votre fichier HTML.

Double taper sur le code pour copier son contenu


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Alarme Application</title>
    <!-- Font Awesome Icons -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
    />
    <!-- Google Fonts -->
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins&family=Roboto+Mono:wght@500&display=swap"
      rel="stylesheet"
    />
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="wrapper">
      <div class="timer-display">00:00:00</div>
      <div class="container">
        <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"
          />
        </div>
        <button id="set">Ajouter une alarme</button>
        <div class="activeAlarms"></div>
      </div>
    </div>
    <!-- Script -->
    <script src="script.js"></script>
  </body>
</html>

Code CSS

Ensuite, nous stylisons notre application en utilisant CSS. Pour cette copie, le code qui vous a été fourni ci-dessous et collez-le dans une feuille de style.

Double taper sur le code pour copier son contenu


* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  background-color: #377dff;
}
.hide {
  display: none;
}
.wrapper {
  background-color: #ffffff;
  width: 90%;
  max-width: 31.25em;
  padding: 3.12em 5em;
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
  top: 1em;
  border-radius: 0.5em;
}
.timer-display {
  font-size: 2.18em;
  text-align: center;
  font-family: "Roboto Mono", monospace;
}
.inputs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  margin-top: 2em;
}
.inputs input {
  width: 2.8em;
  font-size: 1.3em;
  border: 1px solid #000000;
  border-radius: 0.3em;
  padding: 0.4em 0.2em;
}
#set {
  background-color: #377dff;
  border: none;
  padding: 0.9em 1.8em;
  display: block;
  margin: 1.5em auto 0 auto;
  border-radius: 2em;
  color: #ffffff;
}
.alarm {
  display: grid;
  grid-template-columns: 8fr 2fr 2fr;
  gap: 1em;
  margin-top: 1.5em;
  align-items: center;
  border-bottom: 1px solid #898f9b;
  padding-bottom: 0.6em;
}
.alarm input[type="checkbox"] {
  appearance: none;
  height: 2em;
  width: 3.75em;
  background-color: #e2e2ec;
  border-radius: 1.25em;
  position: relative;
  cursor: pointer;
  outline: none;
}
.alarm input[type="checkbox"]:before {
  position: absolute;
  content: "";
  background-color: #757683;
  height: 1.43em;
  width: 1.43em;
  border-radius: 50%;
  top: 0.25em;
  left: 0.25em;
}
.alarm input[type="checkbox"]:checked {
  background-color: #d2e2ff;
}
.alarm input[type="checkbox"]:checked:before {
  background-color: #377dff;
  left: 2em;
}
.deleteButton {
  background-color: transparent;
  font-size: 1.5em;
  color: #377dff;
  border: none;
  cursor: pointer;
}

Code JavaScript

Enfin, nous implémentons la fonctionnalité en utilisant javascript. Pour ce faire, nous procédons comme suit :
Créer des références initiales
Ajouter des zéros pour un seul chiffre
Rechercher de la valeur dans l’objet
Temps d’affichage
Temps d’affichage (avec zéros ajoutés)
Créer une div d’alarme
Régler l’alarme
Démarrer l’alarme
Arrêter l’alarme
Supprimer l’alarme

Double taper sur le code pour copier son contenu


//Référence initiale
let timerRef = document.querySelector(".timer-display");
const hourInput = document.getElementById("hourInput");
const minuteInput = document.getElementById("minuteInput");
const activeAlarms = document.querySelector(".activeAlarms");
const setAlarm = document.getElementById("set");
let alarmsArray = [];
let alarmSound = new Audio("./alarm.mp3");

let initialHour = 0,
  initialMinute = 0,
  alarmIndex = 0;

const appendZero = (value) => (value < 10 ? "0" + value : value);

//Recherche de valeur dans l'objet
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];
};

//Afficher l'heure
function displayTimer() {
  let date = new Date();
  let [hours, minutes, seconds] = [
    appendZero(date.getHours()),
    appendZero(date.getMinutes()),
    appendZero(date.getSeconds()),
  ];
  timerRef.innerHTML = `${hours}:${minutes}:${seconds}`;

  //Alarme
  alarmsArray.forEach((alarm, index) => {
    if (alarm.isActive) {
      if (`${alarm.alarmHour}:${alarm.alarmMinute}` === `${hours}:${minutes}`) {
        alarmSound.play();
        alarmSound.loop = true;
      }
    }
  });
}

const inputCheck = (inputValue) => {
  inputValue = parseInt(inputValue);
  if (inputValue < 10) {
    inputValue = appendZero(inputValue);
  }
  return inputValue;
};

hourInput.addEventListener("input", () => {
  hourInput.value = inputCheck(hourInput.value);
});

minuteInput.addEventListener("input", () => {
  minuteInput.value = inputCheck(minuteInput.value);
});

//Créer un div pour l'alarme

const createAlarm = (alarmObj) => {
  //Keys from object
  const { id, alarmHour, alarmMinute } = alarmObj;
  let alarmDiv = document.createElement("div");
  alarmDiv.classList.add("alarm");
  alarmDiv.setAttribute("data-id", id);
  alarmDiv.innerHTML = `<span>${alarmHour}: ${alarmMinute}</span>`;

  let checkbox = document.createElement("input");
  checkbox.setAttribute("type", "checkbox");
  checkbox.addEventListener("click", (e) => {
    if (e.target.checked) {
      startAlarm(e);
    } else {
      stopAlarm(e);
    }
  });
  alarmDiv.appendChild(checkbox);
  //Delete button
  let deleteButton = document.createElement("button");
  deleteButton.innerHTML = `<i class="fa-solid fa-trash-can"></i>`;
  deleteButton.classList.add("deleteButton");
  deleteButton.addEventListener("click", (e) => deleteAlarm(e));
  alarmDiv.appendChild(deleteButton);
  activeAlarms.appendChild(alarmDiv);
};

//Définir alarme
setAlarm.addEventListener("click", () => {
  alarmIndex += 1;

  //alarmObject
  let alarmObj = {};
  alarmObj.id = `${alarmIndex}_${hourInput.value}_${minuteInput.value}`;
  alarmObj.alarmHour = hourInput.value;
  alarmObj.alarmMinute = minuteInput.value;
  alarmObj.isActive = false;
  console.log(alarmObj);
  alarmsArray.push(alarmObj);
  createAlarm(alarmObj);
  hourInput.value = appendZero(initialHour);
  minuteInput.value = appendZero(initialMinute);
});

//Démarrer l'alarme
const startAlarm = (e) => {
  let searchId = e.target.parentElement.getAttribute("data-id");
  let [exists, obj, index] = searchObject("id", searchId);
  if (exists) {
    alarmsArray[index].isActive = true;
  }
};

//Stopper l'alarme
const stopAlarm = (e) => {
  let searchId = e.target.parentElement.getAttribute("data-id");
  let [exists, obj, index] = searchObject("id", searchId);
  if (exists) {
    alarmsArray[index].isActive = false;
    alarmSound.pause();
  }
};

//supprimer l'alarme
const deleteAlarm = (e) => {
  let searchId = e.target.parentElement.parentElement.getAttribute("data-id");
  let [exists, obj, index] = searchObject("id", searchId);
  if (exists) {
    e.target.parentElement.parentElement.remove();
    alarmsArray.splice(index, 1);
  }
};

window.onload = () => {
  setInterval(displayTimer);
  initialHour = 0;
  initialMinute = 0;
  alarmIndex = 0;
  alarmsArray = [];
  hourInput.value = appendZero(initialHour);
  minuteInput.value = appendZero(initialMinute);
};

Télécharger le code source

C’est tout pour ce tutoriel. Si vous rencontrez des problèmes lors de la création de ce code, vous pouvez télécharger le code source en cliquant sur le bouton de téléchargement ci-dessous.

Le mot de passe du fichier est bip-bip

Télécharger le code source

Apercu du fichier sur Telegram

1 commentaire

  1. Coding Team
    Coding Team
    merci d'avoir lu cette publication. vos questions seront les bienvenues
N'hésitez pas de mentionner votre nom d'utilisateur Telegram à la fin de votre message pour recevoir des cadeaux de la part des modérateurs. Merci de commenter