KamCode: Random Password Generator

Random Password Generator

Random Password Generator | Html Css Javascript

How to create Analog Clock using Html Css and Javascrip

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Password Generator</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Random Password Generator</h1>
        <div class="password-box">
            <input type="text" id="password">
            <button id="generate">Generate Password</button>
            <button id="copy">Copy</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS

body {
    font-family: poppins, sans-serif;
    background-color: #f2f2f2;
    text-align: center;
    margin: 0;
    padding: 0;
    box-sizing:  border-box;
    background-color: #000;
}

.container {
    max-width: 400px;
    margin: 100px auto;
    padding: 20px;
}

h1 {
    text-wrap:nowrap;
    font-size: 36px;
    font-weight: 600;
    display: inline-block;
    letter-spacing: 2px;
    margin-bottom: 40px;
    color: #fff;
    position: relative;
    animation: typing 8s steps(18) infinite;
    overflow: hidden;
    filter: drop-shadow(0 0 20px #fff);
}

@keyframes typing {
    0%,90%,100%
    {
        width: 0;
    }
     30%,60%
    {
        width: 400px;
    }
}

h1::before{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 3px;
    height: 100%;
    background-color: #ccc;
    animation: blinkCursor 0.8s steps(3) infinite;
}

@keyframes blinkCursor {
    0%,75% 
    {
        opacity: 1;
    }
    76%,100% 
    {
        opacity: 0;
    }
}

.password-box {
    position: relative;
}

input[type="text"] {
    width: 90%;
    padding: 12px;
    font-size: 22px;
    margin-bottom: 30px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #ffffff;
    position: relative;
}

button {
    font-size: 20px;
    padding: 12px 20px;
    cursor: pointer;
    border: none;
    background-color: #ef3f49;
    color: #ffffff;
    border-radius: 5px;
    margin-right: 15px;

}

button:hover {
    background-color: #ee1c27;
    color: #ffffff;
}

JAVASCRIPT

const passwordField = document.getElementById("password");
const generateButton = document.getElementById("generate");
const copyButton = document.getElementById("copy");
const buttons = document.querySelectorAll('button');

buttons.forEach(button => {
    button.addEventListener('click', () => {
        const audio = new Audio("click.mp3");
        audio.play();
    });
});

function generatePassword() {
    const charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+";
    let password = "";
    for (let i = 0; i < 12; i++) {
        const randomIndex = Math.floor(Math.random() * charset.length);
        password += charset[randomIndex];
    }
    passwordField.value = password;
}

generatePassword();

generateButton.addEventListener("click", generatePassword);

copyButton.addEventListener("click", function () {
    passwordField.select();
    document.execCommand("copy");
});

Random Password Generator

Random Password Generator | Html Css Javascript

How to create Analog Clock using Html Css and Javascrip

KamCode | All right reserved.