Git Product home page Git Product logo

bootcamp-week5-challenge's Introduction

Password Generator App

Intermediate JavaScript: Password Generator

Table of contents

Overview

This week’s Challenge requires you to create an application that an employee can use to generate a random password based on criteria they’ve selected.

The challenge

This week’s challenge requires you to create an application that an employee can use to generate a random password based on criteria they’ve selected by modifying starter code. This app will run in the browser, and will feature dynamically updated HTML and CSS powered by JavaScript code that you write. It will have a clean and polished user interface that is responsive, ensuring that it adapts to multiple screen sizes.

The password can include special characters. If you’re unfamiliar with these, see this list of Password Special Characters from the OWASP Foundation.

Screenshot

Password Generator UI

Links

My process

First, I went through a design phase of the data flow, pseudocode, and modelling the activity and sequence diagrams of the application in UML.

You can check further details about the application design at the software design document.

Data Flow Analysis

Inputs Processes Outputs
Length Validate length between 10 and 64 characters Password generated matching the chosen criteria
Character types Validate at least one charater type is selected

Activity Diagram

Password Generator Activity Diagram

Pseudocode

Main workflow

Precondition. Receive a "Generate Password" event

1. Set "password length" to zero (0)

2. Confirm and validate "password length" user input

3. Initialise "password character types" as empty

4. Confirm and validate "password character types" user input

5. Initialise "password generated" as empty                         

6. Generate "password generated" with lenght and character types user's inputs

7. Output "password generated"

Refinement: 2. Confirm and validate "password length"

2. While "password length" is not between 10 and 64 characters

  2.1 Get "password length" user's input

2. End While "password length"

Refinement: 4. Confirm and validate "password character types"

4. While "password characters" is empty

  4.1 Get "special characters" user's confirmation
  4.2 If user wants to include "special characters"
    4.2.1 Include "special characters" into "password characters"
  4.2 End If "special characters"

  4.3 Get "numeric characters" user's confirmation
  4.4 If user wants to include "numeric characters"
    4.4.1 Include "special characters" into "password characters"
  4.4 End If "numeric characters"

  4.5 Get "lower cased characters" user's confirmation
  4.6 If user wants to include "lower cased characters"
    4.6.1 Include "lower cased characters" into "password characters"
  4.6 End If "lower cased characters"

  4.7 Get "upper cased characters" user's confirmation
  4.8 If user wants to include "upper cased characters"
    4.8.1 Include "upper cased characters" into "password characters"
  4.8 End If "upper cased characters"

4. End While "password characters"

Refinement: 6. Generate "password generated"

6. While the length of "password generated" is not equal to "password length"

  6.1 Generate a random "index" between 0 and "password length" - 1

  6.2 Gets "character" in "password character types" at "index"

  6.3 Concatenate "character" into "password generatd"

6. End While "password generated"

Sequence Diagram

Password Generator Sequence Diagram

Built with

  • UML 2.5.1
  • HTML5 markup
  • CSS custom properties
  • Vanilla JavaScript

What I learned

Generate random strings

  • Use math concepts to generate random strings.
/**
 * Function for getting a random element from an array.
 * 
 * @param {Array} arr 
 *    The array of character types.
 * @returns {String}
 *    A randomly character type from arr.
 */
function getRandom(arr) {
  const randomIndex = Math.floor(Math.random() * arr.length);
  return arr[randomIndex];
}
  • Learnt PlantUML to generate activity and sequence diagrams in UML.

StartUML - Activity Diagram

@startuml
start

:Click on **Generate Password**>

