DEV Community: GloiMir

Simple pomodoro avec Html, CSS et Javascript

GloiMir — Fri, 16 Dec 2022 12:19:29 +0000

Dans le présent article, je vais créer un compteur à rebours.
Mon compteur est double en ce sens qu'il passe sans transition de la séance de travail à la séance de repos.
Le période initiale de travail est de 25 minutes et celle de repos est de 5 minutes.

L’interface utilisateur du projet est composé de 3 grandes parties; l'afficheur, la barre de progression et les boutons de commande

L'AFFICHEUR

Il s'agit de cette partie supérieure de l'application; c'est ici qu'est signalé dans quelle séance on est(travail ou repos) et c'est ici qu'est signalé le temps restant pour la séance en cours(minutes et secondes)

html

<div id="afficheContainer">
    <span id="titre">WORK SESSION</span>
    <span id="afficheur">25 : 00</span>
</div>

css

#afficheContainer{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    background-color: black;
    border-radius: 10px;
    padding: 5px;
}
#titre{
    font-weight: bold;
    opacity: 1;
    font-size: large;
    color:  #1E90FF;
}
#afficheur{
    font-weight: bold;
    opacity: 1;
    color:  #1E90FF;
    font-size: large;
}

javascript

//Les variables du titre et chrono
let titre = document.getElementById("titre")
let afficheur = document.getElementById("afficheur")
//Texte du tire, sa couleur et la couleur du chrono selon la séance à laquelle nous sommes 
titre.innerText = 'WORK SESSION'
titre.style.color =     '#1E90FF' 
afficheur.style.color = "#1E90FF" 
//Affichage du temps restant pour la séance dans le chrono
afficheur.innerText = `${workSession} : ${seconde}`

LA BARRE DE PROGRESSION

Il s'agit de l'arc en progression au milieu de l'interface utilisateur.
Son rôle est de donner à l'utilisateur l'idée sur le temps qui est déjà écoulé dans la séance en cours
Cette fonctionnalité à été rendue possible grâce à la puissance de l’élément canvas, l'une de nouveautés de HTML5.
Canvas présentant la possibilité de dessiner les arcs dans la page web, nous nous en sommes servi pour dessiner progressivement cet arc dans notre page.

Pour le travail, à 360° correspond 1500 secondes(d'ici on peut facilement trouver l'angle de progression à chaque seconde)

html

        <canvas id="w" width="300" height="300"></canvas>

javascript

//Configuration de canvas
let w = document.querySelector("#w");
let work = w.getContext("2d");
work.lineWidth = 10
//Initialisation des angles de progression
let progression = -Math.PI / 2
let progression2 = -Math.PI / 2
//Progression de l'arc dans la seance de travail
progression = progression + 0.24 * Math.PI / 180
work.beginPath();
work.arc(centreX, centreY, 100, -Math.PI / 2,progression);//centreX et centreY sont le centre de l'arc,100 est le rayon 
work.stroke();

LES BOUTONS DE COMMANDE

Il s'agit de 2 boutons dans la partie inférieure du projet, l'un servant à l'actualisation et l'autre à jouer ou pauser

html

<div id="buttonContainer">
     <button id="stop">
            <img src="refresh.svg" alt="" />
     </button>
     <button id="play">
            <img src="pause.svg" alt="" />
     </button>
</div>

css

#buttonContainer{
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-around;
    margin-bottom: 20px;
}
button{
    background-color:   #1E90FF;
    border-style: none;
    border-radius: 25px;
}

javascript

//Variables de 2 boutons
let stop = document.getElementById("stop")
let play = document.getElementById("play")
//Actions aux 2 boutons
stop.addEventListener('click', (e) => {
    document.location.reload()
})

play.addEventListener('click', (e) => {
    progress = !progress
    chrono()
})

Merci d'avoir pris de votre temps pour lire cet article, pour une bonne compréhension des codes, veillez récupérer le code complet du projet sur https://github.com/GloiMir/pomodoro-html.git

LES JOINTURES EN SQL

GloiMir — Tue, 01 Nov 2022 17:11:40 +0000

INTRODUCTION:

