Comment utiliser le moteur de modèle EJS dans votre application Node.js

Dr. Code — Fri, 02 Jun 2023 10:39:17 +0000

Introduction

Bonjour, dans cet article, vous allez apprendre comment utiliser le moteur de modèle EJS dans une application Node.js/Express.

Qu’est-ce qu’un moteur de modèle ?
En général, chaque moteur de template utilise un langage différent pour définir un template HTML et y injecter des données. Il y a quelques moteurs de template autres que EJS comme:
Pug, Jade, Vash, Mustache, Dust.js, Nunjucks, …

Moteur de modèles EJS
EJS est l’acronyme de Embedded JavaScript Templates. Nous pouvons utiliser EJS à la fois du côté client et du côté serveur. Il peut également injecter des données dans un modèle HTML.

EJS Tags

<% %> Flux de contrôle
<%= %>Affichage
<%- %>Sortie brute non escamotée
Example:

<% if (user) { %>
<p><%= user.username %></p>
<% } %>

Utiliser EJS avec Express
Pour commencer à utiliser EJS comme moteur de modèle, nous devons d’abord installer EJS et Express :

npm i express ejs --save

Après avoir installé EJS et Express, la première chose à faire est de créer un serveur web en utilisant Express pour définir EJS comme notre moteur de vue.

Activer EJS comme moteur de template
Après l’avoir fait, nous devons créer un dossier views puisque EJS cherche dans le dossier ‘views’ les modèles à rendre. Après avoir créé le dossier, il faudra créer les fichiers avec l’extension .ejs exemple “index.ejs”.

Enfin vous pouvez écrire les codes HTML avec le balise de EJS et dynamiser nos contenus avec différentes fonctionnalités comme l’affichage, les conditions, boucles, etc

Conclusion
Pour résumer, EJS est un très bon moteur de template qui est fait pour Node.JS. Il est bon d’utiliser EJS pour les raisons suivantes :

Basique, facile à utiliser
Accélère la période de développement Web
Flexible

Merci de nous avoir lu !

Création d’un pomodoro avec du vanilla JavaScript

Dr. Code — Fri, 02 Jun 2023 10:36:06 +0000

Comment fonctionne un pomodoro?
Un pomodoro est une application web front-end qui fait un compte à rebours en utilisant la technique de vous concentrer pendant une courte période de temps, puis de faire une pause. avec des paramètres de minuterie personnalisables.

Dans notre cas, nous avons fait une session de 25 minutes et une pause de 5 minutes par défaut.

Technologies utilisées
Pour réaliser notre application nous avons utilisé les technologies suivantes:

HTML5
CSS3
JavaScript ES6+
User Stories
L’utilisateur est capable de :

Démarrer une session
Visualiser le statut de la session et de la pause
Pauser une session
Réinitialiser une session

Développement de l’application
Il faudra d’abord créer un dossier nommé “Pomodoro”, ensuite dans ce dossier, nous allons créer 3 fichier index.html, style.css et script.js.

Dans notre fichier html, nous allons creer deux sections, l’une qui va contenir le compteur et le progress et l’autre va contenir le le groupe des boutons.

<main>
  <section class="clock">
    <div class="mins">0</div>
    <span>:</span>
    <div class="secs">00</div>
    <audio src="http://soundbible.com/mp3/service-bell_daniel_simion.mp3"></audio>
    <svg class="progress-ring" height="120" width="120">
        <circle class="progress-ring__circle" stroke="rgba(233, 233, 57, 0.631)" stroke-width="12"
            fill="transparent" r="50" cx="60" cy="60" />
    </svg>
  </section>

  <section class="btn-group">
     <button class="start"><i class="fa fa-play"></i></button>
     <button class="pause"><i class="fa fa-pause"></i></button>
     <button class="reset"><i class="fa fa-stop"></i></button>
  </section>
</main>

Pour le progress bar, nous allons utiliser la balise SVG, qu’on va en plus personnaliser avec le JavaScript.

