🎬Random Password Generator | Html CSS Javascript✨

#html #css #beginners #javascript

Make a Random Password Generator using Html CSS Javascript, step-by-step from SCRATCH…

Source Code:

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Random Password Generator | JavaScript</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="inputBox">
        <h2> Random <span>Password Generator</span>App</h2>
        <input type="text" name="" placeholder="Create Password" id="password" readonly="">
        <button id="btn" onclick="getPassword()">Generate Password</button>
    </div>

    <script src="app.js"></script>
</body>

</html>

CSS

* {
    margin: 0;
    padding: 0;
    font-family: Consolas, sans-serif;
    user-select: none;
}

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fae5df;
}

.inputBox {
    position: relative;
    width: 450px;
}

.inputBox h2 {
    font-size: 28px;
    color: #141850;
}

span {
    color: #ed7966;
    text-shadow: 1px 1px #141850;
}

::placeholder {
    color: #f5cac2;
}

.inputBox input {
    position: relative;
    width: 100%;
    height: 60px;
    border: none;
    margin: 15px 0 10px;
    background: transparent;
    /*    show the ugly outline*/
    outline: none;
    padding: 0 20px;
    font-size: 24px;
    letter-spacing: 4px;
    box-sizing: border-box;
    border-radius: 8px;
    color: #141850;
    box-shadow: -4px -4px 10px rgba(250, 229, 223, 1),
    inset 4px 4px 10px rgba(0, 0, 0, 0.07),
    inset -4px -4px 10px rgba(250, 229, 223, 1),
           4px 4px 10px rgba(0, 0, 0, 0.07);
}

.inputBox input::placeholder {
    letter-spacing: 0;
}

button {
    position: relative;
    cursor: pointer;
    color: #fae5df;
    background-color: #303179;
    font-size: 24px;
    display: inline-block;
    padding: 10px 15px;
    border-radius: 8px;
}

.inputBox #btn:active {
    background-color: #141850;
    transform: scale(.98);
}