Coders Packet

Password_Generator Desktop Application for Mac Users Built on Electron.js

By Rishiraj Behera

Password Generator Electron.js Application for Mac built using HTML, CSS and JavaScript.

This application is built using Vanilla JavaScript and Electron.js. With the help of Electron.js one can even build cross-platform software applications.

The Code to Generate Random expressions: 

function getPassword(){
    var chars="0123456789abcdefghijklmnopqsrtuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
    var length=8;
    var pass="";

    for(var i=0;i<length;i=i+1){
        var randomNumber=Math.floor(Math.random()*chars.length);
        pass=pass+chars.substring(randomNumber,randomNumber+1);
    }
    document.getElementById("Password").value=pass;
    
    
}

How to increase the Password-Generator Strength?

You can even make the password more difficult by increasing the length, and adding some more special characters like "$#%@" to the 'chars'. 

I didn't add special characters because many websites don't accept special characters in password field.

 

Password Generator

How to change the Background of Password Generator?

-> To change the background image, unzip the file and go to 'src' folder. This is where all the codes are present. The 'index.html' , 'index.css' & 'home.js' are the files which are responsible for the fortend of the application. 

-> Go to index.css and there you'll see something like this: 

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #f8f8f8;
  background-image: url("https://images.unsplash.com/photo-1521728935364-00584c026397?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjR8fHdoaXRlfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60");
  background-position-y: 100%;
  background-size: cover;
  background-repeat: no-repeat;
}

-> Just change the url to the url of your desired image and save. 

-> Restart the application to view the changes. 

 

For any other query, feel free to reach me on Linkedln: 

https://www.linkedin.com/in/rishiraj-behera-13007/

Download project

Reviews Report

Submitted by Rishiraj Behera (rishiraj13007)

Download packets of source code on Coders Packet