How to Create a Password Generator in HTML, CSS, and JavaScript on Blogger

In today's digital age, having strong and secure passwords is crucial for protecting our online accounts. Creating complex passwords manually can be challenging, but fortunately, we can develop a password generator using HTML, CSS, and JavaScript to automate the process. In this article, we'll guide you through the steps of building a password generator on Blogger.

In this article I will teach you how to create a password generator tool app on Blogger or also give code

Password Generator Full Page HTML CSS & Javascript Code

Dubble Click To Copy Code

<link href="https://fonts.googleapis.com/css?family=Montserrat&amp;display=swap" rel="stylesheet"/>  
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
  .pagebody {
	width: 100%;
	background-image: linear-gradient(to top, #df204d 100%, #f67938 200%);
	display: flex;
	justify-content: center;
	align-items: center;
}
button {
	border: 0;
	outline: 0;
}
.contr {
	margin: 40px 0;
	width: 400px;
	height: 600px;
	padding: 10px 25px;
	background: #0a0e31;
	border-radius: 10px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.45), 0 4px 8px rgba(0, 0, 0, 0.35), 0 8px 12px rgba(0, 0, 0, 0.15);
	font-family: "Montserrat";
	}
    
button {
  border: 0;
  outline: 0;
}

.result {
  position: relative;
  width: 100%;
  height: 65px;
  overflow: hidden;
}
.result__info {
  position: absolute;
  bottom: 4px;
  color: #fff;
  font-size: 0.8rem;
  transition: all 150ms ease-in-out;
  transform: translateY(200%);
  opacity: 0;
}
.result__info.right {
  right: 8px;
}
.result__info.left {
  left: 8px;
}
.result__viewbox {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: #fff;
  text-align: center;
  line-height: 65px;
}
.result #copy-btn {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: 38px;
  height: 38px;
  background: #fff;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  transition: all 350ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
  z-index: 2;
}
.result #copy-btn:active {
  box-shadow: 0 0 0 200px rgba(255, 255, 255, 0.08);
}
.result:hover #copy-btn {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.35);
}

.field-title {
  position: absolute;
  top: -10px;
  left: 8px;
  transform: translateY(-50%);
  font-weight: 800;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  font-size: 0.65rem;
  pointer-events: none;
  user-select: none;
}

.options {
  width: 100%;
  height: auto;
  margin: 50px 0;
}

.range__slider {
  position: relative;
  width: 100%;
  height: calc(65px - 10px);
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  margin: 30px 0;
}
.range__slider::before, .range__slider::after {
  position: absolute;
  color: #fff;
  font-size: 0.9rem;
  font-weight: bold;
}
.range__slider::before {
  content: attr(data-min);
  left: 10px;
}
.range__slider::after {
  content: attr(data-max);
  right: 10px;
}
.range__slider .length__title::after {
  content: attr(data-length);
  position: absolute;
  right: -16px;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

#slider {
  -webkit-appearance: none;
  width: calc(100% - (70px));
  height: 2px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.314);
  outline: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}
#slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}
#slider::-webkit-slider-thumb:hover {
  background: #d4d4d4;
  transform: scale(1.2);
}
#slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: white;
  cursor: pointer;
  transition: background 0.15s ease-in-out;
}
#slider::-moz-range-thumb:hover {
  background: #d4d4d4;
}

.settings {
  position: relative;
  height: auto;
  widows: 100%;
  display: flex;
  flex-direction: column;
}
.settings .setting {
  position: relative;
  width: 100%;
  height: calc(65px - 10px);
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding: 10px 25px;
  color: #fff;
  margin-bottom: 8px;
}
.settings .setting input {
  opacity: 1;
  position: absolute;
  width: 100%;
}
.settings .setting input + label {
  user-select: none;
}
.settings .setting input + label::before, .settings .setting input + label::after {
  content: "";
  position: absolute;
  transition: 150ms cubic-bezier(0.24, 0, 0.5, 1);
  transform: translateY(-50%);
  top: 50%;
  right: 10px;
  cursor: pointer;
}
.settings .setting input + label::before {
  height: 30px;
  width: 50px;
  border-radius: 30px;
  background: rgba(214, 214, 214, 0.434);
}
.settings .setting input + label::after {
  height: 24px;
  width: 24px;
  border-radius: 60px;
  right: 32px;
  background: #fff;
}
.settings .setting input:checked + label:before {
  background: #5d68e2;
  transition: all 150ms cubic-bezier(0, 0, 0, 0.1);
}
.settings .setting input:checked + label:after {
  right: 14px;
}
.settings .setting input:focus + label:before {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75);
}
.settings .setting input:disabled + label:before, .settings .setting input:disabled + label:after {
  cursor: not-allowed;
}
.settings .setting input:disabled + label:before {
  background: #4f4f6a;
}
.settings .setting input:disabled + label:after {
  background: #909090;
}