partition "Input Interface" {

  repeat :Wait ""password length"" input ?

    :Save ""password length""|

  repeat while (Is ""password length"" 10 to 64 characters ?) is (No)
  ->Yes;

  :Set ""password characters"" empty;

  while (Check ""password characters"" ?) is (Empty)

    if (Include ""special characters"" ?) then (Yes)
      :Add ""special characters"" into ""password characters"";
    else (No)
    endif

    if (Include ""numeric characters"" ?) then (Yes)
      :Add ""numeric characters"" into ""password characters"";
    else (No)
    endif

    if (Include ""lower cased characters"" ?) then (Yes)
      :Add ""lower cased characters"" into ""password characters"";
    else (No)
    endif

    if (Include ""upper cased characters"" ?) then (Yes)
      :Add ""upper cased characters"" into ""password characters"";
    else (No)
    endif

    :Save ""password characters""|

  endwhile (Not Empty)

}

partition "Output Interface" {

  :Set ""password"" empty|

  while (Check length of ""password"" ?) is (Not **password length**)

    :Next random ""index"";

    :Get ""character"" from ""password characters"" at ""index"";

    :Concatenate ""character"" into ""password"";

    :Save ""password""|

  endwhile (Is **password length**)

}

:Output **password**<

stop
@enduml

StartUML - Sequence Diagram

@startuml
actor User
participant ":WebBrowser"
participant ":Application"

User->":WebBrowser": Click Generate Password
activate User
activate ":WebBrowser"

== Input Interface ==

":WebBrowser"-->"<< javascript >>\n:Event" **: << event >>
":Application"<-"<< javascript >>\n:Event": << bind >>
activate ":Application"
destroy "<< javascript >>\n:Event"

":Application"-->"<< javascript >>\n:PasswordOptions" **: << create >>

group getPasswordOptions()
  loop password length not between 10 and 64
    ":WebBrowser"<--":Application": Request password length 
    User<--":WebBrowser": << prompt window >>
    User->":WebBrowser": Input password length
    ":WebBrowser"->":Application": password length
  end

  ":Application"->"<< javascript >>\n:PasswordOptions": << store >> \n password length

  loop no character types chosen

    ":WebBrowser"<--":Application": Include special characters ?
    User<--":WebBrowser": << confirm window >>
    User->":WebBrowser": Press confirm option
    ":WebBrowser"->":Application": special characters flag

    alt special characters flag is True
      ":Application"->"<< javascript >>\n:PasswordOptions": << store >> \n special characters
    end

    ":WebBrowser"<--":Application": Include numeric characters ?
    User<--":WebBrowser": << confirm window >>
    User->":WebBrowser": Press confirm option
    ":WebBrowser"->":Application": numeric characters flag

    alt numeric characters flag is True
      ":Application"->"<< javascript >>\n:PasswordOptions": << store >> \n numeric characters
    end

    ":WebBrowser"<--":Application": Include lower cased characters ?
    User<--":WebBrowser": << confirm window >>
    User->":WebBrowser": Press confirm option
    ":WebBrowser"->":Application": lower cased characters flag

    alt lower cased characters flag is True
      ":Application"->"<< javascript >>\n:PasswordOptions": << store >> \n lower cased characters
    end

    ":WebBrowser"<--":Application": Include upper cased characters ?
    User<--":WebBrowser": << confirm window >>
    User->":WebBrowser": Press confirm option
    ":WebBrowser"->":Application": upper cased characters flag

    alt upper cased characters flag is True
      ":Application"->"<< javascript >>\n:PasswordOptions": << store >> \n upper cased characters
    end

  end
end

== Output Interface ==

":Application"-->"<< javascript >>\n:Password" **: << create >>

group generatePassword()

  ":Application"<--"<< javascript >>\n:PasswordOptions": passwordLength

  loop password.length < passwordLength times

    group getRandom()

      ":Application"->"<< javascript >>\n:Math" **: random()
      "<< javascript >>\n:PasswordOptions"->"<< javascript >>\n:Math": characterTypes.length
      ":Application"->"<< javascript >>\n:Math": floor()

      "<< javascript >>\n:PasswordOptions"<--"<< javascript >>\n:Math": index
      note right
        **Math.floor( Math.random() * (characterTypes.length) )**
        returns a **random index** 
        between 0 and (characterTypes.length - 1)
      end note
    end

    destroy "<< javascript >>\n:Math"

    "<< javascript >>\n:Password"<--"<< javascript >>\n:PasswordOptions": characterType
    note right
      **characterTypes[index]**
      returns a **characterType** 
      from characterTypes at the index position
    end note

    ":Application"->"<< javascript >>\n:Password": concat()
    ":Application"<--"<< javascript >>\n:Password": password.length

  end
