Vous le savez sûrement mais au-delà des échanges textuels, l’IA de chatGPT peut générer du code, le commenter et surtout l’expliquer.
Je lui ai donc demandé de me transmettre un code en Vanilla JavaScript, HTML et CSS afin de créer un générateur de mot passe aléatoire.
Pour les impatients, vous pouvoir le démonstration du code ici et copier le ici
1. Contextualisez votre demande à ChatGPT
Tu es un développeur web et tu dois me créer un générateur de mot de passe en javascript
Voici un exemple de générateur de mot de passe en JavaScript :
function generatePassword(length) {
var password = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!#$%&()*+,-./:;<=>?@[]^_`{|}~";
for (var i = 0; i < length; i++) {
password += possible.charAt(Math.floor(Math.random() * possible.length));
}
return password;
}
Cette fonction prend en paramètre la longueur souhaitée pour le mot de passe et retourne un mot de passe aléatoire généré en utilisant les caractères possibles définis dans la variable « possible ». Vous pouvez également ajouter ou supprimer des caractères à cette variable pour personnaliser les caractères utilisés pour générer le mot de passe.
2. Affinez votre demande à ChatGPT
Peux-tu me créer un formulaire qui exécutera cette fonction et qui affichera le mot de passe généré
Voici un exemple de formulaire HTML qui exécute la fonction de générateur de mot de passe lorsque l’utilisateur soumet le formulaire, et qui affiche le mot de passe généré dans une zone de texte :
<form onsubmit="generateAndDisplayPassword()">
<label for="length">Entrez la longueur souhaitée pour le mot de passe :</label>
<input type="number" id="length" name="length" min="1">
<input type="submit" value="Générer le mot de passe">
</form>
<br>
<textarea id="password" readonly></textarea>
<script>
function generateAndDisplayPassword() {
var length = document.getElementById("length").value;
var password = generatePassword(length);
document.getElementById("password").innerHTML = password;
}
function generatePassword(length) {
var password = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!#$%&()*+,-./:;<=>?@[]^_`{|}~";
for (var i = 0; i < length; i++) {
password += possible.charAt(Math.floor(Math.random() * possible.length));
}
return password;
}
</script>
Ce code crée un formulaire qui demande à l’utilisateur de saisir la longueur souhaitée pour le mot de passe. Lorsque l’utilisateur soumet le formulaire en cliquant sur le bouton « Générer le mot de passe », la fonction « generateAndDisplayPassword » est exécutée. Cette fonction utilise la longueur saisie par l’utilisateur pour générer un mot de passe en utilisant la fonction de générateur de mot de passe définie, puis affiche le mot de passe généré dans la zone de texte avec l’ID « password ».
Le code me paraît tout à fait cohérent par rapport au peu d’information que je lui ai fourni, je m’étonne juste de l’utilisation de var au lieu de let pour la déclaration des variables, mais cela peut être un choix de compatibilité avec les anciens navigateurs.
3. Ajout de fonctionnalités au code initial
Peux tu ajouter dans le code qui permet de prévenir du comportement par défaut des formulaires
Oui, voici à quoi pourrait ressembler le code HTML avec la prévention du comportement par défaut des formulaires :
<form onsubmit="generateAndDisplayPassword(); return false;">
<label for="length">Entrez la longueur souhaitée pour le mot de passe :</label>
<input type="number" id="length" name="length" min="1">
<input type="submit" value="Générer le mot de passe">
</form>
<br>
<textarea id="password" readonly></textarea>
<script>
function generateAndDisplayPassword() {
var length = document.getElementById("length").value;
var password = generatePassword(length);
document.getElementById("password").innerHTML = password;
}
function generatePassword(length) {
var password = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!#$%&()*+,-./:;<=>?@[]^_`{|}~";
for (var i = 0; i < length; i++) {
password += possible.charAt(Math.floor(Math.random() * possible.length));
}
return password;
}
</script>
La ligne « onsubmit = »generateAndDisplayPassword(); return false; » dans l’élément <form> est ce qui prévient le comportement par défaut des formulaires. Lorsque l’utilisateur soumet le formulaire, la fonction « generateAndDisplayPassword » est d’abord exécutée, puis « return false » empêche le navigateur de soumettre le formulaire. Cela évite que la page ne soit actualisée et que les données saisies dans le formulaire ne soient perdues.
Je vous invite à vérifier que cette solution est adaptée à votre projet. Si cela ne répond pas à vos besoins, il existe d’autres méthodes pour prévenir le comportement par défaut des formulaires en javascript, comme event.preventDefault().
Je suis étonné qu’il ne m’ait pas proposé comme choix par défaut event.preventDefault() qui davantage utilisé de nos jours.
Peux tu ajouter un message d'erreur si le champ longueur du mot de passe n'est pas renseignéVoici comment le code HTML pourrait être modifié pour afficher un message d’erreur si le champ de longueur de mot de passe n’est pas renseigné :
<form onsubmit="return generateAndDisplayPassword();">
<label for="length">Entrez la longueur souhaitée pour le mot de passe :</label>
<input type="number" id="length" name="length" min="1" required>
<input type="submit" value="Générer le mot de passe">
</form>
<br>
<textarea id="password" readonly></textarea>
<button id="copy-button" onclick="copyPassword()">Copier le mot de passe</button>
<div id="error-message" style="color: red;"></div>
<script>
function generateAndDisplayPassword() {
var length = document.getElementById("length").value;
if(!length) {
document.getElementById("error-message").innerHTML = "Veuillez entrer une longueur pour le mot de passe";
return false;
}
var password = generatePassword(length);
document.getElementById("password").innerHTML = password;
return true;
}
function generatePassword(length) {
var password = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!#$%&()*+,-./:;<=>?@[]^_`{|}~";
for (var i = 0; i < length; i++) {
password += possible.charAt(Math.floor(Math.random() * possible.length));
}
return password;
}
function copyPassword() {
var password = document.getElementById("password");
password.select();
document.execCommand("copy");
alert("Mot de passe copié dans le presse-papiers!");
}
</script>
Ce code ajoute une validation du champ de longueur du mot de passe dans la fonction « generateAndDisplayPassword » en utilisant l’opérateur ! pour vérifier si le champ de longueur de mot de passe est vide ou non (if(!length)). Si le champ de longueur de mot de passe est vide, un message d’erreur est affiché dans un élément de div avec l’ID « error-message » et la fonction retourne false pour empêcher la soumission du formulaire. Si le champ de longueur de mot de passe n’est pas vide, la fonction continue de générer et d’afficher le mot de passe, puis retourne true.
Note: Il est possible de utiliser l’attribut required sur l’input de type number pour vérifier que le champ est rempli lorsque le formulaire est soumis, cela évitera l’utilisation d’une fonction.
Peux-tu ajouter des checkboxes pour séparer les lettres minuscules, les lettres majuscules, les nombres, les caractères spéciaux. Afin que l'utilisateur puisse lui même choisir la complexité du mot de passe<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form onsubmit="return generateAndDisplayPassword();">
<label for="length">Entrez la longueur souhaitée pour le mot de passe :</label>
<input type="number" id="length" name="length" min="1" required>
<br>
<input type="checkbox" id="lowercase" name="lowercase" checked>
<label for="lowercase">Inclure des minuscules</label>
<br>
<input type="checkbox" id="uppercase" name="uppercase" checked>
<label for="uppercase">Inclure des majuscules</label>
<br>
<input type="checkbox" id="numbers" name="numbers" checked>
<label for="numbers">Inclure des chiffres</label>
<br>
<input type="checkbox" id="special" name="special" checked>
<label for="special">Inclure des caractères spéciaux</label>
<br>
<input type="submit" value="Générer le mot de passe">
</form>
<br>
<textarea id="password" readonly></textarea>
<button id="copy-button" onclick="copyPassword()">Copier le mot de passe</button>
<div id="error-message" style="color: red;"></div>
<script>
function generateAndDisplayPassword(event) {
event.preventDefault();
var length = document.getElementById("length").value
if(!length) {
document.getElementById("error-message").innerHTML = "Veuillez entrer une longueur pour le mot de passe";
return false;
}
var lowercase = "abcdefghijklmnopqrstuvwxyz";
var uppercase = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var numbers = "0123456789";
var special = "!#$%&()*+,-./:;<=>?@[]^_`{|}~";
var possible = "";
if(document.getElementById("lowercase").checked) {
possible += lowercase;
}
if(document.getElementById("uppercase").checked) {
possible += uppercase;
}
if(document.getElementById("numbers").checked) {
possible += numbers;
}
if(document.getElementById("special").checked) {
possible += special;
}
var password = "";
for (var i = 0; i < length; i++) {
password += possible.charAt(Math.floor(Math.random() * possible.length));
}
document.getElementById("password").innerHTML = password;
return false;
}
function copyPassword() {
var password = document.getElementById("password");
password.select();
document.execCommand("copy");
alert("Mot de passe copié dans le presse-papiers!");
}
</script>
</body>
</html>
A ce moment précis, le code ci-dessus « ne fonctionne pas« . De plus, il utilise des fonctions obsolètes comme document.execCommand(). Il est préférable d’utiliser l’API Clipboard. En réalité, le code fonctionne, mais il n’a pas gardé en mémoire que je voulais qu’on prévienne le comportement par défaut des formulaire. De ce fait, lorsque j’exécute le formulaire, la page se recharge et je ne vois aucun mot de passe généré.
Le code ne fonctionne plus.
Le comportement du formulaire est resté par défaut, peux-tu corriger celaIl y a plusieurs façons de prévenir le comportement par défaut d’un formulaire en JavaScript, mais l’une des façons les plus courantes consiste à utiliser l’événement submit de JavaScript pour écouter la soumission du formulaire, puis utiliser la méthode preventDefault() pour empêcher le comportement par défaut de soumission du formulaire.
Voici comment le code pourrait être modifié pour inclure cette fonctionnalité:
<form id="password-form">
<label for="length">Entrez la longueur souhaitée pour le mot de passe :</label>
<input type="number" id="length" name="length" min="1" required>
<br>
<input type="checkbox" id="lowercase" name="lowercase" checked>
<label for="lowercase">Inclure des minuscules</label>
<br>
<input type="checkbox" id="uppercase" name="uppercase" checked>
<label for="uppercase">Inclure des majuscules</label>
<br>
<input type="checkbox" id="numbers" name="numbers" checked>
<label for="numbers">Inclure des chiffres</label>
<br>
<input type="checkbox" id="special" name="special" checked>
<label for="special">Inclure des caractères spéciaux</label>
<br>
<input type="submit" value="Générer le mot de passe">
</form>
<br>
<textarea id="password" readonly></textarea>
<button id="copy-button" onclick="copyPassword()">Copier le mot de passe</button>
<div id="error-message" style="color: red;"></div>
<script>
var form = document.getElementById("password-form");
form.addEventListener("submit", function(event) {
event.preventDefault();
var length = document.getElementById("length").value;
if(!length) {
document.getElementById("error-message").innerHTML = "Veuillez entrer une longueur pour le mot de passe";
return false;
}
var lowercase = "abcdefghijklmnopqrstuvwxyz";
var uppercase = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var numbers = "0123456789";
var special = "!#$%&()*+,-./:;<=>?@[]^_`{|}~";
var possible = "";
if(document.getElementById("lowercase").checked) {
possible += lowercase;
}
if(document.getElementById("uppercase").checked) {
possible += uppercase;
}
if(document.getElementById("numbers").checked) {
possible += numbers;
}
if(document.getElementById("special").checked) {
possible += special;
}
var password = "";
for (var i = 0; i < length; i++) {
password += possible.charAt(Math.floor(Math.random() * possible.length));
}
document.getElementById("password").innerHTML = password;
});
function copyPassword() {
var password = document.getElementById("password");
password.select();
document.execCommand("copy");
alert("Mot de passe copié dans le presse-papiers!");
}
</script>
Ainsi, le code utilise la fonction preventDefault() pour prévenir le comportement par défaut des formulaires en javascript.
4. Lui faire remarquer l’obsolescence de son code
document.execCommand(« copy ») est dépréciée. Peux-tu me donner un code alternatif
Vous avez raison, la méthode document.execCommand("copy") pour copier le contenu dans le presse-papiers est dépréciée et n’est plus supportée par tous les navigateurs.
Une alternative courante pour copier le contenu dans le presse-papiers est d’utiliser l’API Clipboard API, qui est supportée par la plupart des navigateurs modernes. voici comment le code JavaScript pourrait être modifié pour utiliser l’API Clipboard API:
function copyPassword() {
var password = document.getElementById("password");
navigator.clipboard.writeText(password.value).then(function() {
alert("Mot de passe copié dans le presse-papiers!");
}, function(err) {
alert("Erreur lors de la copie du mot de passe : " + err);
});
}
Ce code utilise la méthode navigator.clipboard.writeText() pour copier le contenu de la variable password dans le presse-papiers. La méthode renvoie une promesse, qui est résolue si la copie est réussie ou rejetée si une erreur se produit. Il est important de noter que l’API Clipboard API nécessite des autorisations spécifiques pour fonctionner.
5. Ajoutez un peu de style au générateur avec CSS
Peux m'ajouter un style css coloré avec des couleurs vives et des champs de formulaire arrondis#password-form {
padding: 20px;
}
#password-form input[type="text"], #password-form input[type="number"], #password-form input[type="checkbox"], #password-form input[type="submit"], #password, #copy-button {
border-radius: 10px;
padding: 10px;
margin-bottom: 10px;
}
#password-form input[type="submit"] {
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
#password {
width: 100%;
min-height: 50px;
background-color: #f2f2f2;
}
#copy-button {
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
#error-message {
margin-top: 10px;
}
6. Code final généré par ChatGPT
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Générateur de mot passe</title>
<style>
#password-form {
padding: 20px;
}
#password-form input[type="text"],
#password-form input[type="number"],
#password-form input[type="checkbox"],
#password-form input[type="submit"],
#password,
#copy-button {
border-radius: 10px;
padding: 10px;
margin-bottom: 10px;
}
#password-form input[type="submit"] {
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
#password {
width: 100%;
min-height: 50px;
background-color: #f2f2f2;
}
#copy-button {
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
#error-message {
margin-top: 10px;
}
</style>
</head>
<body>
<form id="password-form">
<label for="length">Entrez la longueur souhaitée pour le mot de passe :</label>
<input type="number" id="length" name="length" min="1" required>
<br>
<input type="checkbox" id="lowercase" name="lowercase" checked>
<label for="lowercase">Inclure des minuscules</label>
<br>
<input type="checkbox" id="uppercase" name="uppercase" checked>
<label for="uppercase">Inclure des majuscules</label>
<br>
<input type="checkbox" id="numbers" name="numbers" checked>
<label for="numbers">Inclure des chiffres</label>
<br>
<input type="checkbox" id="special" name="special" checked>
<label for="special">Inclure des caractères spéciaux</label>
<br>
<input type="submit" value="Générer le mot de passe">
</form>
<br>
<textarea id="password" readonly></textarea>
<button id="copy-button" onclick="copyPassword()">Copier le mot de passe</button>
<div id="error-message" style="color: red;"></div>
<script>
var form = document.getElementById("password-form");
form.addEventListener("submit", function (event) {
event.preventDefault();
var length = document.getElementById("length").value;
if (!length) {
document.getElementById("error-message").innerHTML = "Veuillez entrer une longueur pour le mot de passe";
return false;
}
var lowercase = "abcdefghijklmnopqrstuvwxyz";
var uppercase = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var numbers = "0123456789";
var special = "!#$%&()*+,-./:;<=>?@[]^_`{|}~";
var possible = "";
if (document.getElementById("lowercase").checked) {
possible += lowercase;
}
if (document.getElementById("uppercase").checked) {
possible += uppercase;
}
if (document.getElementById("numbers").checked) {
possible += numbers;
}
if (document.getElementById("special").checked) {
possible += special;
}
var password = "";
for (var i = 0; i < length; i++) {
password += possible.charAt(Math.floor(Math.random() * possible.length));
}
document.getElementById("password").innerHTML = password;
});
function copyPassword() {
var password = document.getElementById("password");
navigator.clipboard.writeText(password.value).then(function () {
alert("Mot de passe copié dans le presse-papiers!");
}, function (err) {
alert("Erreur lors de la copie du mot de passe : " + err);
});
}
</script>
</body>
</html>
7. Conclusion
Le code n’est pas parfait, mais il fonctionne. Il m’aura fallu 6 échanges avec l’IA et quelques tests en live, soit moins de 10 minutes pour « coder » et tester.
Beaucoup pensent que l’IA va en mettre plusieurs au chômage. Personnellement je vois cela comme un outil qui permet de gagner un temps considérable! Là, où il fallait 3 ou 4 heures de développement, il en faut moins de 10 minutes.
Cependant, il y a peut-être une corporation qui a du souci à se faire, c’est celle du e-learning. ChatGPT répond à mes attentes bien au-delà de n’importe quelle formation en ligne !
[…] machine learning et le deep learning sont deux types d’intelligence artificielle (IA), c’est-à-dire des technologies qui permettent aux machines d’apprendre et de prendre des […]