Advanced Password Generator<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <style>\n \/* Custom styles for Inter font and general body *\/\n body {\n font-family: 'Inter', sans-serif;\n background-color: #f0f2f5;\n }\n <\/style>\n<\/head>\n<body class=\"flex items-center justify-center min-h-screen bg-gray-100 p-4\">\n <div class=\"bg-white p-8 rounded-xl shadow-2xl w-full max-w-md\">\n <h1 class=\"text-3xl font-bold text-center text-indigo-700 mb-6\">Password Generator<\/h1>\n\n \n <div class=\"relative mb-6\">\n <input\n type=\"text\"\n id=\"password-output\"\n class=\"w-full p-3 pr-12 text-lg text-gray-800 bg-gray-100 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500\"\n placeholder=\"Your generated password will appear here\"\n readonly\n >\n <button\n id=\"copy-button\"\n class=\"absolute inset-y-0 right-0 flex items-center px-4 text-gray-600 hover:text-indigo-600 focus:outline-none\"\n title=\"Copy to clipboard\"\n >\n \n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-6 h-6\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125H3.375c-.621 0-1.125-.504-1.125-1.125V10.25a1.125 1.125 0 011.125-1.125h9.75a1.125 1.125 0 011.125 1.125v7.005z\" \/>\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M18 1.5c-1.657 0-3 1.343-3 3v14.25a3 3 0 003 3.375h5.25c.621 0 1.125-.504 1.125-1.125V4.5c0-1.657-1.343-3-3-3H18z\" \/>\n <\/svg>\n <\/button>\n <\/div>\n\n \n <div class=\"mb-4\">\n <label for=\"password-length\" class=\"block text-gray-700 text-sm font-medium mb-2\">Password Length:<\/label>\n <input\n type=\"range\"\n id=\"password-length\"\n min=\"4\"\n max=\"32\"\n value=\"12\"\n class=\"w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer range-lg focus:outline-none focus:ring-2 focus:ring-indigo-500\"\n >\n <span id=\"length-value\" class=\"block text-right text-gray-600 text-sm mt-1\">12<\/span>\n <\/div>\n\n \n <div class=\"grid grid-cols-2 gap-y-3 mb-4\">\n <div class=\"flex items-center\">\n <input type=\"checkbox\" id=\"include-uppercase\" checked class=\"form-checkbox h-5 w-5 text-indigo-600 rounded focus:ring-indigo-500\">\n <label for=\"include-uppercase\" class=\"ml-2 text-gray-700 text-base\">Include Uppercase<\/label>\n <\/div>\n <div class=\"flex items-center\">\n <input type=\"checkbox\" id=\"include-lowercase\" checked class=\"form-checkbox h-5 w-5 text-indigo-600 rounded focus:ring-indigo-500\">\n <label for=\"include-lowercase\" class=\"ml-2 text-gray-700 text-base\">Include Lowercase<\/label>\n <\/div>\n <div class=\"flex items-center\">\n <input type=\"checkbox\" id=\"include-numbers\" checked class=\"form-checkbox h-5 w-5 text-indigo-600 rounded focus:ring-indigo-500\">\n <label for=\"include-numbers\" class=\"ml-2 text-gray-700 text-base\">Include Numbers<\/label>\n <\/div>\n <div class=\"flex items-center\">\n <input type=\"checkbox\" id=\"include-symbols\" checked class=\"form-checkbox h-5 w-5 text-indigo-600 rounded focus:ring-indigo-500\">\n <label for=\"include-symbols\" class=\"ml-2 text-gray-700 text-base\">Include Symbols<\/label>\n <\/div>\n <\/div>\n\n \n <div id=\"symbol-options-container\" class=\"mb-6 pl-4 border-l-2 border-indigo-200\" style=\"display: block;\">\n <p class=\"text-gray-700 text-sm font-medium mb-2\">Select Symbol Categories:<\/p>\n <div class=\"grid grid-cols-1 gap-y-2\">\n <div class=\"flex items-center\">\n <input type=\"checkbox\" id=\"symbols-common\" checked class=\"form-checkbox h-5 w-5 text-indigo-600 rounded focus:ring-indigo-500\">\n <label for=\"symbols-common\" class=\"ml-2 text-gray-700 text-base\">Common Punctuation (!@#$%)<\/label>\n <\/div>\n <div class=\"flex items-center\">\n <input type=\"checkbox\" id=\"symbols-brackets\" checked class=\"form-checkbox h-5 w-5 text-indigo-600 rounded focus:ring-indigo-500\">\n <label for=\"symbols-brackets\" class=\"ml-2 text-gray-700 text-base\">Brackets ({}[])<\/label>\n <\/div>\n <div class=\"flex items-center\">\n <input type=\"checkbox\" id=\"symbols-math\" checked class=\"form-checkbox h-5 w-5 text-indigo-600 rounded focus:ring-indigo-500\">\n <label for=\"symbols-math\" class=\"ml-2 text-gray-700 text-base\">Math Operators (+-*\/=)<\/label>\n <\/div>\n <div class=\"flex items-center\">\n <input type=\"checkbox\" id=\"symbols-misc\" class=\"form-checkbox h-5 w-5 text-indigo-600 rounded focus:ring-indigo-500\">\n <label for=\"symbols-misc\" class=\"ml-2 text-gray-700 text-base\">Miscellaneous (“,.:;`’ )<\/label>\n <\/div>\n <\/div>\n <\/div>\n\n \n <button\n id=\"generate-button\"\n class=\"w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2\"\n >\n Generate Password\n <\/button>\n\n \n <div id=\"message-box\" class=\"mt-4 text-center text-sm font-semibold hidden\"><\/div>\n <\/div>\n\n <script>\n \/\/ Get references to DOM elements\n const passwordOutput = document.getElementById('password-output');\n const passwordLengthInput = document.getElementById('password-length');\n const lengthValueSpan = document.getElementById('length-value');\n const includeUppercaseCheckbox = document.getElementById('include-uppercase');\n const includeLowercaseCheckbox = document.getElementById('include-lowercase');\n const includeNumbersCheckbox = document.getElementById('include-numbers');\n const includeSymbolsCheckbox = document.getElementById('include-symbols');\n\n \/\/ New symbol category checkboxes and their container\n const symbolOptionsContainer = document.getElementById('symbol-options-container');\n const symbolsCommonCheckbox = document.getElementById('symbols-common');\n const symbolsBracketsCheckbox = document.getElementById('symbols-brackets');\n const symbolsMathCheckbox = document.getElementById('symbols-math');\n const symbolsMiscCheckbox = document.getElementById('symbols-misc');\n\n const generateButton = document.getElementById('generate-button');\n const copyButton = document.getElementById('copy-button');\n const messageBox = document.getElementById('message-box');\n\n \/\/ Character sets\n const uppercaseChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';\n const lowercaseChars = 'abcdefghijklmnopqrstuvwxyz';\n const numberChars = '0123456789';\n \/\/ Predefined symbol categories\n const commonPunctuation = '!@#$%^&*';\n const brackets = '(){}[]<>';\n const mathOperators = '+-*\/=';\n const miscellaneousSymbols = '\",.:;`\\'\\\\|_'; \/\/ Added backslash and underscore\n\n\n \/**\n * Displays a message in the message box, then hides it after a delay.\n * @param {string} message - The message to display.\n * @param {string} type - 'success' or 'error' to apply appropriate styling.\n *\/\n function showMessage(message, type) {\n messageBox.textContent = message;\n messageBox.classList.remove('hidden', 'text-green-600', 'text-red-600');\n if (type === 'success') {\n messageBox.classList.add('text-green-600');\n } else if (type === 'error') {\n messageBox.classList.add('text-red-600');\n }\n setTimeout(() => {\n messageBox.classList.add('hidden');\n }, 3000); \/\/ Hide after 3 seconds\n }\n\n \/**\n * Toggles the visibility and enabled state of the symbol category checkboxes.\n *\/\n function toggleSymbolOptions() {\n const isChecked = includeSymbolsCheckbox.checked;\n symbolOptionsContainer.style.display = isChecked ? 'block' : 'none';\n\n \/\/ Enable\/disable sub-checkboxes based on main symbol checkbox\n symbolsCommonCheckbox.disabled = !isChecked;\n symbolsBracketsCheckbox.disabled = !isChecked;\n symbolsMathCheckbox.disabled = !isChecked;\n symbolsMiscCheckbox.disabled = !isChecked;\n\n \/\/ If main symbol checkbox is unchecked, uncheck all sub-checkboxes\n if (!isChecked) {\n symbolsCommonCheckbox.checked = false;\n symbolsBracketsCheckbox.checked = false;\n symbolsMathCheckbox.checked = false;\n symbolsMiscCheckbox.checked = false;\n } else {\n \/\/ If re-checked, ensure at least one symbol category is checked\n \/\/ or default to common if none were checked previously\n if (!symbolsCommonCheckbox.checked && !symbolsBracketsCheckbox.checked &&\n !symbolsMathCheckbox.checked && !symbolsMiscCheckbox.checked) {\n symbolsCommonCheckbox.checked = true;\n }\n }\n generatePassword(); \/\/ Regenerate password after toggling options\n }\n\n \/**\n * Generates a random password based on selected criteria.\n *\/\n function generatePassword() {\n const length = parseInt(passwordLengthInput.value);\n let characters = '';\n let generatedPassword = '';\n let requiredChars = []; \/\/ To ensure at least one of each selected type\n\n \/\/ Build the character pool based on selected options\n if (includeUppercaseCheckbox.checked) {\n characters += uppercaseChars;\n requiredChars.push(uppercaseChars);\n }\n if (includeLowercaseCheckbox.checked) {\n characters += lowercaseChars;\n requiredChars.push(lowercaseChars);\n }\n if (includeNumbersCheckbox.checked) {\n characters += numberChars;\n requiredChars.push(numberChars);\n }\n\n \/\/ Handle symbol categories if master 'Include Symbols' is checked\n if (includeSymbolsCheckbox.checked) {\n let currentSymbolChars = '';\n if (symbolsCommonCheckbox.checked) {\n currentSymbolChars += commonPunctuation;\n }\n if (symbolsBracketsCheckbox.checked) {\n currentSymbolChars += brackets;\n }\n if (symbolsMathCheckbox.checked) {\n currentSymbolChars += mathOperators;\n }\n if (symbolsMiscCheckbox.checked) {\n currentSymbolChars += miscellaneousSymbols;\n }\n\n if (currentSymbolChars.length > 0) {\n characters += currentSymbolChars;\n requiredChars.push(currentSymbolChars); \/\/ Add the combined symbols to requiredChars\n } else {\n \/\/ If 'Include Symbols' is checked but no symbol sub-category is, prompt user\n if (includeSymbolsCheckbox.checked) {\n showMessage('Please select at least one symbol category, or uncheck \"Include Symbols\".', 'error');\n passwordOutput.value = ''; \/\/ Clear output if no types selected\n return;\n }\n }\n }\n\n\n \/\/ Check if at least one character type (overall) is selected\n if (characters.length === 0) {\n showMessage('Please select at least one character type (Uppercase, Lowercase, Numbers, or Symbols).', 'error');\n passwordOutput.value = ''; \/\/ Clear output if no types selected\n return;\n }\n\n \/\/ Ensure at least one character from each *required* type is included\n requiredChars.forEach(charSet => {\n if (charSet.length > 0) { \/\/ Only add if the character set is not empty\n generatedPassword += charSet[Math.floor(Math.random() * charSet.length)];\n }\n });\n\n \/\/ Fill the rest of the password length with random characters from the combined pool\n const remainingLength = Math.max(0, length - generatedPassword.length);\n for (let i = 0; i < remainingLength; i++) {\n const randomIndex = Math.floor(Math.random() * characters.length);\n generatedPassword += characters[randomIndex];\n }\n\n \/\/ Trim the password if it's too long (can happen if length is very small and many types are required)\n generatedPassword = generatedPassword.substring(0, length);\n\n \/\/ Shuffle the generated password to ensure randomness of character positions\n generatedPassword = generatedPassword.split('').sort(() => Math.random() - 0.5).join('');\n\n passwordOutput.value = generatedPassword;\n }\n\n \/**\n * Copies the generated password to the clipboard.\n *\/\n function copyToClipboard() {\n const password = passwordOutput.value;\n if (password) {\n \/\/ Use document.execCommand('copy') for better compatibility within iframes\n try {\n const tempInput = document.createElement('textarea');\n tempInput.value = password;\n document.body.appendChild(tempInput);\n tempInput.select();\n document.execCommand('copy');\n document.body.removeChild(tempInput);\n showMessage('Password copied to clipboard!', 'success');\n } catch (err) {\n showMessage('Failed to copy password. Please copy manually.', 'error');\n console.error('Error copying to clipboard:', err);\n }\n } else {\n showMessage('No password to copy!', 'error');\n }\n }\n\n \/\/ Event Listeners\n passwordLengthInput.addEventListener('input', () => {\n lengthValueSpan.textContent = passwordLengthInput.value;\n generatePassword(); \/\/ Regenerate password when length changes\n });\n\n \/\/ Event listener for the main 'Include Symbols' checkbox\n includeSymbolsCheckbox.addEventListener('change', toggleSymbolOptions);\n\n \/\/ Event listeners for the new symbol category checkboxes\n symbolsCommonCheckbox.addEventListener('change', generatePassword);\n symbolsBracketsCheckbox.addEventListener('change', generatePassword);\n symbolsMathCheckbox.addEventListener('change', generatePassword);\n symbolsMiscCheckbox.addEventListener('change', generatePassword);\n\n \/\/ Event listeners for other character type checkboxes\n includeUppercaseCheckbox.addEventListener('change', generatePassword);\n includeLowercaseCheckbox.addEventListener('change', generatePassword);\n includeNumbersCheckbox.addEventListener('change', generatePassword);\n\n\n generateButton.addEventListener('click', generatePassword);\n copyButton.addEventListener('click', copyToClipboard);\n\n \/\/ Initial setup on load\n window.onload = () => {\n toggleSymbolOptions(); \/\/ Set initial state of symbol options visibility\n generatePassword(); \/\/ Generate initial password\n };\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Advanced Password Generator Password Generator Password Length: 12 Include Uppercase Include Lowercase Include Numbers Include Symbols Select Symbol Categories: Common Punctuation (!@#$%) Brackets ({}[]) Math Operators (+-*\/=) Miscellaneous (“,.:;`’ ) Generate Password<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.gizmo421.info\/index.php\/wp-json\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gizmo421.info\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.gizmo421.info\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.gizmo421.info\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gizmo421.info\/index.php\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":2,"href":"https:\/\/www.gizmo421.info\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":10,"href":"https:\/\/www.gizmo421.info\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions\/10"}],"wp:attachment":[{"href":"https:\/\/www.gizmo421.info\/index.php\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":7,"date":"2025-08-19T00:20:22","date_gmt":"2025-08-19T00:20:22","guid":{"rendered":"https:\/\/www.gizmo421.info\/?page_id=7"},"modified":"2025-08-19T00:22:21","modified_gmt":"2025-08-19T00:22:21","slug":"password-generator","status":"publish","type":"page","link":"https:\/\/www.gizmo421.info\/index.php\/password-generator\/","title":{"rendered":"Password Generator"},"content":{"rendered":"\n\n\n\n \n \n Advanced Password Generator<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <style>\n \/* Custom styles for Inter font and general body *\/\n body {\n font-family: 'Inter', sans-serif;\n background-color: #f0f2f5;\n }\n <\/style>\n<\/head>\n<body class=\"flex items-center justify-center min-h-screen bg-gray-100 p-4\">\n <div class=\"bg-white p-8 rounded-xl shadow-2xl w-full max-w-md\">\n <h1 class=\"text-3xl font-bold text-center text-indigo-700 mb-6\">Password Generator<\/h1>\n\n \n <div class=\"relative mb-6\">\n <input\n type=\"text\"\n id=\"password-output\"\n class=\"w-full p-3 pr-12 text-lg text-gray-800 bg-gray-100 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500\"\n placeholder=\"Your generated password will appear here\"\n readonly\n >\n <button\n id=\"copy-button\"\n class=\"absolute inset-y-0 right-0 flex items-center px-4 text-gray-600 hover:text-indigo-600 focus:outline-none\"\n title=\"Copy to clipboard\"\n >\n \n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-6 h-6\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125H3.375c-.621 0-1.125-.504-1.125-1.125V10.25a1.125 1.125 0 011.125-1.125h9.75a1.125 1.125 0 011.125 1.125v7.005z\" \/>\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M18 1.5c-1.657 0-3 1.343-3 3v14.25a3 3 0 003 3.375h5.25c.621 0 1.125-.504 1.125-1.125V4.5c0-1.657-1.343-3-3-3H18z\" \/>\n <\/svg>\n <\/button>\n <\/div>\n\n \n <div class=\"mb-4\">\n <label for=\"password-length\" class=\"block text-gray-700 text-sm font-medium mb-2\">Password Length:<\/label>\n <input\n type=\"range\"\n id=\"password-length\"\n min=\"4\"\n max=\"32\"\n value=\"12\"\n class=\"w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer range-lg focus:outline-none focus:ring-2 focus:ring-indigo-500\"\n >\n <span id=\"length-value\" class=\"block text-right text-gray-600 text-sm mt-1\">12<\/span>\n <\/div>\n\n \n <div class=\"grid grid-cols-2 gap-y-3 mb-4\">\n <div class=\"flex items-center\">\n <input type=\"checkbox\" id=\"include-uppercase\" checked class=\"form-checkbox h-5 w-5 text-indigo-600 rounded focus:ring-indigo-500\">\n <label for=\"include-uppercase\" class=\"ml-2 text-gray-700 text-base\">Include Uppercase<\/label>\n <\/div>\n <div class=\"flex items-center\">\n <input type=\"checkbox\" id=\"include-lowercase\" checked class=\"form-checkbox h-5 w-5 text-indigo-600 rounded focus:ring-indigo-500\">\n <label for=\"include-lowercase\" class=\"ml-2 text-gray-700 text-base\">Include Lowercase<\/label>\n <\/div>\n <div class=\"flex items-center\">\n <input type=\"checkbox\" id=\"include-numbers\" checked class=\"form-checkbox h-5 w-5 text-indigo-600 rounded focus:ring-indigo-500\">\n <label for=\"include-numbers\" class=\"ml-2 text-gray-700 text-base\">Include Numbers<\/label>\n <\/div>\n <div class=\"flex items-center\">\n <input type=\"checkbox\" id=\"include-symbols\" checked class=\"form-checkbox h-5 w-5 text-indigo-600 rounded focus:ring-indigo-500\">\n <label for=\"include-symbols\" class=\"ml-2 text-gray-700 text-base\">Include Symbols<\/label>\n <\/div>\n <\/div>\n\n \n <div id=\"symbol-options-container\" class=\"mb-6 pl-4 border-l-2 border-indigo-200\" style=\"display: block;\">\n <p class=\"text-gray-700 text-sm font-medium mb-2\">Select Symbol Categories:<\/p>\n <div class=\"grid grid-cols-1 gap-y-2\">\n <div class=\"flex items-center\">\n <input type=\"checkbox\" id=\"symbols-common\" checked class=\"form-checkbox h-5 w-5 text-indigo-600 rounded focus:ring-indigo-500\">\n <label for=\"symbols-common\" class=\"ml-2 text-gray-700 text-base\">Common Punctuation (!@#$%)<\/label>\n <\/div>\n <div class=\"flex items-center\">\n <input type=\"checkbox\" id=\"symbols-brackets\" checked class=\"form-checkbox h-5 w-5 text-indigo-600 rounded focus:ring-indigo-500\">\n <label for=\"symbols-brackets\" class=\"ml-2 text-gray-700 text-base\">Brackets ({}[])<\/label>\n <\/div>\n <div class=\"flex items-center\">\n <input type=\"checkbox\" id=\"symbols-math\" checked class=\"form-checkbox h-5 w-5 text-indigo-600 rounded focus:ring-indigo-500\">\n <label for=\"symbols-math\" class=\"ml-2 text-gray-700 text-base\">Math Operators (+-*\/=)<\/label>\n <\/div>\n <div class=\"flex items-center\">\n <input type=\"checkbox\" id=\"symbols-misc\" class=\"form-checkbox h-5 w-5 text-indigo-600 rounded focus:ring-indigo-500\">\n <label for=\"symbols-misc\" class=\"ml-2 text-gray-700 text-base\">Miscellaneous (“,.:;`’ )<\/label>\n <\/div>\n <\/div>\n <\/div>\n\n \n <button\n id=\"generate-button\"\n class=\"w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2\"\n >\n Generate Password\n <\/button>\n\n \n <div id=\"message-box\" class=\"mt-4 text-center text-sm font-semibold hidden\"><\/div>\n <\/div>\n\n <script>\n \/\/ Get references to DOM elements\n const passwordOutput = document.getElementById('password-output');\n const passwordLengthInput = document.getElementById('password-length');\n const lengthValueSpan = document.getElementById('length-value');\n const includeUppercaseCheckbox = document.getElementById('include-uppercase');\n const includeLowercaseCheckbox = document.getElementById('include-lowercase');\n const includeNumbersCheckbox = document.getElementById('include-numbers');\n const includeSymbolsCheckbox = document.getElementById('include-symbols');\n\n \/\/ New symbol category checkboxes and their container\n const symbolOptionsContainer = document.getElementById('symbol-options-container');\n const symbolsCommonCheckbox = document.getElementById('symbols-common');\n const symbolsBracketsCheckbox = document.getElementById('symbols-brackets');\n const symbolsMathCheckbox = document.getElementById('symbols-math');\n const symbolsMiscCheckbox = document.getElementById('symbols-misc');\n\n const generateButton = document.getElementById('generate-button');\n const copyButton = document.getElementById('copy-button');\n const messageBox = document.getElementById('message-box');\n\n \/\/ Character sets\n const uppercaseChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';\n const lowercaseChars = 'abcdefghijklmnopqrstuvwxyz';\n const numberChars = '0123456789';\n \/\/ Predefined symbol categories\n const commonPunctuation = '!@#$%^&*';\n const brackets = '(){}[]<>';\n const mathOperators = '+-*\/=';\n const miscellaneousSymbols = '\",.:;`\\'\\\\|_'; \/\/ Added backslash and underscore\n\n\n \/**\n * Displays a message in the message box, then hides it after a delay.\n * @param {string} message - The message to display.\n * @param {string} type - 'success' or 'error' to apply appropriate styling.\n *\/\n function showMessage(message, type) {\n messageBox.textContent = message;\n messageBox.classList.remove('hidden', 'text-green-600', 'text-red-600');\n if (type === 'success') {\n messageBox.classList.add('text-green-600');\n } else if (type === 'error') {\n messageBox.classList.add('text-red-600');\n }\n setTimeout(() => {\n messageBox.classList.add('hidden');\n }, 3000); \/\/ Hide after 3 seconds\n }\n\n \/**\n * Toggles the visibility and enabled state of the symbol category checkboxes.\n *\/\n function toggleSymbolOptions() {\n const isChecked = includeSymbolsCheckbox.checked;\n symbolOptionsContainer.style.display = isChecked ? 'block' : 'none';\n\n \/\/ Enable\/disable sub-checkboxes based on main symbol checkbox\n symbolsCommonCheckbox.disabled = !isChecked;\n symbolsBracketsCheckbox.disabled = !isChecked;\n symbolsMathCheckbox.disabled = !isChecked;\n symbolsMiscCheckbox.disabled = !isChecked;\n\n \/\/ If main symbol checkbox is unchecked, uncheck all sub-checkboxes\n if (!isChecked) {\n symbolsCommonCheckbox.checked = false;\n symbolsBracketsCheckbox.checked = false;\n symbolsMathCheckbox.checked = false;\n symbolsMiscCheckbox.checked = false;\n } else {\n \/\/ If re-checked, ensure at least one symbol category is checked\n \/\/ or default to common if none were checked previously\n if (!symbolsCommonCheckbox.checked && !symbolsBracketsCheckbox.checked &&\n !symbolsMathCheckbox.checked && !symbolsMiscCheckbox.checked) {\n symbolsCommonCheckbox.checked = true;\n }\n }\n generatePassword(); \/\/ Regenerate password after toggling options\n }\n\n \/**\n * Generates a random password based on selected criteria.\n *\/\n function generatePassword() {\n const length = parseInt(passwordLengthInput.value);\n let characters = '';\n let generatedPassword = '';\n let requiredChars = []; \/\/ To ensure at least one of each selected type\n\n \/\/ Build the character pool based on selected options\n if (includeUppercaseCheckbox.checked) {\n characters += uppercaseChars;\n requiredChars.push(uppercaseChars);\n }\n if (includeLowercaseCheckbox.checked) {\n characters += lowercaseChars;\n requiredChars.push(lowercaseChars);\n }\n if (includeNumbersCheckbox.checked) {\n characters += numberChars;\n requiredChars.push(numberChars);\n }\n\n \/\/ Handle symbol categories if master 'Include Symbols' is checked\n if (includeSymbolsCheckbox.checked) {\n let currentSymbolChars = '';\n if (symbolsCommonCheckbox.checked) {\n currentSymbolChars += commonPunctuation;\n }\n if (symbolsBracketsCheckbox.checked) {\n currentSymbolChars += brackets;\n }\n if (symbolsMathCheckbox.checked) {\n currentSymbolChars += mathOperators;\n }\n if (symbolsMiscCheckbox.checked) {\n currentSymbolChars += miscellaneousSymbols;\n }\n\n if (currentSymbolChars.length > 0) {\n characters += currentSymbolChars;\n requiredChars.push(currentSymbolChars); \/\/ Add the combined symbols to requiredChars\n } else {\n \/\/ If 'Include Symbols' is checked but no symbol sub-category is, prompt user\n if (includeSymbolsCheckbox.checked) {\n showMessage('Please select at least one symbol category, or uncheck \"Include Symbols\".', 'error');\n passwordOutput.value = ''; \/\/ Clear output if no types selected\n return;\n }\n }\n }\n\n\n \/\/ Check if at least one character type (overall) is selected\n if (characters.length === 0) {\n showMessage('Please select at least one character type (Uppercase, Lowercase, Numbers, or Symbols).', 'error');\n passwordOutput.value = ''; \/\/ Clear output if no types selected\n return;\n }\n\n \/\/ Ensure at least one character from each *required* type is included\n requiredChars.forEach(charSet => {\n if (charSet.length > 0) { \/\/ Only add if the character set is not empty\n generatedPassword += charSet[Math.floor(Math.random() * charSet.length)];\n }\n });\n\n \/\/ Fill the rest of the password length with random characters from the combined pool\n const remainingLength = Math.max(0, length - generatedPassword.length);\n for (let i = 0; i < remainingLength; i++) {\n const randomIndex = Math.floor(Math.random() * characters.length);\n generatedPassword += characters[randomIndex];\n }\n\n \/\/ Trim the password if it's too long (can happen if length is very small and many types are required)\n generatedPassword = generatedPassword.substring(0, length);\n\n \/\/ Shuffle the generated password to ensure randomness of character positions\n generatedPassword = generatedPassword.split('').sort(() => Math.random() - 0.5).join('');\n\n passwordOutput.value = generatedPassword;\n }\n\n \/**\n * Copies the generated password to the clipboard.\n *\/\n function copyToClipboard() {\n const password = passwordOutput.value;\n if (password) {\n \/\/ Use document.execCommand('copy') for better compatibility within iframes\n try {\n const tempInput = document.createElement('textarea');\n tempInput.value = password;\n document.body.appendChild(tempInput);\n tempInput.select();\n document.execCommand('copy');\n document.body.removeChild(tempInput);\n showMessage('Password copied to clipboard!', 'success');\n } catch (err) {\n showMessage('Failed to copy password. Please copy manually.', 'error');\n console.error('Error copying to clipboard:', err);\n }\n } else {\n showMessage('No password to copy!', 'error');\n }\n }\n\n \/\/ Event Listeners\n passwordLengthInput.addEventListener('input', () => {\n lengthValueSpan.textContent = passwordLengthInput.value;\n generatePassword(); \/\/ Regenerate password when length changes\n });\n\n \/\/ Event listener for the main 'Include Symbols' checkbox\n includeSymbolsCheckbox.addEventListener('change', toggleSymbolOptions);\n\n \/\/ Event listeners for the new symbol category checkboxes\n symbolsCommonCheckbox.addEventListener('change', generatePassword);\n symbolsBracketsCheckbox.addEventListener('change', generatePassword);\n symbolsMathCheckbox.addEventListener('change', generatePassword);\n symbolsMiscCheckbox.addEventListener('change', generatePassword);\n\n \/\/ Event listeners for other character type checkboxes\n includeUppercaseCheckbox.addEventListener('change', generatePassword);\n includeLowercaseCheckbox.addEventListener('change', generatePassword);\n includeNumbersCheckbox.addEventListener('change', generatePassword);\n\n\n generateButton.addEventListener('click', generatePassword);\n copyButton.addEventListener('click', copyToClipboard);\n\n \/\/ Initial setup on load\n window.onload = () => {\n toggleSymbolOptions(); \/\/ Set initial state of symbol options visibility\n generatePassword(); \/\/ Generate initial password\n };\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Advanced Password Generator Password Generator Password Length: 12 Include Uppercase Include Lowercase Include Numbers Include Symbols Select Symbol Categories: Common Punctuation (!@#$%) Brackets ({}[]) Math Operators (+-*\/=) Miscellaneous (“,.:;`’ ) Generate Password<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.gizmo421.info\/index.php\/wp-json\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gizmo421.info\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.gizmo421.info\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.gizmo421.info\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gizmo421.info\/index.php\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":2,"href":"https:\/\/www.gizmo421.info\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":10,"href":"https:\/\/www.gizmo421.info\/index.php\/wp-json\/wp\/v2\/pages\/7\/revisions\/10"}],"wp:attachment":[{"href":"https:\/\/www.gizmo421.info\/index.php\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}