How To Create Random Password Generator Tool In Blogger

How To Create Random Password Generator Tool In Blogger

W

elcome to SoiPro. In this post, we are going to learn How To Create Random Password Generator Tool In Blogger, and for any platform, you are using, just follow our steps carefully for avoiding any error. but first, Let's talk about it a little.

Your password is your first line of defense against theft and fraud. Strong passwords protect your data from being stolen. But, it’s hard to remember a new strong password every time you need to create one! We go through life trusting in the strength of our passwords when in reality they are easily cracked.

The best thing you can do is to stop reusing passwords for different accounts, but what about the passwords you’ve forgotten? If this sounds like you, here are some ways to make a random password generator in javascript.

What Is A Random Password Generator Tool

Random password generators are a handy little tool that can be used to generate a password that is almost impossible to guess. This makes it hard for cybercriminals to know the passwords of their victims. A good password generator gives users a hint in their name (if they set their own), or can generate passwords based on a phrase they’ve entered.

If you are only trying to generate a random password you need to make it almost impossible to crack. Most security experts advise that a password should be between 10 and 20 characters long. The longer the password, the more difficult it is to crack. A password generator should be very short, with no passwords repeated more than once. So, the less a user has to remember the better.

Why Do You Need A Random Password Generator?

It doesn’t matter what kind of website you have. Even if you have a little niche site like a review site, a company, a forum, a blog, or whatever, you still need a password manager. Maybe, some of you want to have an online store or a virtual art gallery with your paintings. Whatever it is, you have a chance to make a random password generator for your website. This is called a password generator.

A random password generator doesn’t need to know any kind of personal information to pick random passwords. It just needs to take a string of characters and generate a random password from it. How is this done? When we use our fingers to create a random password, there is only one kind of human-generated password, namely, random combinations of alphabets and symbols.

What Are The Benefits Of A Random Password Generator?

By using a random password generator for your passwords, you can improve the security of your site, while still using the same passwords everywhere. As your website grows, password cracking efforts increase exponentially. A well-crafted, random password generator can help keep you safer.

View Demo

How To Create Random Password Generator Tool

To create a random password generator tool in your blogger site, you need to add HTML, CSS, and JavaScript codes. These codes have to be added in 3 steps. We will add HTML code in the 1st step, CSS in the 2nd, and JavaScript In the last step.

Step 1 - Adding HTML

<div class="Main-TPG">
<div class="intro-box">
  <h2>Random password generator</h2>
</div>
<div class="wrapper">
  <!-- Fields -->
  <div class="fields-box">
    <label for="new-chars">
      <span>Enter posible chars</span>
      <input type="text" id="new-chars">
    </label><label for="new-length">
      <span>Set string length</span>
      <input type="number" id="new-length" min="1">
    </label><label for="new-num">
      <span>Set items number</span>
      <input type="number" id="new-num" min="1">
    </label>
  </div>
  <!-- Table -->
  <div class="table-box">
    <table class="Tbl-o">
      <!-- Dynamic content! -->
    </table>
  </div>
  <!-- Buttons -->
  <div class="buttons-box">
    <button onclick="download();">Save</button>
    <button onclick="printTable();">Print</button>
  </div>
</div>
</div>

Step 2 - Adding CSS

These CSS Codes are in Compressed format if you want to beautify you can use our tool by Following this Link - CSS Beautifier Tool