.btn.generate {
  user-select: none;
  position: relative;
  width: 100%;
  height: 50px;
  margin: 10px 0;
  border-radius: 8px;
  color: #fff;
  border: none;
  background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  letter-spacing: 1px;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 150ms ease;
}
.btn.generate:active {
  transform: translateY(-3%);
  box-shadow: 0 4px 8px rgba(255, 255, 255, 0.08);
}





</style>
<div class="pagebody">
  <div class="contr">
	<h2 class="title">Password Generator</h2>
	<div class="result">
		<div class="result__title field-title">Generated Password</div>
		<div class="result__info right">click to copy</div>
		<div class="result__info left">copied</div>
		<div class="result__viewbox" id="result">CLICK GENERATE</div>
		<button id="copy-btn" style="--x: 0; --y: 0; opacity: 0; pointer-events: none;"><i class="far fa-copy"></i></button>
	</div>
	<div class="length range__slider" data-max="32" data-min="4">
		<div class="length__title field-title" data-length="16">length:</div>
		<input id="slider" max="32" style="background: linear-gradient(90deg, rgb(11, 30, 223) 42.8571%, rgba(255, 255, 255, 0.216) 42.9571%);" type="range" value="16" />
	</div>

	<div class="settings">
		<span class="settings__title field-title">settings</span>
		<div class="setting">
			<input checked="" id="uppercase" type="checkbox" />
			<label>Include Uppercase</label>
		</div>
		<div class="setting">
			<input checked="" id="lowercase" type="checkbox" />
			<label>Include Lowercase</label>
		</div>
		<div class="setting">
			<input checked="" id="number" type="checkbox" />
			<label>Include Numbers</label>
		</div>
		<div class="setting">
			<input id="symbol" type="checkbox" />
			<label>Include Symbols</label>
		</div>
	</div>

	<button class="btn generate" id="generate">Generate Password</button>
</div>
  <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script>
      <script>
// Clear the concole on every refresh
console.clear();
// set the body to full height
// document.body.style.height = `${innerHeight}px`

// Range Slider Properties.
// Fill : The trailing color that you see when you drag the slider.
// background : Default Range Slider Background
const sliderProps = {
  fill: "#0B1EDF",
  background: "rgba(255, 255, 255, 0.214)" };


// Selecting the Range Slider container which will effect the LENGTH property of the password.
const slider = document.querySelector(".range__slider");

// Text which will show the value of the range slider.
const sliderValue = document.querySelector(".length__title");

// Using Event Listener to apply the fill and also change the value of the text.
slider.querySelector("input").addEventListener("input", event => {
  sliderValue.setAttribute("data-length", event.target.value);
  applyFill(event.target);
});
// Selecting the range input and passing it in the applyFill func.
applyFill(slider.querySelector("input"));
// This function is responsible to create the trailing color and setting the fill.
function applyFill(slider) {
  const percentage = 100 * (slider.value - slider.min) / (slider.max - slider.min);
  const bg = `linear-gradient(90deg, ${sliderProps.fill} ${percentage}%, ${sliderProps.background} ${percentage +
  0.1}%)`;
  slider.style.background = bg;
  sliderValue.setAttribute("data-length", slider.value);
}

// Object of all the function names that we will use to create random letters of password
const randomFunc = {
  lower: getRandomLower,
  upper: getRandomUpper,
  number: getRandomNumber,
  symbol: getRandomSymbol };


// Random more secure value
function secureMathRandom() {
  return window.crypto.getRandomValues(new Uint32Array(1))[0] / (Math.pow(2, 32) - 1);
}

// Generator Functions
// All the functions that are responsible to return a random value taht we will use to create password.
function getRandomLower() {
  return String.fromCharCode(Math.floor(Math.random() * 26) + 97);
}
function getRandomUpper() {
  return String.fromCharCode(Math.floor(Math.random() * 26) + 65);
}
function getRandomNumber() {
  return String.fromCharCode(Math.floor(secureMathRandom() * 10) + 48);
}
function getRandomSymbol() {
  const symbols = '~!@#$%^&*()_+{}":?><;.,';
  return symbols[Math.floor(Math.random() * symbols.length)];
}

