├── .gitignore ├── Develop ├── index.html ├── script.js └── style.css └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | package-lock.json 3 | .vscode 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Develop/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Password Generator 8 | 9 | 10 | 11 |
12 |
13 |

Password Generator

14 |
15 |
16 |
17 |

Generate a Password

18 |
19 |
20 | 26 |
27 |
28 | 29 |
30 |
31 |
32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /Develop/script.js: -------------------------------------------------------------------------------- 1 | // Assignment code here 2 | 3 | 4 | // Get references to the #generate element 5 | var generateBtn = document.querySelector("#generate"); 6 | 7 | // Write password to the #password input 8 | function writePassword() { 9 | var password = generatePassword(); 10 | var passwordText = document.querySelector("#password"); 11 | 12 | passwordText.value = password; 13 | 14 | } 15 | 16 | // Add event listener to generate button 17 | generateBtn.addEventListener("click", writePassword); 18 | -------------------------------------------------------------------------------- /Develop/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | } 6 | 7 | html, 8 | body, 9 | .wrapper { 10 | height: 100%; 11 | margin: 0; 12 | padding: 0; 13 | } 14 | 15 | body { 16 | font-family: sans-serif; 17 | background-color: #f9fbfd; 18 | } 19 | 20 | .wrapper { 21 | padding-top: 30px; 22 | padding-left: 20px; 23 | padding-right: 20px; 24 | } 25 | 26 | header { 27 | text-align: center; 28 | padding: 20px; 29 | padding-top: 0px; 30 | color: hsl(206, 17%, 28%); 31 | } 32 | 33 | .card { 34 | background-color: hsl(0, 0%, 100%); 35 | border-radius: 5px; 36 | border-width: 1px; 37 | box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px 0px; 38 | color: hsl(206, 17%, 28%); 39 | font-size: 18px; 40 | margin: 0 auto; 41 | max-width: 800px; 42 | padding: 30px 40px; 43 | } 44 | 45 | .card-header::after { 46 | content: " "; 47 | display: block; 48 | width: 100%; 49 | background: #e7e9eb; 50 | height: 2px; 51 | } 52 | 53 | .card-body { 54 | min-height: 100px; 55 | } 56 | 57 | .card-footer { 58 | text-align: center; 59 | } 60 | 61 | .card-footer::before { 62 | content: " "; 63 | display: block; 64 | width: 100%; 65 | background: #e7e9eb; 66 | height: 2px; 67 | } 68 | 69 | .card-footer::after { 70 | content: " "; 71 | display: block; 72 | clear: both; 73 | } 74 | 75 | .btn { 76 | border: none; 77 | background-color: hsl(360, 91%, 36%); 78 | border-radius: 25px; 79 | box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 6px 0px rgba(0, 0, 0, 0.2) 0px 1px 1px 80 | 0px; 81 | color: hsl(0, 0%, 100%); 82 | display: inline-block; 83 | font-size: 22px; 84 | line-height: 22px; 85 | margin: 16px 16px 16px 20px; 86 | padding: 14px 34px; 87 | text-align: center; 88 | cursor: pointer; 89 | } 90 | 91 | button[disabled] { 92 | cursor: default; 93 | background: #c0c7cf; 94 | } 95 | 96 | .float-right { 97 | float: right; 98 | } 99 | 100 | #password { 101 | -webkit-appearance: none; 102 | -moz-appearance: none; 103 | appearance: none; 104 | border: none; 105 | display: block; 106 | width: 100%; 107 | padding-top: 15px; 108 | padding-left: 15px; 109 | padding-right: 15px; 110 | padding-bottom: 85px; 111 | font-size: 1.2rem; 112 | text-align: center; 113 | margin-top: 10px; 114 | margin-bottom: 10px; 115 | border: 2px dashed #c0c7cf; 116 | border-radius: 6px; 117 | resize: none; 118 | overflow: hidden; 119 | } 120 | 121 | @media (max-width: 690px) { 122 | .btn { 123 | font-size: 1rem; 124 | margin: 16px 0px 0px 0px; 125 | padding: 10px 15px; 126 | } 127 | 128 | #password { 129 | font-size: 1rem; 130 | } 131 | } 132 | 133 | @media (max-width: 500px) { 134 | .btn { 135 | font-size: 0.8rem; 136 | } 137 | } 138 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Password Generator Starter Code 2 | --------------------------------------------------------------------------------