{"id":272,"date":"2023-06-29T03:54:11","date_gmt":"2023-06-29T00:54:11","guid":{"rendered":"https:\/\/tamoza.net\/?p=272"},"modified":"2023-06-29T03:54:11","modified_gmt":"2023-06-29T00:54:11","slug":"password-generator","status":"publish","type":"post","link":"https:\/\/test.tamoza.xyz\/?p=272","title":{"rendered":"Password Generator"},"content":{"rendered":"\n<br>\n<br>\n<br>\n\n\n\n<p class=\"has-text-align-center has-large-font-size\"><strong>Create strong passwords with Password Generator<\/strong><\/p>\n\n\n\n<!DOCTYPE html>\n\n<html lang=\"en\" dir=\"ltr\">\n  <head>\n    <meta charset=\"utf-8\">\n    \n    \n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <!-- Google Icon Link for Icons -->\n    <link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200\">\n    \n  <\/head>\n  <style>\n\/* Import Google font - Poppins *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600&display=swap');\n*{\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n  font-family: 'Poppins', sans-serif;\n}\nbody{\n  display: center;\n  align-items: center;\n  justify-content: center;\n  min-height: 100vh;\n  background: #4285F4;\n}\n.containert2{\n  width: 100%;\n  background: #fff;\n  border-radius: 8px;\n  box-shadow: 0 10px 20px rgba(0,0,0,0.05);\n}\n.containert2 h2{\n  align-items: center;\n  font-weight: 600;\n  font-size: 1.31rem;\n  padding: 1rem 1.75rem;\n  border-bottom: 1px solid #d4dbe5;\n}\n.wrapper{\n  margin: 1.25rem 1.75rem;\n}\n.wrapper .input-box{\n  position: relative;\n}\n.input-box input{\n  width: 100%;\n  height: 53px;\n  color: #000;\n  background: none;\n  font-size: 1.06rem;\n  font-weight: 500;\n  border-radius: 4px;\n  letter-spacing: 1.4px;\n  border: 1px solid #aaa;\n  padding: 0 2.85rem 0 1rem;\n}\n.input-box span{\n  position: absolute;\n  right: 13px;\n  cursor: pointer;\n  line-height: 53px;\n  color: #707070;\n}\n.input-box span:hover{\n  color: #4285F4!important;\n}\n.wrapper .pass-indicator{\n  width: 100%;\n  height: 4px;\n  position: relative;\n  background: #dfdfdf;\n  margin-top: 0.75rem;\n  border-radius: 25px;\n}\n.pass-indicator::before{\n  position: absolute;\n  content: \"\";\n  height: 100%;\n  width: 50%;\n  border-radius: inherit;\n  transition: width 0.3s ease;\n}\n.pass-indicator#weak::before{\n  width: 20%;\n  background: #E64A4A;\n}\n.pass-indicator#medium::before{\n  width: 50%;\n  background: #f1c80b;\n}\n.pass-indicator#strong::before{\n  width: 100%;\n  background: #4285F4;\n}\n.wrapper .pass-length{\n  margin: 1.56rem 0 1.25rem;\n}\n.pass-length .details{\n  display: flex;\n  justify-content: space-between;\n}\n.pass-length input{\n  width: 100%;\n  height: 5px;\n}\n.pass-settings .options{\n  display: flex;\n  list-style: none;\n  flex-wrap: wrap;\n  margin-top: 1rem;\n}\n.pass-settings .options .option{\n  display: flex;\n  align-items: center;\n  margin-bottom: 1rem;\n  width: calc(100% \/ 2);\n}\n.options .option:first-child{\n  pointer-events: none;\n}\n.options .option:first-child input{\n  opacity: 0.7;\n}\n.options .option input{\n  height: 16px;\n  width: 16px;\n  cursor: pointer;\n}\n.options .option label{\n  cursor: pointer;\n  color: #4f4f4f;\n  padding-left: 0.63rem;\n}\n.wrapper .generate-btn{\n  width: 100%;\n  color: #fff;\n  border: none;\n  outline: none;\n  cursor: pointer;\n  background: #4285F4;\n  font-size: 1.06rem;\n  padding: 0.94rem 0;\n  border-radius: 5px;\n  text-transform: uppercase;\n  margin: 0.94rem 0 1.3rem;\n}\n  <\/style>\n  <body>\n    <div class=\"containert2\">\n      <center><h2>Password Generator<\/h2><\/center>\n      <div class=\"wrapper\">\n        <div class=\"input-box\">\n          <input type=\"text\" disabled>\n          <span class=\"material-symbols-rounded\">copy_all<\/span>\n        <\/div>\n        <div class=\"pass-indicator\"><\/div>\n        <div class=\"pass-length\">\n          <div class=\"details\">\n            <label class=\"title\">Password Length<\/label>\n            <span><\/span>\n          <\/div>\n          <input type=\"range\" min=\"1\" max=\"30\" value=\"15\" step=\"1\">\n        <\/div>\n        <div class=\"pass-settings\">\n          <label class=\"title\">Password Settings<\/label>\n          <ul class=\"options\">\n            <li class=\"option\">\n              <input type=\"checkbox\" id=\"lowercase\" checked>\n              <label for=\"lowercase\">Lowercase (a-z)<\/label>\n            <\/li>\n            <li class=\"option\">\n              <input type=\"checkbox\" id=\"uppercase\">\n              <label for=\"uppercase\">Uppercase (A-Z)<\/label>\n            <\/li>\n            <li class=\"option\">\n              <input type=\"checkbox\" id=\"numbers\">\n              <label for=\"numbers\">Numbers (0-9)<\/label>\n            <\/li>\n            <li class=\"option\">\n              <input type=\"checkbox\" id=\"symbols\">\n              <label for=\"symbols\">Symbols (!-$^+)<\/label>\n            <\/li>\n            <li class=\"option\">\n              <input type=\"checkbox\" id=\"exc-duplicate\">\n              <label for=\"exc-duplicate\">Exclude Duplicate<\/label>\n            <\/li>\n            <li class=\"option\">\n              <input type=\"checkbox\" id=\"spaces\">\n              <label for=\"spaces\">Include Spaces<\/label>\n            <\/li>\n          <\/ul>\n        <\/div>\n        <button class=\"generate-btn\">Generate Password<\/button>\n      <\/div>\n    <\/div>\n    \n  <\/body>\n\n<script>\nconst lengthSlider = document.querySelector(\".pass-length input\"),\noptions = document.querySelectorAll(\".option input\"),\ncopyIcon = document.querySelector(\".input-box span\"),\npasswordInput = document.querySelector(\".input-box input\"),\npassIndicator = document.querySelector(\".pass-indicator\"),\ngenerateBtn = document.querySelector(\".generate-btn\");\n\nconst characters = { \/\/ object of letters, numbers & symbols\n    lowercase: \"abcdefghijklmnopqrstuvwxyz\",\n    uppercase: \"ABCDEFGHIJKLMNOPQRSTUVWXYZ\",\n    numbers: \"0123456789\",\n    symbols: \"^!$%&|[](){}:;.,*+-#@<>~\"\n}\n\nconst generatePassword = () => {\n    let staticPassword = \"\",\n    randomPassword = \"\",\n    excludeDuplicate = false,\n    passLength = lengthSlider.value;\n\n    options.forEach(option => { \/\/ looping through each option's checkbox\n        if(option.checked) { \/\/ if checkbox is checked\n            \/\/ if checkbox id isn't exc-duplicate && spaces\n            if(option.id !== \"exc-duplicate\" && option.id !== \"spaces\") {\n                \/\/ adding particular key value from character object to staticPassword\n                staticPassword += characters[option.id];\n            } else if(option.id === \"spaces\") { \/\/ if checkbox id is spaces\n                staticPassword += `  ${staticPassword}  `; \/\/ adding space at the beginning & end of staticPassword\n            } else { \/\/ else pass true value to excludeDuplicate\n                excludeDuplicate = true;\n            }\n        }\n    });\n\n    for (let i = 0; i < passLength; i++) {\n        \/\/ getting random character from the static password\n        let randomChar = staticPassword[Math.floor(Math.random() * staticPassword.length)];\n        if(excludeDuplicate) { \/\/ if excludeDuplicate is true\n            \/\/ if randomPassword doesn't contains the current random character or randomChar is equal \n            \/\/ to space \" \" then add random character to randomPassword else decrement i by -1\n            !randomPassword.includes(randomChar) || randomChar == \" \" ? randomPassword += randomChar : i--;\n        } else { \/\/ else add random character to randomPassword\n            randomPassword += randomChar;\n        }\n    }\n    passwordInput.value = randomPassword; \/\/ passing randomPassword to passwordInput value\n}\n\nconst upadatePassIndicator = () => {\n    \/\/ if lengthSlider value is less than 8 then pass \"weak\" as passIndicator id else if lengthSlider \n    \/\/ value is less than 16 then pass \"medium\" as id else pass \"strong\" as id\n    passIndicator.id = lengthSlider.value <= 8 ? \"weak\" : lengthSlider.value <= 16 ? \"medium\" : \"strong\";\n}\n\nconst updateSlider = () => {\n    \/\/ passing slider value as counter text\n    document.querySelector(\".pass-length span\").innerText = lengthSlider.value;\n    generatePassword();\n    upadatePassIndicator();\n}\nupdateSlider();\n\nconst copyPassword = () => {\n    navigator.clipboard.writeText(passwordInput.value); \/\/ copying random password\n    copyIcon.innerText = \"check\"; \/\/ changing copy icon to tick\n    copyIcon.style.color = \"#4285F4\";\n    setTimeout(() => { \/\/ after 1500 ms, changing tick icon back to copy\n        copyIcon.innerText = \"copy_all\";\n        copyIcon.style.color = \"#707070\";\n    }, 1500);\n}\n\ncopyIcon.addEventListener(\"click\", copyPassword);\nlengthSlider.addEventListener(\"input\", updateSlider);\ngenerateBtn.addEventListener(\"click\", generatePassword);\n<\/script>\n<\/html>\n\n\n\n<br>\n<br>\n<br>\n","protected":false},"excerpt":{"rendered":"<p>Create strong passwords with Password Generator Password Generator copy_all Password Length Password Settings Lowercase (a-z) Uppercase (A-Z) Numbers (0-9) Symbols (!-$^+) Exclude Duplicate Include Spaces Generate Password<\/p>\n","protected":false},"author":1,"featured_media":296,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-272","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-onlinetools"],"_links":{"self":[{"href":"https:\/\/test.tamoza.xyz\/index.php?rest_route=\/wp\/v2\/posts\/272","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/test.tamoza.xyz\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/test.tamoza.xyz\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/test.tamoza.xyz\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/test.tamoza.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=272"}],"version-history":[{"count":0,"href":"https:\/\/test.tamoza.xyz\/index.php?rest_route=\/wp\/v2\/posts\/272\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/test.tamoza.xyz\/index.php?rest_route=\/"}],"wp:attachment":[{"href":"https:\/\/test.tamoza.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=272"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/test.tamoza.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=272"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/test.tamoza.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=272"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}