Programming-Development/Passwordgenerator.html at master · Decoretum/Programming-Development · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!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> Password Generator </title>
</head>
<body>
<div class="container">
<h1> Password Generator </h1>
<input type="text" class="input"> </input> <br>
<button class="password"> Generate Password </button>
</div>
    <style>
        body{
            background-color: antiquewhite;
        }
        h1{
            background-color: brown;
            padding: 10px;
            border-radius: 9px;
            text-align: center;
            width: 600px;
            margin: 10px;
            margin-left: 10px;
            margin-right: 10px;
            margin-top: 10px;


        }
        .input{
            padding: 10px;
            margin-right: 10px;
            margin-top: 10px;
            margin-left: 70px;
            border-radius: 9px;
            border-color: transparent;
            width: 500px;
            text-align: center;


        }
        .container{
            border-radius: 9px;
            background-color: cadetblue;
            border: solid  transparent;
            align-content: center;
            width:fit-content;
            position: absolute;
            right: 650px;
        }
        .password{
            padding: 10px;
            margin: 10px;
            margin-left: 250px;
            margin-top: 20px;

        }

    </style>

    <script>
        const password = document.querySelector('.password');
        const input = document.querySelector('.input');
        password.addEventListener('click',function generate(){
        let newpass = [];
        const numarray = [1,2,3,4,5,6,7,8,9];
        const letterarray = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
        const symbolarray = ['<','>','!','@','#','$','%','^','&'];
        for (let count = 0; count < 8; count++){
            let random = Math.floor(Math.random() * 3)

        if (random === 0){ //number
            let randomnum = Math.floor(Math.random() * 9);
            let chosennum = numarray[randomnum];
            newpass.push(String(chosennum));
        }

        else if (random === 1){ //letter
            let randomletter = Math.floor(Math.random() * 26);
            let chosenletter = letterarray[randomletter];
            newpass.push(String(chosenletter));

        }
        else if (random === 2){ //symbols
            let randomsymb = Math.floor(Math.random() * 9);
            let chosensymb = symbolarray[randomsymb];
            newpass.push(chosensymb);


        }

            }
        let finalpassword = newpass.join('',newpass);

        input.value = ' ';
        input.value = finalpassword;
        console.log(finalpassword.length);


        });


    </script>

</body>
</html>