Random Password Generator HTML, CSS, and JavaScript – C0deCraft by Rana

October 5, 2024

Facebook

The HTML, CSS, JavaScript, and text you provided come together to create a Random Password Generator. Let me break down the functionality and structure of the code step by step:

Random Password Generator

1. HTML Code Explanation

This is the structure of the page, where the content and elements are defined.

<!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>Random Password Generator</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512..." crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="password-container">
    <h2>Random Password Generator CodeCraft by Rana</h2>
    <div class="input-container">
      <input type="text" id="input" class="input" placeholder="Create Password" readonly />
      <i class="far fa-copy fa-2x"></i>
    </div>
    <button class="btn">Generate</button>
  </div>
  <div class="alert-container active">Password Copied</div>
  <script src="index.js"></script>
</body>
</html>

<meta> Tags: These tags handle the character encoding (UTF-8), viewport settings for responsiveness, and compatibility with Internet Explorer.
<title>: Specifies the title of the page as “Random Password Generator.”
FontAwesome: The link in the <head> loads the FontAwesome library to add the copy icon (fa-copy).
<link> Tag: Links the external CSS file style.css that handles the styling of the page.
Password Container: Contains the input field where the generated password will be displayed, the copy icon, and the “Generate” button.
Alert Container: Displays a message when the password is copied.
JavaScript File: The index.js file is linked at the end of the body, responsible for the password generation logic.

2. CSS Code Explanation Random Password Generator

This part styles the page to make it look aesthetically pleasing and responsive.

body {
  display: flex;
  justify-content: center;
  height: 100vh;
  align-items: center;
  margin: 0;
  font-family: "Courier New", Courier, monospace;
}

.password-container {
  background-color: pink;
  width: 500px;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  margin: 10px;
}

.input-container {
  border: solid 2px black;
  padding: 10px;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.input {
  border: none;
  background-color: transparent;
  outline: none;
  font-size: 24px;
  letter-spacing: 4px;
}

.fa-copy {
  cursor: pointer;
  opacity: 0.3;
}

.btn {
  background: black;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  margin: 10px 0;
  font-size: 20px;
  cursor: pointer;
}

.alert-container {
  position: fixed;
  width: 300px;
  height: 50px;
  background-color: lightgreen;
  right: 20px;
  bottom: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  transition: 0.4s;
}

Key styling elements:

body: Flexbox is used to center the content vertically and horizontally, and the height is set to cover the full viewport.
.password-container: A pink box that holds the password input and button, with a shadow for depth and rounded corners.
.input-container: A container for the password input field and the copy icon, with a border and padding.
.input: The password field, designed to look clean without borders, with a large font size and letter spacing for the password characters.
Copy Icon (fa-copy): The opacity is set to 0.3 and increases on hover, making it visually more responsive.
Button (btn): A black button with white text that changes color when hovered and shrinks slightly when clicked.
.alert-container: A message box that shows up when a password is copied, with a smooth slide-in and slide-out animation.

3. JavaScript Code Explanation Random Password Generator

This part contains the logic to generate the random password, copy it to the clipboard, and show an alert when the password is copied.

const btnEl = document.querySelector(".btn");
const inputEl = document.getElementById("input");
const copyIconEl = document.querySelector(".fa-copy");
const alertContainerEl = document.querySelector(".alert-container");

btnEl.addEventListener("click", () => {
  createPassword();
});

copyIconEl.addEventListener("click", () => {
  copyPassword();
  if (inputEl.value) {
    alertContainerEl.classList.remove("active");
    setTimeout(() => {
      alertContainerEl.classList.add("active");
    }, 2000);
  }
});

function createPassword() {
  const chars = "0123456789abcdefghijklmnopqrstuvwxtz!@#$%^&*()_+?:{}[]ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  const passwordLength = 14;
  let password = "";
  for (let index = 0; index < passwordLength; index++) {
    const randomNum = Math.floor(Math.random() * chars.length);
    password += chars.substring(randomNum, randomNum + 1);
  }
  inputEl.value = password;
  alertContainerEl.innerText = password + " copied!";
}

function copyPassword() {
  inputEl.select();
  inputEl.setSelectionRange(0, 9999);
  navigator.clipboard.writeText(inputEl.value);
}

Explanation of the functionality:

Variables:
- btnEl: The “Generate” button element.
- inputEl: The password input field.
- copyIconEl: The copy icon.
- alertContainerEl: The alert message container.
Button Click Event (btnEl.addEventListener): When the “Generate” button is clicked, it triggers the createPassword function.
Copy Icon Click Event (copyIconEl.addEventListener): When the copy icon is clicked, it calls the copyPassword function, which copies the generated password to the clipboard and shows the “Password Copied” alert.
createPassword Function: This function generates a 14-character password using a combination of numbers, lowercase and uppercase letters, and special characters. It uses a loop that randomly picks characters from the chars string and builds the password.
copyPassword Function: This selects the text in the password input field and copies it to the clipboard using the navigator.clipboard.writeText() method.

4. TXT Code Explanation Random Password Generator

The string provided in the TXT section is the set of characters from which the random password will be generated:

0123456789abcdefghijklmnopqrstuvwxtz!@#$%^&*()_+?:{}[]ABCDEFGHIJKLMNOPQRSTUVWXYZ

It contains:

Digits (0–9)
Lowercase letters (a–z)
Uppercase letters (A–Z)
Special characters (!@#$%^&*()_+?:{}[])

These characters are randomly chosen to create a secure password.

Conclusion: Random Password Generator

The HTML defines the structure and layout of the Random Password Generator.
The CSS adds styling for a visually appealing and responsive design.
The JavaScript handles the logic of generating the random password, copying it to the clipboard, and displaying alerts when the password is copied.
The string in the TXT code defines the pool of characters from which the password is randomly generated.

This setup ensures a simple, interactive, and functional password generator.