Maintenant notre page est formidable, enfin nous allons manipuler notre DOM avec le JS, nous allons d’abord cibler nos elements HTML avec la methode querySelector de l’objet document, declarer et initialiser nos variables.

const sonnerie = document.querySelector("audio");

const mindiv = document.querySelector(".mins");
const secdiv = document.querySelector(".secs");

const startBtn = document.querySelector(".start");
const pauseBtn = document.querySelector(".pause");

let timerContainer, totalsecs, perc, paused, seconds;
let mins = 25;

const circle = document.querySelector(".progress-ring__circle");
const radius = circle.r.baseVal.value;

Pour realiser notre bar de progression, nous avons utiliser la balise SVG, qu’on va dynamiser avec notre fonction setProgress qui prendra une poucentage en prametre en reference avec le temps ecoulé.

const circumference = radius * 2 * Math.PI;

circle.style.strokeDasharray = circumference;
circle.style.strokeDashoffset = circumference;

function setProgress(percent) {
  const offset = circumference - (percent / 100) * circumference;
  circle.style.strokeDashoffset = offset;
}

Plongeons à dans le coeur de notre application en créant l’une des fonctions utiles notamment la fonction pour decrementer le compteur de temps qu’on va nommer decrement dans cette fonction on va decrementer les secondes, puis on va mettre en place certaines conditions, l’une qui va tester si la seconde arrive à 0 et l’autre qui va tester si nos minutes pour la session sont epuisés et alterner vers la pause.

function decrement() {
  mindiv.textContent = Math.floor(seconds / 60);
  secdiv.textContent = seconds % 60 > 9 ? seconds % 60 : `0${seconds % 60}`;
  if (circle.classList.contains("danger")) {
    circle.classList.remove("danger");
  }

  if (seconds > 0) {
    perc = Math.ceil(((totalsecs - seconds) / totalsecs) * 100);

    setProgress(perc);
    seconds--;
    timerContainer = window.setTimeout("decrement()", 1000);
    if (seconds < 10) {
      circle.classList.add("danger");
    }
  } else {
    mins = 0;
    seconds = 0;
    sonnerie.play();
    let btn = localStorage.getItem("btn");

    if (btn === "focus") {
      startBtn.textContent = "start break";
      startBtn.classList.add("break");
      localStorage.setItem("btn", "break");
    } else {
      startBtn.classList.remove("break");
      startBtn.textContent = "start session";
      localStorage.setItem("btn", "focus");
    }
    startBtn.style.transform = "scale(1)";
  }
}

Afin nous allons mettre en place les evenements sur nos trois bouttons, l’un qui pour but de démarrer le timer, ensuite l’autre aura pour but de mettre le timer en pause afin celui qui va réinitialiser notre compteur.

startBtn.addEventListener("click", () => {

  seconds = mins * 60;
  totalsecs = mins * 60;
  setTimeout(decrement());
  startBtn.style.transform = "scale(0)";
  pauseBtn.style.transform = "scale(1)";
  paused = false;
});

pauseBtn.addEventListener("click", () => {
  clearTimeout(timerContainer);
  pauseBtn.style.transform = "scale(0)";
  startBtn.style.transform = "scale(1)";
});

reset.addEventListener("click", () => {
  clearTimeout(timerContainer);
  perc = 0;
  seconds = 0;
  mindiv.textContent = `00`;
  secdiv.textContent = `0${seconds}`;
  setProgress(perc);
  pauseBtn.style.transform = "scale(1)";
  startBtn.style.transform = "scale(1)";
});

Et voilà ! Maintenant vous avez appliqué les principes du pomodoro, avec du vanilla JavaScript, pour d’explorations et contributions vous pouvez retrouver mon dépot Github ICI.

Forem: Dr. Code

Comment utiliser le moteur de modèle EJS dans votre application Node.js

Création d’un pomodoro avec du vanilla JavaScript