Discussion :

[Rikko]

Bonjour,
je me presente d'abord, car je suis nouveau, je m'appelle Aurelien et je viens sur ce forum parceque je cherche depuis des semaines deja un moyen d'arriver à finir mon projet.
Depuis trop longtemps je stock mes infos d'identifiants et mot de passe + eventuellement des commentaires dans un fichier texte, et je voudrais enfin pouvoir faire un regroupement et des manipulations de ceux ci de façon plus simple et rapide.
Mes connaissances en programmation sont limitées.
J'ai besoin d'une page html + javascript qui fonctionne en local, celle ci serait (idéalement) un tableau interactif.
D'abord je voudrais un bouton "créer" qui ouvre un pop up avec un champ texte pour l'adresse mail, un champ texte pour le pseudo, un champ texte pour le mot de passe et enfin un champs texte pour des commentaires personels.
Ensuite une fois validé cela genererait un tableau avec 1 cellule pour chaque champ sur 1 même ligne. Ensuite pouvoir le refaire avec une nouvelle ligne en refaisant "créer"
Chaque ligne et/ou chaque cellule de la ligne aurait une case que l'on peut cocher pour la selectionner et une fois ceci fait avoir la possibilité de deplacer vers le haut ou le bas ou même supprimer cette ligne.
Enfin une petite fonction qui est je crois propre à javascript, celle d'utiliser la fonctionne "copy to clipboard" pour chaque cellule selectionnée.

Voila mes inspirations, normalement ça doit prendre 15 min à faire mais comme je l'ai dis je n'y pas connais pas assez dans le domaine pour le faire.
Eventuellement si vous avez des idées à ajouter ça interesserait tout le monde

Bon week end.

[Watilin]

Bonjour Aurelien,
ce que tu décris ressemble fort à un gestionnaire de mots de passe (password manager) et il en existe plein sur le Net, dont des gratuits qui fonctionnent très bien, tu devrais essayer.

Si après ça tu as toujours envie de développer ta propre solution, voici quelques conseils.

Le plus important est de s’équiper des bons outils pour développer et expérimenter. Tous les navigateurs modernes ont une console qui s’ouvre avec F12. Dans cette console, tu peux saisir des lignes de code JS et les exécuter pour voir le résultat en temps réel.
De plus, si tu utilises console.log() dans tes scripts, les messages apparaîtront dans la console. C’est comme alert() mais en plus pratique.

Développer une application telle que ce que tu décris n’est pas si trivial que tu imagines. On est bien loin des 15 minutes car j’ai déjà passé deux jours à faire des tests sur les différentes techniques dont tu auras besoin. En voici une liste, brièvement résumée. Pour ne pas te décourager, je te conseille faire les choses étape par étape.

Pour stocker des informations de manière persistante, tu vas avoir besoin de deux choses :

1. Une API de stockage : localStorage ou indexedDB. localStorage est plus simple, mais ne sait stocker que des chaînes ; si tu veux stocker des données structurées, je te conseille de les sérialiser avec JSON.stringify().
2. La permission de faire persister les données, que tu obtiens avec navigator.storage.persist(). Attention, c’est une fonctionnalité récente et les navigateurs ne la gèrent pas tous de la même façon. Firefox ne pose pas de problème, mais avec Chrome, tu dois utiliser un serveur local et ajouter l’adresse localhost à tes marque-pages ou sur ta page d’accueil (voir cette page en anglais pour plus d’infos).

Pour construire un tableau via JavaScript et manipuler ses lignes, tu peux faire des bidouilles à base de innerHTML mais ça va vite devenir un cauchemar. Il vaut mieux utiliser les méthodes du DOM : createElement(), appendChild(), etc., ainsi que les méthodes spécifiques aux tableaux dont insertRow() et insertCell().

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
const table = document.createElement("table");
 
const row1 = table.insertRow();
row1.insertCell().textContent = "A";
row1.insertCell().textContent = "B";
row1.insertCell().textContent = "C";
 
const row2 = table.insertRow();
row2.insertCell().textContent = "D";
row2.insertCell().textContent = "E";
row2.insertCell().textContent = "F";
 
document.body.append(table);

Tu peux aussi t’aider d’un <template> mais ce n’est pas obligatoire.

pour créer une popup, c’est comme avec la table : utilise les méthodes du DOM, et un <template> éventuellement, pour créer et attacher du contenu. Les styles CSS t’aideront à positionner un bloc par-dessus les autres et le faire ressortir, de sorte que ça ait l’aspect d’une boîte de dialogue. Voici un exemple minimaliste :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<div id="dialog" class="modal" style="display: none">
    <div class="modal-contents">
      <p>
        Une boîte de dialogue.
      </p>
      <p>
        <button>Ok</button>
      </p>
    </div>
  </div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.modal {
    /* fond semi-transparent */
    background: rgba(0, 0, 0, 0.5);
 
    /* étire le fond sur toute la page */
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
 
    /* centre le contenu si margin: auto */
    display: flex;
}
 
.modal-contents {
    /* centré par rapport au parent display: flex */
    margin: auto;
 
    /* fait ressortir le contenu */
    background: white;
 
    /* pour faire plus joli */
    padding: 1em;
    text-align: center;
}

Note l’attribut style="display: none" qui fait que la boîte de dialogue est invisible au départ.
Bien sûr il faut pouvoir afficher et masquer la boîte, ça sera le rôle des boutons. Par exemple, pour ton bouton « Créer », on peut imaginer ceci :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<button id="button-create">Créer</button>

(Ne t’inquiète pas si c’est moche, il y a toujours moyen de mettre du CSS après.)
Pour ajouter du comportement au bouton, il faut observer ses évènements "click", par exemple en lui attachant une fonction onclick :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
"use strict"; // voir https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Strict_mode
 
const buttonCreate = document.getElementById("button-create");
const dialog       = document.getElementById("dialog");
const buttonClose  = document.getElementById("button-close");
 
buttonCreate.onclick = function () {
  // supprime "display: none"
  // ça repasse à "flex" tel que déclaré dans le CSS
  dialog.style.display = "";
};
 
buttonClose.onclick = function () {
  dialog.style.display = "none";
};

Attention à l’endroit où tu mets tes balises <script>. Si tu les places avant le contenu (boutons, dialogue, etc.), le script s’exécutera trop tôt et les éléments n’existeront pas encore. C’est un piège classique, tu as trois solutions :

• placer les scripts à la fin du <body> ;
• observer l’évènement "DOMContentLoaded" ;
• ajouter des attributs defer.

Pour copier des données dans le presse-papiers, un simple navigator.clipboard.writeText() suffit. Je n’ai pas trouvé de cas où ça ne marchait pas.


Choisis une partie à développer en premier, dis-moi laquelle et je t’aiderai si tu bloques