Intro: This is a small password generator made with JavaScript. It's a very simple program. All it does is display a new password every time the user presses the generate password button. I added pictures to it for fun. You can add your pictures if you want to. By the way, this is for complete beginners as I have commented on every line of my JavaScript file. If I have made mistakes please let me know and feel free to copy and tweak this game to your liking.
Watch Demo Here: https://youtube.com/shorts/A5BLMB5H1mI?feature=share
Note: I got my pictures from https://www.canva.com/ai-image-generator/
Tip: You can use random images at first until the program works fine and then add images that fit the description. Make sure the first word and second word of the images' name are similar to the first two words of the password for example: when the password fluffyapple95h shows up then the fluffyapple.jpg image will show. Make sure to put the full file path to your images.
Tweak: You can change the adjectives and nouns and put as many or as few as you like.
The first code block is HTML, the second is CSS and the third is JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Password Picker</title>
<link rel="stylesheet" href="password_picker.css"> <!-- Link to the external CSS file -->
</head>
<body>
<div id="password-container">
<h2>Welcome to Password Picker!</h2>
<div id="password-output"></div>
<br>
<img id="password-image" src="" alt="Password Image"> <!-- Image element to display the image -->
<br><br>
<button id="generate-btn">Generate Password</button>
</div>
<script src="password_picker.js"></script> <!-- Link to the external JavaScript file -->
</body>
</html>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#password-container {
background-color: #fff;
border-radius: 5px;
padding: 80px;
width: 20%;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
text-align: center;
}
button {
padding: 10px 20px;
font-size: 16px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #0056b3;
}
#password-output{
font-size: 20px;
background-attachment: orange;
text-align: center;
}
//create an array of adjectives
const adjectives = ['sleepy', 'slow', 'smelly', 'wet', 'fat', 'red', 'orange', 'yellow', 'green', 'blue', 'purple', 'fluffy', 'white', 'proud', 'brave'];
//create an array of nouns
const nouns = ['apple', ]; //'dinosaur', 'ball', 'toaster', 'goat', 'dragon', 'hammer', 'duck', 'panda'];
//create a function called generatePassword
const generatePassword = () => {
//pick a random item in the adjectives array everytime the function is called
//Math.random gives a random floating point number, then multiplied with the length of the adjectives array
//to stay within the array then Math.floor rounds it up to the nearest integer.
const adjective = adjectives[Math.floor(Math.random() * adjectives.length)];
//same thing above here but for nouns array
const noun = nouns[Math.floor(Math.random() * nouns.length)];
//get a random number from 0 to 100
const number = Math.floor(Math.random() * 100);
//get the ASCII codes for printable characters
const specialChar = String.fromCharCode(33 + Math.floor(Math.random() * 94));
//join all the string values prevous variables together and put them in a variable called password
const password = adjective + noun + number + specialChar;
//display the message below in the html file
//For example: Your new password is: fluffyapple95h
document.getElementById('password-output').textContent = 'Your new password is: ' + password;
//get the image that matches the password and display it in the html file
document.getElementById('password-image').src = `C:/Users/petix/OneDrive/Desktop/my_javascript_games/Password_picker/${adjective}${noun}.png`; // Set the source of the image
};
//add an event to the button so that when it is pressed it will call the generatePassword function
document.getElementById('generate-btn').addEventListener('click', generatePassword);
//show an image when the program loads for the first time
document.getElementById('password-image').src = 'C:/Users/petix/OneDrive/Desktop/my_javascript_games/Password_picker/letters.png'
Top comments (3)
Will the same code work for an Imagine from Imagine AI Image Generator?
For a learning project this is great! But please remember that for a real password it's important to use cryptographically strong random numbers, check the Crypto and SubtleCrypto API's.
Okay, thanks. I'll look into that. This is just for fun though. But I'll sure do an updated version with what you've suggested.