If you are using a blogger template like Imagz + Landing Page then please use this piece of code instead of this below highlighted CSS.widget input[type=text],.widget input[type=email],.widget textarea{padding:inherit;line-height:normal;}.Main-TPG{color:#FFFFFF;}

If you are using Imagz + Landing Page blogger template then no need to add this highlighted CSS, leave it.

<style type="text/css">
  * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html, body {
  min-height: 100%;
}
body {
  background: #fafafc;
  font-family: 'noto sans', sans-serif;
  color: #FFFFFF;
}
.wrapper{width:90%;max-width:620px;margin:20px auto;border-radius:3px;background:rgba(255,255,255,0.1);}.intro-box{width:80%;max-width:820px;margin:60px auto 40px auto;}.intro-box h2{font-size:2em;font-weight:300;text-align:center;}.fields-box{padding:18px 5%;background:#9da2f3;}.fields-box label{display:inline-block;width:33.33%;padding:6px 12px;}.fields-box label span{display:block;width:100%;margin-bottom:4px;font-size:.8em;color:#BBDEFB;}.fields-box label input{width:100%;padding:8px;color:#29B6F6;background:#FFFFFF;background:rgba(255,255,255,0.9);border:none;outline:none;border-radius:3px;}@media only screen and (max-width:520px){.fields-box label{width:100%;}}.table-box{padding:10px 5%;background:#bcbfef;}table,tr,td{border:none;border-collapse:collapse;}.table-box table,.table-box table tr{width:100%;max-width:100%;padding:12px;}.table-box table tr{border-bottom:1px solid rgba(255,255,255,0.1);}.table-box table tr:last-child{border:none;}.table-box table tr td{padding:10px;text-align:left;outline:none;}.buttons-box{position:fixed;width:54px;right:14px;bottom:18px;z-index:1;}.buttons-box button{display:inline-block;width:54px;height:54px;margin-top:14px;font-size:.8em;font-weight:700;color:#2196F3;background:#FFFFFF;border:none;outline:none;border-radius:100%;text-align:center;box-shadow:0 5px 10px rgba(0,0,0,0.25),0 4px 8px rgba(0,0,0,0.25);cursor:pointer;transition:ease .2s;}.buttons-box button:hover{background:#EDE7F6;box-shadow:0 10px 20px rgba(0,0,0,0.1),0 8px 16px rgba(0,0,0,0.1);}@media print{@page{margin:.5cm;}body{border:6px solid #DDDDDD;}tr{border-bottom:1px solid #DDDDDD;}.intro-box,.fields-box,.buttons-box{display:none;}}
</style>

Step 3 - Adding JavaScript

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script>
  //Default values:
var setChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; //Posible chars.
var setLenght = 12; //Output length.
var setNum = 5; //Items length.

//Strings:
var pass = ""; //Password string.
var plainText = ""; //Plain text version.
var textTitle = ""; //Plain text intro.
var fileName = "pass.txt"; //Plain text filename.

//Random password function:
function randString() {
  //Get user values:
  var newChars = $("#new-chars").val();
  var newLenght = $("#new-length").val();
  var newNum = $("#new-num").val();
  //Check valid values:
  if (newChars) {
    setChars = newChars;
  };
  if (newLenght) {
    setLenght = newLenght;
  };
  if (newNum) {
    setNum = newNum;
  };
  //Reset table:
  $("table").empty();
  //Passwords gen:
  for (i=0; i<setNum; i++) {
    //Shuffle chars:
    for(var j = 0; j < setLenght; j++) {
      pass += setChars.charAt(Math.floor(Math.random() * setChars.length));
    };
    //Append items:
    $("table").append("<tr><td>" + parseInt(i+1) + "</td><td>" + pass + "</td><td contenteditable=''>Edit me!</td></tr>");
    //Reset 'pass' string:
    pass = "";
  };
};

//Run password generator:
$(document).ready(function(){
  randString();
});

//Password generator triggers:
$("input").change(function(){
  randString();
});

//Plain text gen:
function toPlain(){
  //Set plain text header:
  textTitle = "\n\n=========================\nRandom password generator\n   soipro.com\n=========================\n\n"
  //Get raw content:
  tableContent = $("table").html();
  //Remove HTML tags:
  plainText = tableContent.replace(/<tbody>|<\/tbody>|<tr>|<\/td>/g, '').replace(/<\/tr>/g, '\n').replace(/<td>|<td contenteditable="">/g, ' > ');
};

//Download function:
function download() {
  //Get plain text.
  toPlain();
  //Save file:
  var textContent = document.createElement('a');
  textContent.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(textTitle+plainText)); //Set content.
  textContent.setAttribute('download', fileName) //set filename.
  textContent.style.display = 'none'
  document.body.appendChild(textContent)
  textContent.click()
  document.body.removeChild(textContent)
};

//Print function:
function printTable(){
  window.print();
}

//Buttons display:
$(".buttons-box").hide(0);
setTimeout(function(){ 
  $(".buttons-box").fadeIn(300);
}, 5000);
</script>

Conclusion

These days, even the most secure, unchangeable passwords are a thing of the past. It is difficult to stop people from trying to crack your passwords. The most secure password is the one you can never remember. By randomly generating unique passwords for yourself and your family, you’ll be one step closer to a password that will always be strong.

We hope that this post helped you to make a random password generator tool on your blogger website. Do let us know if you have any other questions regarding dropdown menus. You can get in touch with us via our contact form or Fb.