diff --git a/index.css b/index.css new file mode 100644 index 0000000..704e254 --- /dev/null +++ b/index.css @@ -0,0 +1,119 @@ +body { + margin: 80px 50px; + background-color: #1F2937; + font-family: Karla; + max-width: 500px; + max-height: 800px; +} + +h1 { + color: #F0F9FF; + margin-bottom: 10px; + font-weight: 800; +} + +p { + color: #D5D4D8; + margin-top: 5px; + font-family: Inter; +} + +#header-highlight { + color: #38BDF8; +} + +#pwOptions-div { + border: #7DD3FC solid 1px; + border-radius: 5px; + padding: 5px 10px; + color: #D5D4D8; + display: flex; + flex-direction: column; +} + +.pwOption { + margin-top: 10px; + margin-bottom: 10px; + height: 30px; +} + +#length-select { + background-color:#273549; + border-radius: 5px; + color: #D5D4D8; + margin-left: 10px; + border: #D5D4D8 solid 1px; +} + +#specialchar-checkbox { + margin-left: 5px; + vertical-align: middle; + height: 18px; + width: 18px; + border: #D5D4D8 solid 2px; + } + +#specialchar-checkbox:not(:checked) { + background-color: #0EA5E9; + accent-color: #D5D4D8; +} + +#generate-btn { + font-family: Inter; + color: white; + margin-top: 25px; + margin-bottom: 25px; + background-color: #0EA5E9; + border-radius: 5px; + padding: 10px 15px; + border: 0px; + font-size: 14px; +} + +hr { + border-color: #273549; + box-shadow: 0px 4px 4px #111827 ; +} + + +/* still not wide enough for all 25-char long passwords! */ +#pw1-div, #pw2-div { + width: 230px; + height: 30px; + background-color: #273549; + border-radius: 5px; + color: #7DD3FC; + font-size: 14px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +#output-div { + margin-top: 25px; + display: flex; + justify-content: space-between; +} + +#copyPw1-btn, #copyPw2-btn { + margin: 10px 10px; + width: 40px; + height: 40px; + padding: 3px; + background-color: #495969; + border-radius: 4px; + box-shadow: 1px 1px 2px #222222; + font-size: 20px; +} + +#copy-message { + font-size: 10px; + color: lightgreen; +} + +.pwcontainer { + display: flex; + flex-direction: column; + align-items: center; +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..fbe0262 --- /dev/null +++ b/index.html @@ -0,0 +1,60 @@ + + + + + + + + + + + + +

Generate a
random password

+

Never use an insecure password again.

+
+
+ + +
+
+ + +
+
+ +
+
+
+
+ +
+
+
+ +
+
+ + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..90b1077 --- /dev/null +++ b/index.js @@ -0,0 +1,51 @@ +const characters = ["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","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", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9","~","`","!","@","#","$","%","^","&","*","(",")","_","-","+","=","{","[","}","]",",","|",":",";","<",">",".","?", +"/"]; +//hook up button with password generator function +let buttonEl = document.getElementById("generate-btn") +buttonEl.addEventListener("click", generatePassword) + + +//function for retrieving password requirements set by user +function getPasswordReq() { + let lengthInput = document.getElementById("length-select") + let specialCharInput = document.getElementById("specialchar-checkbox").checked + //return object with password requirements + return { + length: +lengthInput.value, + specialChars: specialCharInput + } +} + +function generatePassword() { + //get
elements to generate passwords into + let pw1El = document.getElementById("pw1-div") + let pw2El = document.getElementById("pw2-div") + //clear existing passwords + pw1El.textContent = "" + pw2El.textContent = "" + //set character range based on requirement on special characters + if (getPasswordReq().specialChars === true) { + var charRange = characters.length + } + else { + var charRange = characters.length - 29 + } + // get random characters from array + for (i=1; i<(getPasswordReq().length +1); i++) { + let randomChar = Math.floor(Math.random()*charRange) + pw1El.textContent += characters[randomChar] + randomChar = Math.floor(Math.random()*charRange) + pw2El.textContent += characters[randomChar] +} +} + + +function copyPw(pwSelector) { + let copyText = document.getElementById(pwSelector) + // Copy the text inside the text field if it hasn't been copied already + if (copyText.textContent != "Password copied") + navigator.clipboard.writeText(copyText.textContent) + // Display confirmation message + copyText.textContent = "Password copied" + copyText.style.color = "lightgreen" +}