// Selecting all the DOM Elements that are necessary -->

// The Viewbox where the result will be shown
const resultEl = document.getElementById("result");
// The input slider, will use to change the length of the password
const lengthEl = document.getElementById("slider");

// Checkboxes representing the options that is responsible to create differnt type of password based on user
const uppercaseEl = document.getElementById("uppercase");
const lowercaseEl = document.getElementById("lowercase");
const numberEl = document.getElementById("number");
const symbolEl = document.getElementById("symbol");

// Button to generate the password
const generateBtn = document.getElementById("generate");
// Button to copy the text
const copyBtn = document.getElementById("copy-btn");
// Result viewbox container
const resultContainer = document.querySelector(".result");
// Text info showed after generate button is clicked
const copyInfo = document.querySelector(".result__info.right");
// Text appear after copy button is clicked
const copiedInfo = document.querySelector(".result__info.left");

// if this variable is trye only then the copyBtn will appear, i.e. when the user first click generate the copyBth will interact.
let generatedPassword = false;

// Update Css Props of the COPY button
// Getting the bounds of the result viewbox container
let resultContainerBound = {
  left: resultContainer.getBoundingClientRect().left,
  top: resultContainer.getBoundingClientRect().top };

// This will update the position of the copy button based on mouse Position
resultContainer.addEventListener("mousemove", e => {
  resultContainerBound = {
    left: resultContainer.getBoundingClientRect().left,
    top: resultContainer.getBoundingClientRect().top };

  if (generatedPassword) {
    copyBtn.style.opacity = '1';
    copyBtn.style.pointerEvents = 'all';
    copyBtn.style.setProperty("--x", `${e.x - resultContainerBound.left}px`);
    copyBtn.style.setProperty("--y", `${e.y - resultContainerBound.top}px`);
  } else {
    copyBtn.style.opacity = '0';
    copyBtn.style.pointerEvents = 'none';
  }
});
window.addEventListener("resize", e => {
  resultContainerBound = {
    left: resultContainer.getBoundingClientRect().left,
    top: resultContainer.getBoundingClientRect().top };

});

// Copy Password in clipboard
copyBtn.addEventListener("click", () => {
  const textarea = document.createElement("textarea");
  const password = resultEl.innerText;
  if (!password || password == "CLICK GENERATE") {
    return;
  }
  textarea.value = password;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand("copy");
  textarea.remove();

  copyInfo.style.transform = "translateY(200%)";
  copyInfo.style.opacity = "0";
  copiedInfo.style.transform = "translateY(0%)";
  copiedInfo.style.opacity = "0.75";
});

// When Generate is clicked Password id generated.
generateBtn.addEventListener("click", () => {
  const length = +lengthEl.value;
  const hasLower = lowercaseEl.checked;
  const hasUpper = uppercaseEl.checked;
  const hasNumber = numberEl.checked;
  const hasSymbol = symbolEl.checked;
  generatedPassword = true;
  resultEl.innerText = generatePassword(length, hasLower, hasUpper, hasNumber, hasSymbol);
  copyInfo.style.transform = "translateY(0%)";
  copyInfo.style.opacity = "0.75";
  copiedInfo.style.transform = "translateY(200%)";
  copiedInfo.style.opacity = "0";
});

// Function responsible to generate password and then returning it.
function generatePassword(length, lower, upper, number, symbol) {
  let generatedPassword = "";
  const typesCount = lower + upper + number + symbol;
  const typesArr = [{ lower }, { upper }, { number }, { symbol }].filter(item => Object.values(item)[0]);
  if (typesCount === 0) {
    return "";
  }
  for (let i = 0; i < length; i++) {if (window.CP.shouldStopExecution(0)) break;
    typesArr.forEach(type => {
      const funcName = Object.keys(type)[0];
      generatedPassword += randomFunc[funcName]();
    });
  }window.CP.exitedLoop(0);
  return generatedPassword.slice(0, length).
  split('').sort(() => Math.random() - 0.5).
  join('');
}

// function that handles the checkboxes state, so at least one needs to be selected. The last checkbox will be disabled.
function disableOnlyCheckbox() {
  let totalChecked = [uppercaseEl, lowercaseEl, numberEl, symbolEl].filter(el => el.checked);
  totalChecked.forEach(el => {
    if (totalChecked.length == 1) {
      el.disabled = true;
    } else {
      el.disabled = false;
    }
  });
}

