{"id":759,"date":"2024-11-04T14:13:02","date_gmt":"2024-11-04T14:13:02","guid":{"rendered":"https:\/\/codingtutorials.in\/?p=759"},"modified":"2025-04-05T10:39:29","modified_gmt":"2025-04-05T10:39:29","slug":"create-random-password-in-html-css-and-javascript","status":"publish","type":"post","link":"https:\/\/codingtutorials.in\/create-random-password-in-html-css-and-javascript\/","title":{"rendered":"Create random password in html css and JavaScript"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"759\" class=\"elementor elementor-759\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-16e500e e-flex e-con-boxed e-con e-parent\" data-id=\"16e500e\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9fddd1a elementor-widget elementor-widget-text-editor\" data-id=\"9fddd1a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Passwords play a vital role in online security, and a strong password generator can help protect your accounts from unauthorized access. This guide will cover the steps to create a <a href=\"https:\/\/codingtutorials.in\/create-random-password-in-html-css-and-javascript\/\"><strong>random password generator using JavaScript<\/strong><\/a> and discuss the benefits of secure, random passwords.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-45b160b elementor-widget elementor-widget-heading\" data-id=\"45b160b\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Why Use a Password Generator?<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d0b6812 elementor-widget elementor-widget-text-editor\" data-id=\"d0b6812\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>A password generator helps create passwords that are:<\/p><ul><li><strong>Secure<\/strong> \u2013 Randomly generated passwords are typically harder to guess.<\/li><li><strong>Customizable<\/strong> \u2013 You can include or exclude specific characters, numbers, symbols, and even spaces.<\/li><li><strong>Easy to Use<\/strong> \u2013 A few clicks can create a password that meets your specific requirements.<\/li><\/ul><p>Using a password generator is a proactive way to increase security by ensuring that every account has a unique password that is challenging to guess.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-880ef8f elementor-widget elementor-widget-heading\" data-id=\"880ef8f\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Key Features of our JavaScript Password Generator<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ed079e5 elementor-widget elementor-widget-text-editor\" data-id=\"ed079e5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>This JavaScript password generator comes with many useful features:<\/p><ul><li><strong>Adjustable Length<\/strong> \u2013 Choose a password length between 1 and 30 characters.<\/li><li><strong>Character Customization<\/strong> \u2013 Enable lowercase, uppercase, numbers, symbols, and spaces as needed.<\/li><li><strong>Exclude Duplicates<\/strong> \u2013 Eliminate repeated characters to make passwords harder to crack.<\/li><li><strong>Real-Time Strength Indicator<\/strong> \u2013 Visual feedback on password strength as you adjust settings.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f3e4da4 elementor-widget elementor-widget-heading\" data-id=\"f3e4da4\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Understanding the Code Behind Password Generators<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-903e1c6 elementor-widget elementor-widget-text-editor\" data-id=\"903e1c6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>First of all we will create a file named <strong>Index.php<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b0a2aa8 elementor-widget elementor-widget-code-highlight\" data-id=\"b0a2aa8\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><!DOCTYPE html>\r\n<html lang=\"en\" dir=\"ltr\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Codingtutotials | Password Generator JavaScript<\/title>\r\n    <!-- Google Icon Link for Icons -->\r\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\">\r\n    <link rel=\"stylesheet\" href=\"style.css\">\r\n    <script src=\"script.js\" defer><\/script>\r\n<\/head>\r\n<body>\r\n    <div class=\"container\">\r\n        <h2>Random Password Generator<\/h2>\r\n        <div class=\"wrapper\">\r\n            <div class=\"input-box\">\r\n                <input type=\"text\" disabled>\r\n                <span class=\"material-symbols-rounded\">copy_all<\/span>\r\n            <\/div>\r\n            <div class=\"pass-indicator\"><\/div>\r\n            <div class=\"pass-length\">\r\n                <div class=\"details\">\r\n                    <label class=\"title\">Password Length<\/label>\r\n                    <span><\/span>\r\n                <\/div>\r\n                <input type=\"range\" min=\"1\" max=\"30\" value=\"15\" step=\"1\">\r\n            <\/div>\r\n            <div class=\"pass-settings\">\r\n                <label class=\"title\">Password Settings<\/label>\r\n                <ul class=\"options\">\r\n                    <li class=\"option\">\r\n                        <input type=\"checkbox\" id=\"lowercase\" checked>\r\n                        <label for=\"lowercase\">Lowercase (a-z)<\/label>\r\n                    <\/li>\r\n                    <li class=\"option\">\r\n                        <input type=\"checkbox\" id=\"uppercase\">\r\n                        <label for=\"uppercase\">Uppercase (A-Z)<\/label>\r\n                    <\/li>\r\n                    <li class=\"option\">\r\n                        <input type=\"checkbox\" id=\"numbers\">\r\n                        <label for=\"numbers\">Numbers (0-9)<\/label>\r\n                    <\/li>\r\n                    <li class=\"option\">\r\n                        <input type=\"checkbox\" id=\"symbols\">\r\n                        <label for=\"symbols\">Symbols (!-$^+)<\/label>\r\n                    <\/li>\r\n                    <li class=\"option\">\r\n                        <input type=\"checkbox\" id=\"exc-duplicate\">\r\n                        <label for=\"exc-duplicate\">Exclude Duplicate<\/label>\r\n                    <\/li>\r\n                    <li class=\"option\">\r\n                        <input type=\"checkbox\" id=\"spaces\">\r\n                        <label for=\"spaces\">Include Spaces<\/label>\r\n                    <\/li>\r\n                <\/ul>\r\n            <\/div>\r\n            <button class=\"generate-btn\">Generate Password<\/button>\r\n        <\/div>\r\n    <\/div>\r\n<\/body>\r\n<\/html>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3c53705 elementor-widget elementor-widget-text-editor\" data-id=\"3c53705\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Then we will create a file named <strong>style.css<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b8f01c5 elementor-widget elementor-widget-code-highlight\" data-id=\"b8f01c5\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>@import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600&display=swap');\r\n* {\r\n    margin: 0;\r\n    padding: 0;\r\n    box-sizing: border-box;\r\n    font-family: 'Poppins', sans-serif;\r\n}\r\nbody {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    min-height: 100vh;\r\n    background: greenyellow;\r\n}\r\n.container {\r\n    width: 450px;\r\n    background: #fff;\r\n    border-radius: 8px;\r\n    box-shadow: 0 10px 20px rgba(0,0,0,0.05);\r\n}\r\n.container h2 {\r\n    font-weight: 600;\r\n    font-size: 1.31rem;\r\n    padding: 1rem 1.75rem;\r\n    border-bottom: 1px solid #d4dbe5;\r\n}\r\n.wrapper {\r\n    margin: 1.25rem 1.75rem;\r\n}\r\n.wrapper .input-box {\r\n    position: relative;\r\n}\r\n.input-box input {\r\n    width: 100%;\r\n    height: 53px;\r\n    color: #000;\r\n    background: none;\r\n    font-size: 1.06rem;\r\n    font-weight: 500;\r\n    border-radius: 4px;\r\n    letter-spacing: 1.4px;\r\n    border: 1px solid #aaa;\r\n    padding: 0 2.85rem 0 1rem;\r\n}\r\n.input-box span {\r\n    position: absolute;\r\n    right: 13px;\r\n    cursor: pointer;\r\n    line-height: 53px;\r\n    color: #707070;\r\n}\r\n.input-box span:hover {\r\n    color: #4285F4!important;\r\n}\r\n.wrapper .pass-indicator {\r\n    width: 100%;\r\n    height: 4px;\r\n    background: #dfdfdf;\r\n    margin-top: 0.75rem;\r\n    border-radius: 25px;\r\n}\r\n.pass-indicator#weak::before {\r\n    content: \"\";\r\n    height: 100%;\r\n    width: 20%;\r\n    background: #E64A4A;\r\n}\r\n.pass-indicator#medium::before {\r\n    content: \"\";\r\n    height: 100%;\r\n    width: 50%;\r\n    background: #f1c80b;\r\n}\r\n.pass-indicator#strong::before {\r\n    content: \"\";\r\n    height: 100%;\r\n    width: 100%;\r\n    background: #4285F4;\r\n}\r\n.wrapper .pass-length {\r\n    margin: 1.56rem 0 1.25rem;\r\n}\r\n.pass-length .details {\r\n    display: flex;\r\n    justify-content: space-between;\r\n}\r\n.pass-length input {\r\n    width: 100%;\r\n    height: 5px;\r\n}\r\n.pass-settings .options {\r\n    display: flex;\r\n    list-style: none;\r\n    flex-wrap: wrap;\r\n    margin-top: 1rem;\r\n}\r\n.pass-settings .options .option {\r\n    display: flex;\r\n    align-items: center;\r\n    margin-bottom: 1rem;\r\n    width: calc(100% \/ 2);\r\n}\r\n.wrapper .generate-btn {\r\n    width: 100%;\r\n    color: #fff;\r\n    background: #4285F4;\r\n    font-size: 1.06rem;\r\n    padding: 0.94rem 0;\r\n    border-radius: 5px;\r\n    text-transform: uppercase;\r\n    margin: 0.94rem 0 1.3rem;\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a9d143e elementor-widget elementor-widget-text-editor\" data-id=\"a9d143e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>And then we will create a file called <strong>script.js<\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-09387a4 elementor-widget elementor-widget-code-highlight\" data-id=\"09387a4\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>const lengthSlider = document.querySelector(\".pass-length input\"),\r\noptions = document.querySelectorAll(\".option input\"),\r\ncopyIcon = document.querySelector(\".input-box span\"),\r\npasswordInput = document.querySelector(\".input-box input\"),\r\npassIndicator = document.querySelector(\".pass-indicator\"),\r\ngenerateBtn = document.querySelector(\".generate-btn\");\r\n\r\nconst characters = {\r\n    lowercase: \"abcdefghijklmnopqrstuvwxyz\",\r\n    uppercase: \"ABCDEFGHIJKLMNOPQRSTUVWXYZ\",\r\n    numbers: \"0123456789\",\r\n    symbols: \"^!$%&|[](){}:;.,*+-#@<>~\"\r\n};\r\n\r\nconst generatePassword = () => {\r\n    let staticPassword = \"\",\r\n    randomPassword = \"\",\r\n    excludeDuplicate = false,\r\n    passLength = lengthSlider.value;\r\n\r\n    options.forEach(option => {\r\n        if(option.checked) {\r\n            if(option.id !== \"exc-duplicate\" && option.id !== \"spaces\") {\r\n                staticPassword += characters[option.id];\r\n            } else if(option.id === \"spaces\") {\r\n                staticPassword += `  ${staticPassword}  `;\r\n            } else {\r\n                excludeDuplicate = true;\r\n            }\r\n        }\r\n    });\r\n\r\n    for (let i = 0; i < passLength; i++) {\r\n        let randomChar = staticPassword[Math.floor(Math.random() * staticPassword.length)];\r\n        if(excludeDuplicate) {\r\n            !randomPassword.includes(randomChar) || randomChar == \" \" ? randomPassword += randomChar : i--;\r\n        } else {\r\n            randomPassword += randomChar;\r\n        }\r\n    }\r\n    passwordInput.value = randomPassword;\r\n};\r\n\r\nconst updatePassIndicator = () => {\r\n    passIndicator.id = lengthSlider.value <= 8 ? \"weak\" : lengthSlider.value <= 16 ? \"medium\" : \"strong\";\r\n};\r\n\r\nconst updateSlider = () => {\r\n    document.querySelector(\".pass-length span\").innerText = lengthSlider.value;\r\n    generatePassword();\r\n    updatePassIndicator();\r\n};\r\nupdateSlider();\r\n\r\nconst copyPassword = () => {\r\n    navigator.clipboard.writeText(passwordInput.value);\r\n    copyIcon.innerText = \"check\";\r\n    copyIcon.style.color = \"#4285F4\";\r\n    setTimeout(() => {\r\n        copyIcon.innerText = \"copy_all\";\r\n        copyIcon.style.color = \"#707070\";\r\n    }, 1500);\r\n};\r\n\r\ncopyIcon.addEventListener(\"click\", copyPassword);\r\nlengthSlider.addEventListener(\"input\", updateSlider);\r\ngenerateBtn.addEventListener(\"click\", generatePassword);\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1a150c1 elementor-widget elementor-widget-heading\" data-id=\"1a150c1\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Benefits of a JavaScript Password Generator<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dd2df21 elementor-widget elementor-widget-text-editor\" data-id=\"dd2df21\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>There are several advantages to using a password generator in JavaScript:<\/p><ul><li><strong>No API Required:<\/strong> This generator runs directly in the browser with JavaScript, so you don&#8217;t need any third-party services or APIs to generate passwords.<\/li><li><strong>Customizable Options: <\/strong>It offers more flexibility than some online generators, allowing you to tailor passwords to specific security needs.<\/li><li><strong>Improve Security:<\/strong> With the option to exclude random characters and duplicates, your passwords will be harder to crack.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b5587a5 elementor-widget elementor-widget-heading\" data-id=\"b5587a5\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Conclusion<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9f6aeb0 elementor-widget elementor-widget-text-editor\" data-id=\"9f6aeb0\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Creating a <a href=\"https:\/\/codingtutorials.in\/create-random-password-in-html-css-and-javascript\/\"><strong>password generator with JavaScript<\/strong><\/a> is a great project to enhance your JavaScript skills while contributing to online security. Customization options make it suited to different security needs, whether for personal use or business applications. Explore the code and see how you can further personalize the generator by adjusting character type, length, and other settings!<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-91c88d3 elementor-widget elementor-widget-shortcode\" data-id=\"91c88d3\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><style type=\"text\/css\">\r\n\t\t#dae-shortcode779-download-wrapper {\r\n\t\t\tbackground: url() !important;\r\n\t\t\tbackground-attachment: scroll !important;\r\n\t\t}\r\n\t\t#dae-shortcode779-download-wrapper .dae-shortcode-download-file-image {\r\n\t\t\twidth: 40% !important;\r\n\t\t}\r\n\t\t#dae-shortcode779-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-download-file-image {\r\n\t\t\twidth: 20% !important;\r\n\t\t}\r\n\t\t#dae-shortcode779-download-wrapper .dae-shortcode-download-title {\r\n\t\t\tfont-size: 40px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t}\r\n\t\t#dae-shortcode779-download-wrapper .dae-shortcode-download-text {\r\n\t\t\tfont-size: 16px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tcolor: #444444 !important;\r\n\t\t}\r\n\t\t#dae-shortcode779-download-wrapper .dae-shortcode-download-text h1,\r\n\t\t#dae-shortcode779-download-wrapper .dae-shortcode-download-text h2,\r\n\t\t#dae-shortcode779-download-wrapper .dae-shortcode-download-text h3,\r\n\t\t#dae-shortcode779-download-wrapper .dae-shortcode-download-text h4,\r\n\t\t#dae-shortcode779-download-wrapper .dae-shortcode-download-text h5 {\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode779-download-wrapper .dae-shortcode-download-button {\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t\tbackground: none !important;\r\n\t\t\tfont-size: 25px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\twidth: auto !important;\r\n\t\t\tpadding: 20px 8px !important;\r\n\t\t\tborder-color: #0073aa !important;\r\n\t\t\tborder-radius: 10px !important;\r\n\t\t\t-moz-border-radius: 10px !important;\r\n\t\t\t-webkit-border-radius: 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode779-download-wrapper .dae-shortcode-download-button:hover {\r\n\t\t\tcolor: #ffffff !important;\r\n\t\t\tbackground: #0073aa !important;\r\n\t\t\tborder-color: #0073aa !important;\r\n\t\t\tfont-size: 25px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\twidth: auto !important;\r\n\t\t\tpadding: 20px 8px !important;\r\n\t\t\tborder-radius: 10px !important;\r\n\t\t\t-moz-border-radius: 10px !important;\r\n\t\t\t-webkit-border-radius: 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode779-download-wrapper .dae-shortcode-register-label {\r\n\t\t\tfont-size: 18px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tcolor: #444444 !important;\r\n\t\t}\r\n\t\t#dae-shortcode779-download-wrapper .dae-shortcode-register-icon {\r\n\t\t\theight: calc(45px + 4px) !important;\r\n\t\t\tfont-size: 15px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tpadding: 15px !important;\r\n\t\t\tcolor: #ffffff !important;\r\n\t\t\tbackground: #0073aa !important;\r\n\t\t\tborder-radius: 10px 0 0 10px !important;\r\n\t\t\t-moz-border-radius: 10px 0 0 10px !important;\r\n\t\t\t-webkit-border-radius: 10px 0 0 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode779-download-wrapper .dae-shortcode-register-field {\r\n\t\t\theight: calc(45px + 4px) !important;\r\n\t\t\tfont-size: 15px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tpadding: 15px !important;\r\n\t\t\tcolor: #444444 !important;\r\n\t\t\tbackground: #f9f9f9 !important;\r\n\t\t\tborder-radius: 0 10px 10px 0 !important;\r\n\t\t\t-moz-border-radius: 0 10px 10px 0 !important;\r\n\t\t\t-webkit-border-radius: 0 10px 10px 0 !important;\r\n\t\t}\r\n\t\t#dae-shortcode779-download-wrapper .dae-shortcode-register-select-icon {\r\n\t\t\ttop: calc(50% - 7.5px) !important;\r\n\t\t\tright: 15px !important;\r\n\t\t\tfont-size: 15px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tcolor: #444444 !important;\r\n\t\t}\r\n\t\t#dae-shortcode779-download-wrapper .dae-shortcode-register-field::-webkit-input-placeholder,\r\n\t\t#dae-shortcode779-download-wrapper .dae-shortcode-register-field::placeholder {\r\n\t\t\tcolor: #888888 !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode779-download-wrapper .dae-shortcode-register-field::-ms-input-placeholder {\r\n\t\t\tcolor: #888888 !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode779-download-wrapper .dae-shortcode-register-checkbox-text {\r\n\t\t\tcolor: #444444 !important;\r\n\t\t\tfont-size: 12px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode779-download-wrapper .dae-shortcode-register-checkbox-text a {\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t}\r\n\t\t#dae-shortcode779-download-wrapper .dae-shortcode-register-checkbox-text a:hover {\r\n\t\t\tcolor: #0081c1 !important;\r\n\t\t}\r\n\t\t#dae-shortcode779-download-wrapper .dae-shortcode-register-submit {\r\n\t\t\tcolor: #ffffff !important;\r\n\t\t\tfont-size: 18px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tpadding: 18px !important;\r\n\t\t\tbackground: #0073aa !important;\r\n\t\t\tborder-radius: 10px !important;\r\n\t\t\t-moz-border-radius: 10px !important;\r\n\t\t\t-webkit-border-radius: 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode779-download-wrapper .dae-shortcode-register-submit:hover {\r\n\t\t\tcolor: #ffffff !important;\r\n\t\t\tbackground: #0081c1 !important;\r\n\t\t\tfont-size: 18px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t\tpadding: 18px !important;\r\n\t\t\tborder-radius: 10px !important;\r\n\t\t\t-moz-border-radius: 10px !important;\r\n\t\t\t-webkit-border-radius: 10px !important;\r\n\t\t}\r\n\t\t#dae-shortcode779-download-wrapper .dae-shortcode-register-loading {\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t}\r\n\t\t#dae-shortcode779-download-wrapper .dae-shortcode-register-message {\r\n\t\t\tfont-size: 16px !important;\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode779-download-wrapper .dae-shortcode-register-error {\r\n\t\t\tcolor: #dd1111 !important;\r\n\t\t}\r\n\t\t#dae-shortcode779-download-wrapper .dae-shortcode-register-success {\r\n\t\t\tcolor: #0073aa !important;\r\n\t\t}\r\n\t\t#dae-shortcode779-download-wrapper .dae-shortcode-register-category-interests h4,\r\n\t\t#dae-shortcode779-download-wrapper .dae-shortcode-register-input-wrap-interest label {\r\n\t\t\tfont-family: Arial, Helvetica, sans-serif !important;\r\n\t\t}\r\n\t\t#dae-shortcode779-download-wrapper {\r\n\t\t\talign-items: center !important;\r\n\t\t\t-webkit-align-items: center !important;\r\n\t\t\tjustify-content: flex-start !important;\r\n\t\t\t-webkit-justify-content: flex-start !important;\r\n\t\t\t-moz-justify-content: fle-start !important;\r\n\t\t}\r\n\t\t#dae-shortcode779-download-wrapper .dae-shortcode-download-content-wrapper,\r\n\t\t#dae-shortcode779-download-wrapper .dae-shortcode-download-title,\r\n\t\t#dae-shortcode779-download-wrapper .dae-shortcode-download-text,\r\n\t\t#dae-shortcode779-download-wrapper .dae-shortcode-register-wrapper p,\r\n\t\t#dae-shortcode779-download-wrapper .dae-shortcode-register-category-interests-wrap {\r\n\t\t\ttext-align: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode779-download-wrapper .dae-shortcode-register-field-wrap {\r\n\t\t\tjustify-content: center !important;\r\n\t\t\t-webkit-justify-content: center !important;\r\n\t\t\t-moz-justify-content: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode779-download-wrapper .dae-shortcode-register-label,\r\n\t\t#dae-shortcode779-download-wrapper .dae-shortcode-register-message,\r\n\t\t#dae-shortcode779-download-wrapper .dae-shortcode-register-category-interests-wrap {\r\n\t\t\tmargin: 20px auto !important;\r\n\t\t}\r\n\t\t#dae-shortcode779-download-wrapper.dae-shortcode-download-wrapper-wide {\r\n\t\t\talign-items: center !important;\r\n\t\t\t-webkit-align-items: center !important;\r\n\t\t\tjustify-content: center !important;\r\n\t\t\t-webkit-justify-content: center !important;\r\n\t\t\t-moz-justify-content: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode779-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-download-content-wrapper,\r\n\t\t#dae-shortcode779-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-download-title,\r\n\t\t#dae-shortcode779-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-download-text,\r\n\t\t#dae-shortcode779-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-wrapper p,\r\n\t\t#dae-shortcode779-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-category-interests-wrap {\r\n\t\t\ttext-align: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode779-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-field-wrap {\r\n\t\t\tjustify-content: center !important;\r\n\t\t\t-webkit-justify-content: center !important;\r\n\t\t\t-moz-justify-content: center !important;\r\n\t\t}\r\n\t\t#dae-shortcode779-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-label,\r\n\t\t#dae-shortcode779-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-message,\r\n\t\t#dae-shortcode779-download-wrapper.dae-shortcode-download-wrapper-wide .dae-shortcode-register-category-interests-wrap {\r\n\t\t\tmargin: 20px auto !important;\r\n\t\t}\r\n\t<\/style>\r\n\t\t<div id=\"dae-shortcode779-download-wrapper\" class=\"dae-shortcode-download-wrapper\">\r\n\t\t\t\r\n\t\t\t<div class=\"dae-shortcode-download-content-wrapper\">\r\n\t\t\t\t<h2 class=\"dae-shortcode-download-title\">Random Password Generate Source Code<\/h2>\r\n\t\t\t\t\r\n\t\t\t\t<div class=\"dae-shortcode-download-button\">\r\n\t\t\t\t\t<span class=\"dae-shortcode-download-button-icon\"><i class=\"fas fa-download\"><\/i><\/span>\r\n\t\t\t\t\t<span class=\"dae-shortcode-download-button-text\">FREE DOWNLOAD<\/span>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"dae-shortcode-register-wrapper\">\r\n\t\t\t\t\t<p class=\"dae-shortcode-register-label\">Send download link to:<\/p>\r\n\t\t\t\t\t<form class=\"dae-shortcode-register-form\" method=\"post\" novalidate=\"novalidate\">\r\n\t\t\t\t\t\t<input type=\"hidden\" name=\"file\" value=\"random_password_generator.zip\" \/>\r\n\t\t\t\t\t\t<div class=\"dae-shortcode-register-field-wrap\"><div class=\"dae-shortcode-register-icon\"><i class=\"fas fa-envelope\"><\/i><\/div><div class=\"dae-shortcode-register-input-wrap\"><input class=\"dae-shortcode-register-field\" type=\"email\" name=\"email\" placeholder=\"Email\" autocomplete=\"off\" \/><\/div><\/div>\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t<p>\r\n\t\t\t\t\t\t\t<input class=\"dae-shortcode-register-submit\" type=\"submit\" value=\"Send link\" \/>\r\n\t\t\t\t\t\t<\/p>\r\n\t\t\t\t\t\t<p class=\"dae-shortcode-register-loading\">\r\n\t\t\t\t\t\t\t<i class=\"fas fa-spinner fa-spin\"><\/i>\r\n\t\t\t\t\t\t<\/p>\r\n\t\t\t\t\t<\/form>\r\n\t\t\t\t\t<p class=\"dae-shortcode-register-message\"><\/p>\r\n\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Passwords play a vital role in online security, and a strong password generator can help protect your accounts<\/p>\n","protected":false},"author":1,"featured_media":760,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16,4],"tags":[70,69,68,72,71],"class_list":["post-759","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-htmlcss","category-javascript","tag-html-and-css","tag-html-css-javascript","tag-password-generator","tag-random-password-generator","tag-strong-password-generator"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to create random password in html, css and javascript -<\/title>\n<meta name=\"description\" content=\"Generate secure and random passwords quickly with our online Password Generator. Customize the length and characters for enhanced security.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codingtutorials.in\/create-random-password-in-html-css-and-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to create random password in html, css and javascript -\" \/>\n<meta property=\"og:description\" content=\"Generate secure and random passwords quickly with our online Password Generator. Customize the length and characters for enhanced security.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codingtutorials.in\/create-random-password-in-html-css-and-javascript\/\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/profile.php?id=100040911374714\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-04T14:13:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-05T10:39:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/11\/random-password-generator.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"coding2w_newspaper\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@_CodingAcademy_\" \/>\n<meta name=\"twitter:site\" content=\"@_CodingAcademy_\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"coding2w_newspaper\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to create random password in html, css and javascript -","description":"Generate secure and random passwords quickly with our online Password Generator. Customize the length and characters for enhanced security.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codingtutorials.in\/create-random-password-in-html-css-and-javascript\/","og_locale":"en_US","og_type":"article","og_title":"How to create random password in html, css and javascript -","og_description":"Generate secure and random passwords quickly with our online Password Generator. Customize the length and characters for enhanced security.","og_url":"https:\/\/codingtutorials.in\/create-random-password-in-html-css-and-javascript\/","article_publisher":"https:\/\/www.facebook.com\/profile.php?id=100040911374714","article_published_time":"2024-11-04T14:13:02+00:00","article_modified_time":"2025-04-05T10:39:29+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/11\/random-password-generator.webp","type":"image\/webp"}],"author":"coding2w_newspaper","twitter_card":"summary_large_image","twitter_creator":"@_CodingAcademy_","twitter_site":"@_CodingAcademy_","twitter_misc":{"Written by":"coding2w_newspaper","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codingtutorials.in\/create-random-password-in-html-css-and-javascript\/#article","isPartOf":{"@id":"https:\/\/codingtutorials.in\/create-random-password-in-html-css-and-javascript\/"},"author":{"name":"coding2w_newspaper","@id":"https:\/\/codingtutorials.in\/#\/schema\/person\/dc3516ff75a6deb0658894c3007d4b10"},"headline":"Create random password in html css and JavaScript","datePublished":"2024-11-04T14:13:02+00:00","dateModified":"2025-04-05T10:39:29+00:00","mainEntityOfPage":{"@id":"https:\/\/codingtutorials.in\/create-random-password-in-html-css-and-javascript\/"},"wordCount":361,"commentCount":0,"publisher":{"@id":"https:\/\/codingtutorials.in\/#organization"},"image":{"@id":"https:\/\/codingtutorials.in\/create-random-password-in-html-css-and-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/11\/random-password-generator.webp","keywords":["HTML and CSS","HTML CSS JavaScript","Password Generator","Random Password Generator","strong password generator"],"articleSection":["HTML&amp;CSS","Javascript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codingtutorials.in\/create-random-password-in-html-css-and-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codingtutorials.in\/create-random-password-in-html-css-and-javascript\/","url":"https:\/\/codingtutorials.in\/create-random-password-in-html-css-and-javascript\/","name":"How to create random password in html, css and javascript -","isPartOf":{"@id":"https:\/\/codingtutorials.in\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codingtutorials.in\/create-random-password-in-html-css-and-javascript\/#primaryimage"},"image":{"@id":"https:\/\/codingtutorials.in\/create-random-password-in-html-css-and-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/11\/random-password-generator.webp","datePublished":"2024-11-04T14:13:02+00:00","dateModified":"2025-04-05T10:39:29+00:00","description":"Generate secure and random passwords quickly with our online Password Generator. Customize the length and characters for enhanced security.","breadcrumb":{"@id":"https:\/\/codingtutorials.in\/create-random-password-in-html-css-and-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codingtutorials.in\/create-random-password-in-html-css-and-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codingtutorials.in\/create-random-password-in-html-css-and-javascript\/#primaryimage","url":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/11\/random-password-generator.webp","contentUrl":"https:\/\/codingtutorials.in\/wp-content\/uploads\/2024\/11\/random-password-generator.webp","width":1200,"height":600,"caption":"Random Password Generator in JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/codingtutorials.in\/create-random-password-in-html-css-and-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codingtutorials.in\/"},{"@type":"ListItem","position":2,"name":"Create random password in html css and JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/codingtutorials.in\/#website","url":"https:\/\/codingtutorials.in\/","name":"Coding Tutorials","description":"","publisher":{"@id":"https:\/\/codingtutorials.in\/#organization"},"alternateName":"Coding Tutorial for Beginners","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codingtutorials.in\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codingtutorials.in\/#organization","name":"Coding Tutorials","url":"https:\/\/codingtutorials.in\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codingtutorials.in\/#\/schema\/logo\/image\/","url":"","contentUrl":"","caption":"Coding Tutorials"},"image":{"@id":"https:\/\/codingtutorials.in\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/profile.php?id=100040911374714","https:\/\/x.com\/_CodingAcademy_","https:\/\/www.instagram.com\/coder_ranjeet\/","https:\/\/www.threads.net\/@coder_ranjeet"]},{"@type":"Person","@id":"https:\/\/codingtutorials.in\/#\/schema\/person\/dc3516ff75a6deb0658894c3007d4b10","name":"coding2w_newspaper","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codingtutorials.in\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3961f35c9d22b0aba7200010f606be8712290283690055a69d398a39a2852992?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3961f35c9d22b0aba7200010f606be8712290283690055a69d398a39a2852992?s=96&d=mm&r=g","caption":"coding2w_newspaper"},"sameAs":["https:\/\/codingtutorials.in\/"],"url":"https:\/\/codingtutorials.in\/author\/coding2w_newspaper\/"}]}},"_links":{"self":[{"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/posts\/759","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/comments?post=759"}],"version-history":[{"count":35,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/posts\/759\/revisions"}],"predecessor-version":[{"id":1537,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/posts\/759\/revisions\/1537"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/media\/760"}],"wp:attachment":[{"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/media?parent=759"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/categories?post=759"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codingtutorials.in\/wp-json\/wp\/v2\/tags?post=759"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}