Coder Social home page Coder Social logo

03-javascript-password-generator's Introduction

03-JavaScript-Password-Generator

Description

The Password Generator builds complex passwords on demand.

It is a simple process that:

  1. gets the number of chacters to be used in the password
  2. gets the number of character sets to be used & flags them
  3. selects a random character from a character set chosen randomly from the set of flagged character sets
  4. appends the character to the end of the password
  5. displays the password in the textarea.

Passwords Rules:

  1. Minimum Length: 8 characters
  2. Maximum Length: 128 Characters
  3. Passwords can contain:
    • lower case characters
    • upper case charcaters
    • numbers
    • special characters
    • at least 1 character set must be used.

Data

All data specific to generating the password has been placed in a JavaScript object named passwordSettings.

Changes to the password specifications (number of characters or minimum character sets) are made in the object. Generally there would be no need to change the code.

passwordSettings contains the following:

lowercase: ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z",],

uppercase: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z",],

numbers: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],

special: ["@", "%", "+", "\\", "/", "'", "!", "#", "$", "^", "?", ":", ",", ")", "(", "}", "{", "]", "[", "~", "-", "_", ".",],

options: ["lowercase", "uppercase", "numbers", "special"],

prompts: ["Lowercase Characters", "Uppercase Characters", "Numbers", "Special Characters"],

choices: [],

minimumLength: 8,

maximumLength: 128,

minimumCharacterSets: 1,

nextPasswordCharacter: function () {
  // Get the next character set to be used from the array of selected character sets
  characterSet = this.choices[Math.floor(Math.random() * this.choices.length)];
  // Get the next Password Character
  return this[characterSet][Math.floor(Math.random() * this[characterSet].length)
  ];
},
  1. lowercase, uppercase, numbers and special are arrays that hold the Character Sets that can be used.
  2. options holds names of the charcaters sets
  3. prompts holds message prompts to allow looping
  4. choices holds the charcater set choices entered at runtime
  5. minimumLength is the minimum password length
  6. maximumLength is the maximum password length
  7. minimumCharacterSets is the minimum number of character sets to be used in the password
  8. nextPasswordCharacter is a function that will generate the next character using the information stored in the object.

Password Generator Website Link

Click the link to visit the deployed wbsite: Password Generator.

Site Structure

The Password Generator is a landing page tha contains : 1: Header - containing a Heading 2: Main Content Area - containing a Text Area that will display the generated password. 3. A button that initiates the JS code to generate the password.

Navigation

The Password Generator website looks like this:. Password Generator

Clicking the Generate Password Button starts collecting paramters the website needs to generate a password.

Prompt 1: Enter Password Length

Enter password Length

If:     1. a valid password length is entered the process will continue.     2. cancel is clicked the proces will stop     3. OK (with an empty inout field) the process will stop     4. any other entry and the prompt will be presented again

Prompt 2: Check for Lowercase Characters

Password Generator

If:     1. If OK is clicked then Lowercase Chacters will be included in password     2. If Cancel is clicked then Lowercase Characters will not be included in the password

Prompt 3: Check for Uppercase Characters

Password Generator

If:     1. If OK is clicked then Uppercase Chacters will be included in password     2. If Cancel is clicked then Uppercase Characters will not be included in the password

Prompt 4: Check for Numbers

Password Generator

If:     1. If OK is clicked then Numbers will be included in password     2. If Cancel is clicked then Numbers will not be included in the password

Prompt 5: Check for Special Characters

Password Generator

If:     1.If OK is clicked then Special Characters will be included in password     2. If Cancel is clicked then Special Characters will not be included in the password

Error Message: No Character Sets Selected

Password Generator

If no Character Sets were chosen for the new password then this error message is displayed.

When OK is clicked the process to choose Caracter Sets for the password will be repeated.

Result

When all necessary data has been entered the website will generate a new password and it will be displayed like this:

Password Generator

This a 25 character password using all Character Sets.

Changelog

The development history is recorded in the Changelog.

Resources Used

  1. Bootcamp Materials - Lesson Material from Week 3
  2. Prior knowlege and experience
  3. MDM Web Docs working with objects
  4. MDM Web Docs loops and iteration
  5. Character Sets provided in class as Useful Resources

03-javascript-password-generator's People

Watchers

Peter Medbury avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.