[uppercaseEl, lowercaseEl, numberEl, symbolEl].forEach(el => {
  el.addEventListener('click', () => {
    disableOnlyCheckbox();
  });
});
    </script>
  </div>

  

1. How to Create a Password Generator Tool In Blogger Page, follow these steps:

1. Log in to your Blogger account using your Google credentials.
2. After logging in, you'll be taken to the Blogger dashboard.
3. On the left sidebar, click on "Pages" to open the Pages section.
4. In the Pages section, you'll see a list of your existing pages (if any).
5. Click on the "New page" button, usually located at the top right corner of the Pages section.
6. A new page editor will open, And click on the "HTML" tab in the editor to switch to the HTML view.
7. Start by providing a title for your page. This title will be displayed as the page's heading.
8. Below the title, you'll find the main content area. Here, you can add Password Generator Tool Code to your page.
9. You can use the formatting toolbar provided to format your text, add links, or customize the appearance of your content.
10. Once you've finished adding content to your page, click on the "Publish" or "Save" button (depending on the Blogger interface version) to save your changes and publish the page.
11. After publishing, you can view your new page by clicking on the "View" button, which is usually located next to the page title in the Pages section.

That's it! You've successfully created a Password Generator Tool on Blogger.

2. Overview of HTML, CSS, and JavaScript

Before diving into the implementation, it's essential to have a basic understanding of HTML, CSS, and JavaScript. We'll provide a brief overview of these technologies, explaining their roles in web development.

3. Setting Up a New Blogger Project

Here, we'll walk you through the process of setting up a new project on Blogger. We'll cover the necessary steps, including creating a new blog, selecting a template, and accessing the HTML editor.

4. Creating the HTML Structure for the Password Generator

In this section, we'll start building the password generator by creating the HTML structure. We'll define the necessary elements such as input fields, buttons, and containers to hold the generated passwords.

5. Styling the Password Generator Using CSS

To make our password generator visually appealing, we'll apply CSS styles to the HTML elements created in the previous section. We'll discuss techniques for selecting elements, applying styles, and ensuring the generator's responsiveness.

6. Implementing the JavaScript Logic for Generating Passwords

Now, it's time to add functionality to our password generator. We'll use JavaScript to generate random passwords based on user-defined criteria. We'll cover topics such as generating random characters, combining different character sets, and ensuring password strength.

7. Adding User Interactions and Customization Options

To enhance user experience, we'll incorporate additional features such as password length control, the ability to include special characters, and the option to generate multiple passwords at once. We'll demonstrate how to capture user input and modify the password generation logic accordingly.

8. Testing and Refining the Password Generator

In this section, we'll discuss the importance of testing our password generator to ensure its functionality and reliability. We'll explore various testing scenarios and provide tips for debugging and refining the code.

9. Publishing the Password Generator on Blogger

Once we're satisfied with the password generator's performance, we'll guide you through the process of publishing it on Blogger. We'll explain how to embed the HTML, CSS, and JavaScript code into your blog and make it accessible to your readers.

10. Tips for Enhancing the Password Generator's Functionality and Security

In this section, we'll share some valuable tips for improving the functionality and security of your password generator. We'll cover techniques such as adding additional validation, implementing encryption, and incorporating password strength meters.

11. Conclusion

Creating a password generator using HTML, CSS, and JavaScript is an excellent way to automate the process of generating strong and secure passwords. In this article, we provided a step-by-step guide on building a password generator on Blogger. By following the outlined steps and incorporating the suggested tips, you can create a valuable tool that enhances your online security.

FAQs

Q1. Can I use the password generator on platforms other than Blogger?

Yes, absolutely! The password generator we built in this article can be used on any website or platform that supports HTML, CSS, and JavaScript.

Q2. Can I customize the password generation logic?

Certainly! Our password generator allows customization options such as password length, inclusion of special characters, and generating multiple passwords at once. You can modify the code to suit your specific requirements.

Q3. Is the password generator secure?

While the password generator provides a convenient way to generate passwords, it's important to remember that the security of the generated passwords depends on the implementation and user practices. Follow best security practices, such as regularly changing passwords and using unique combinations.

Q4. Can I add additional features to the password generator?

Absolutely! Our article provides a foundation for building a basic password generator. You can expand its functionality by adding features like password history, password saving, or integrating with password managers.

Q5. Are there any alternatives to Blogger for hosting the password generator?

Yes, there are several alternatives to Blogger for hosting your password generator. You can consider platforms like WordPress, Wix, or hosting it on your own domain using a web hosting service.