En SQL,la jointure est un moyen de mettre en liaison deux ou plusieurs tables.
La jointure avait été créée pour éviter le problème d’avoir plusieurs colonnes dans une table.
Imaginez une table qui enregistre les information d’une personne mais parmi ces informations on doit mentionner quelque part les informations de son père et de sa mère.
Dans un premier temps,on sera tenté de créer une table (Personne) avec les colonnes suivantes:id, nom, post-nom, prénom, sexe, age, téléphone, mail, nom-pére, post-nom-pére, prénom-pére, âge-pére, téléphone-pére, mail-pére, nom-mère, post-nom-mère, prénom-mère, âge-mère, téléphone-mère, mail-mère.
Nous nous retrouvons avec cette grande table de plus de 20 colonnes.
La jointure met en avant le principe de diviser pour mieux gérer ; elle réduit le nombre de colonnes mais augmente le nombre de tables pour mieux manipuler les données.
Ainsi, grâce à la jointure nous pouvons avoir 3 tables ici chacune avec un nombre réduit de colonnes ; table Personne(id, nom, post-nom, prénom, sexe, âge, téléphone, mail, id-pére, id-mère), table Pére(id, nom, post-nom, prénom, âge, téléphone, mail) et table Mère(id, nom, post-nom, prénom, âge, téléphone, mail).
La jointure est basée sur la notion de clé étrangère, une clé étrangère est une clé(colonne) normale dans une table mais qui est clé primaire dans une autre table.
Dans notre cas les clés id-pére et id-mère sont des clés étrangères dans la table Personne car elles sont respectivement clés primaires dans les tables Pére et Mère.
Dans le cadre de cet article, nous allons utiliser le SGBD Postgresql.
Contenu de la table Personne

Contenu de la table Pere

Contenu de la table Mere

SYNTAXE:

Dans la syntaxe de jointures, 2 mots clés sont très importants:
JOIN: Prends à sa gauche et à sa droite les 2 tables qu'on veut joindre.
ON: Prend à sa droite les clés de liaison de 2 tables mentionnées de part et d'autre de JOIN.
Table1 JOIN Table2 ON clé-de-liaison(dans Table1) = clé-de-liaison(dans Table2)
Donc, si nous voulons afficher les informations du père de Gloire, nous devons exécuter le script suivant:
SELECT Pere.* FROM Pere JOIN Personne ON Pere.id=Personne.id-pere WHERE Personne.prenon='Gloire'

Il est nécessaire de signaler le nom de la table avant chaque colonne pour éviter le conflit d’ambiguïté.

TYPES:

Les différents types de jointures sont :

- Inner join: Jointure interne qui retourne les enregistrements lorsque la condition est vérifiée dans les 2 tables.

- Cross join: Jointure qui permet de joindre chaque ligne d’une table avec chaque ligne de l’autre table.

- Left join:Jointure permettant de retourner toutes les entrées de la table de gauche.

- Right join:Jointure permettant de retourner toutes les entrées de la table de droite.

- Full join:Jointure retournant les résultats lorsque la condition est vérifiée dans au moins l’une de tables.

- Self join: Jointure d'une table avec elle même.

SELECT `t1`.`nom_colonne1`, `t1`.`nom_colonne2`, `t2`.`nom_colonne1`,
`t2`.`nom_colonne2`
FROM `table` as `t1`
LEFT OUTER JOIN `table` as `t2` ON `t2`.`fk_id` = `t1`.`id`

- Natural join: Jointure naturelle entre 2 tables s'il y a au moins une colonne qui porte le même nom entre les 2 tables.

- Union join: Jointure union

RENOMMAGE:
En SQL,le renommage(alias) c'est l'utilisation de lettres ou consonnes simples à la place de noms des tables pour éviter des longues lignes des scripts généralement lorsqu'on fait des jointures complexes.

CONCLUSION:
Enfin, connaissant tous la complexité de manipulation des données de nos jours,et la jointure étant l'une de techniques qui simplifient cette manipulation, je nous invite à se servir du présent article pour se mettre en contact avec cette technique et avoir la facilité de nous y approfondir.