end

group writePassword()

  ":WebBrowser"<-":Application": Request #password element
  ":WebBrowser"-->"<< javascript >>\n:DOM" **: << create >>

  "<< javascript >>\n:Password"->"<< javascript >>\n:DOM": password
  note right
    **passwordText.value = password**
    stores generated password into the DOM container
  end note

  ":Application"<--"<< javascript >>\n:DOM": passwordText element
end

":WebBrowser"<--":Application": Refresh #password element

User<--":WebBrowser": Display password generated

deactivate ":Application"
deactivate ":WebBrowser"
deactivate User
@enduml

Continued development

  • Implement UX improvements to integrate the password option in the UI, so the user can set the password length and character types on the web page.

  • Improve the test coverage of the code implementing unit and functional tests.

Useful resources

Author

Daniel Rodriguez

Acknowledgments

The teacher and TAs that help us with resources and support to my questions during the development of this challenge.

bootcamp-week5-challenge's People

Contributors

technoveltyco avatar

Stargazers

Roman avatar

Watchers

avatar

bootcamp-week5-challenge's Issues

JavaScript App

JavaScript App

User Story

As a Password Generator user,
I want to click on Generate Password button,
so I can choose the password options,
and see a randomly generated password matching my given settings.

Acceptance Criteria

  • It's done when the user can enter the password length.
  • It's done when the application validates the password length input between 10 and 64 characters.
  • It's done when the application confirms the character types for the password with the user.
  • It's done when the application validates that the user at least chose one character type.
  • It's done when the application outputs a randomly generated password matching the given validated user inputs.

Deployment

Deployment

User Story

As a boot camp teacher,
I want to see the week 5 challenge in a public URL,
so I can score the work done.

Acceptance Criteria

  • It's done when the final code is deployed to a public URL in GitHub Pages.
  • It's done when the repo and live site URLs are submitted to the teacher.

Base Code

Base code

User Story

As a boot camp student,
I want to set up the repo folder structure for the week 5 challenge,
so I can create the Generate Password app.

Acceptance Criteria

  • It's done when there is a docs folder with the starter/ folder and files and the README.md file from the week 5 challenge.
  • It's done when you copy the files index.html, style.css and script.js into the project's root folder.
  • It's done when there is a README.md file in the project's root folder and contains the markdown template provided for the week 5 challenge.

README

README

User Story

As a boot camp teacher,
I want to see detailed documentation of the boot camp week 5 challenge,
so I can score the work done.

Acceptance Criteria

  • It's done when all the sections from the README template contain documentation of the week 5 challenge.

Pseudocode

Pseudocode

User Story

As a boot camp teacher,
I want to see the design specifications of Password Generator,
so I can understand the functional, structural and behavioural components of the application.

Acceptance Criteria

  • It's done when there is a functional requirement analysis.
  • It's done when there is a pseudocode of the application.
  • It's done when there is a structural modelling of the application.
  • It's done when there is a behavioural modelling of the application.

Improvements

Improvements

User Story

As a user,
I want to be informed of my input validation errors,
so I can decide whether to re-enter the inputs or finish with the execution.

As a developer,
I want to document the code of the Password Generator App,
so I can have a reference to the APIs and understand the workflow in the code.

Acceptance Criteria

  • It's done when the program pops up a notification showing the info validation error.
  • It's done when the program confirms with the user to continue with the execution after an input error.
  • It's done when the code workflow is commented on, and the functions document their APIs with their description, input and outputs.

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.