PASSWORD MAKER

Contributors: Trevor Rapp

All work is completely my own. This project completed as a solo project in the Scrimba Front End Developer Career Path, meaning specifications for what the project should be able to do were given, but no help or instruction was provided.

---

Untitled_.Feb.11.2023.9_34.PM.mp4

---

---

DESCRIPTION:

Treat your password like your toothbrush. Don't let anybody else use it, and get a new one every six months. -- Clifford Stoll

A password generator that can generate multiple, randomized alpha-numeric/special character passwords. Also includes a one-click copy/paste option.

---

QUICKSTART GUIDE

To use the app simply click on the View Project button or visit https://trrapp12.github.io/password-maker/.

---

PROJECT V1.0 DEMONSTRATES THE FOLLOWING:

• User Story 1: User should be able to get a password with alphanumeric characters and special characters.
• User Story 2: User should be able to click a button to create the password.
• User Story 3: User should be able to generate multiple passwords.
• User Story 4: User should be able to see passwords displayed.
• User Story 5: User should be able to pick the length of the password.
• User Story 6: User should be able to have a 1-click copy/paste option for password.

---

CHALLENGES I OVERCAME

As far as technical issues most were pretty straightforward. Some interesting challenges I found were.

1. While refactoring my code it was pointed out that instead of creating an array of individual characters I could just use the .split() method on one long array and save a bunch of typing. That was cool.

2. I wanted to create a feature that allowed for one click copying to the clipboard. I had never accessed the clipboard before, so I had to research the navigator.clipboard API. I came up with the following:

  function findTarget (evt) {
    if (evt.target.className === 'option') {
      
      targetId = evt.target.id;
      targetElement = document.getElementById(targetId);
      if (evt.target.innerHTML) {
        navigator.clipboard.writeText(evt.target.value)
        alert("Password successfully copied!")
      } else {
        alert('no password to copy')
      }
    }
  }

3. This was also where I started really getting used to the idea of functional programming and giving only one functionality to one function.

---

MY OWN PERSONAL CONTRIBUTIONS INCLUDED

• all work is completely my own. The only directions were user stories the assignment needed to complete.

---

SCRIMBA FRONT END DEVELOPER CAREER CERTIFICATE:

This project was completed as part of the Scrimba The Frontend Career Path, which is composed of:

• over 1000 lessons
• over 65 hours of instruction
• over 30 instructor-lead, hands-on projects
• over 15 Solo Projects (completed completely alone, with only Figma files and user stories provided.)

CERTIFICATE OF COMPLETION - The Frontend Developer Career Path.pdf

---

ATTRIBUTIONS

Project created by TREVOR RAPP

• Original project idea was part of the Scrimba's Front End Development Course.

---

YOU CAN FIND ME AT

*For more information see my LinkedIn or return to my Github