{"id":20178707,"url":"https://github.com/chanda-abdul/frontend-mentor-angular-password-generator-app","last_synced_at":"2026-05-06T15:32:53.264Z","repository":{"id":108539541,"uuid":"534856215","full_name":"Chanda-Abdul/frontend-mentor-angular-password-generator-app","owner":"Chanda-Abdul","description":"This is a solution to the Password Generator app challenge on Frontend Mentor using Angular","archived":false,"fork":false,"pushed_at":"2022-09-25T01:12:41.000Z","size":1683,"stargazers_count":0,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-13T16:49:21.830Z","etag":null,"topics":["algorithms-and-data-structures","angular","frontend-mentor","scss"],"latest_commit_sha":null,"homepage":"https://stalwart-alpaca-aa2da3.netlify.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Chanda-Abdul.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-09-10T01:19:00.000Z","updated_at":"2022-09-24T22:15:35.000Z","dependencies_parsed_at":"2023-08-22T03:16:16.750Z","dependency_job_id":null,"html_url":"https://github.com/Chanda-Abdul/frontend-mentor-angular-password-generator-app","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chanda-Abdul%2Ffrontend-mentor-angular-password-generator-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chanda-Abdul%2Ffrontend-mentor-angular-password-generator-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chanda-Abdul%2Ffrontend-mentor-angular-password-generator-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chanda-Abdul%2Ffrontend-mentor-angular-password-generator-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Chanda-Abdul","download_url":"https://codeload.github.com/Chanda-Abdul/frontend-mentor-angular-password-generator-app/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241616683,"owners_count":19991542,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["algorithms-and-data-structures","angular","frontend-mentor","scss"],"created_at":"2024-11-14T02:23:03.816Z","updated_at":"2026-05-06T15:32:48.230Z","avatar_url":"https://github.com/Chanda-Abdul.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Frontend Mentor - Password generator app solution\n\n![Design preview for the Password generator app coding challenge](./src/assets/preview.jpg)\n\nThis is a solution to the [Password generator app challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/password-generator-app-Mr8CLycqjh). Frontend Mentor challenges help you improve your coding skills by building realistic projects. \n\n## Table of contents\n\n- [Overview](#overview)\n  - [The challenge](#the-challenge)\n  - [Screenshot](#screenshot)\n  - [Links](#links)\n- [My process](#my-process)\n  - [Built with](#built-with)\n  - [What I learned](#what-i-learned)\n  - [Continued development](#continued-development)\n  - [Useful resources](#useful-resources)\n- [Author](#author)\n- [Acknowledgments](#acknowledgments)\n\n# Overview\n\n## The challenge\n\nUsers should be able to:\n\n- [X] Generate a password based on the selected inclusion options\n- [X] Copy the generated password to the computer's clipboard\n- [X] See a strength rating for their generated password\n- [X] View the optimal layout for the interface depending on their device's screen size\n  - [X] Mobile @ 375px\n  - [X] Tablet @  768 px\n  - [X] Desktop @ 1440px\n- [X] See hover and focus states for all interactive elements on the page\n\n##  Screenshots\n\n### Mobile View @ `375px`\n\n#### `ngOnit` Initial Screen\n\n\u003cimg src=\"src/assets/screens/onInit.png\" width=\"375\" /\u003e\n  \n#### View with valid selections\n\u003cimg src=\"src/assets/screens/inactive.png\" width=\"375\" /\u003e\n\n#### Invalid Selection and Error Messages\n\n\u003cimg src=\"src/assets/screens/error.png\" width=\"375\" /\u003e\n\n#### \"Generate\" Button and \"Copy\" icon Hover States\n\u003cimg src=\"src/assets/screens/active.png\" width=\"375\" /\u003e\n\n#### After copying to clipboard  \n\u003cimg src=\"src/assets/screens/clip.png\" width=\"375\" /\u003e\n \n### Tablet View @ `768px` \u0026\u0026 Desktop View @ `1440px`\n\u003cimg src=\"src/assets/screens/desktop.png\" width=\"768\" /\u003e\n\n##  Links\n\n- Solution URL: [Click for Solution](https://github.com/Chanda-Abdul/frontend-mentor-angular-password-generator-app)\n- Live Site URL: [Click for Live Site](https://stalwart-alpaca-aa2da3.netlify.app/)\n\n## My process\nThis password generator was a fun and challenging to work on. great opportunity to use some new angular topics and implement some of algorithm knowledge.\n### Project Structure\nI also started this project with most of my finctionality in one component.  But as the codebase grew I decided it would be best to separate each interactive element into thier own component and service.  I ended up with\n- \u003cb\u003eApp Component\u003c/b\u003e\n  - [`\u003capp-password-display\u003e`]()\n    - \u003cb\u003eComponent: \u003c/b\u003e[`password-display.component.ts`](/src/app/components/password-display/password-display.component.ts)\n    - \u003cb\u003eService: \u003c/b\u003e[`passwordGeneration.service.ts`](/src/app/components/password-display/passwordGeneration.service.ts)\n    - handles the functionality for displaying the inital password, the generated password, and the clipboard(copy password) status.\n\n  - [`\u003capp-slider\u003e`](/src/app/components/slider/)\n      - \u003cb\u003eComponent: \u003c/b\u003e[`slider.component.ts`](/src/app/components/slider/slider.component.ts)\n    - \u003cb\u003eService: \u003c/b\u003e[`character-count.service.ts`](/src/app/components/slider/character-count.service.ts)\n    - slider to keep track of the character count from \u003cb\u003e1\u003c/b\u003e to \u003cb\u003e20\u003c/b\u003e characters long.\n \n  - [`\u003capp-checkbox-options\u003e`](/src/app/components/checkbox-options/)\n      - \u003cb\u003eComponent: \u003c/b\u003e [`checkbox-options.component.ts`](/src/app/components/checkbox-options/checkbox-options.component.ts)\n    - handles the `\u003cinput type=\"checkbox\"/\u003e` for the \u003cb\u003elowercase\u003c/b\u003e, \u003cb\u003euppercase\u003c/b\u003e, \u003cb\u003enumber\u003c/b\u003e and \u003cb\u003esymbol\u003c/b\u003e password options\n  - [`\u003capp-strength-bar\u003e`](/src/app/components/strength-bar/)\n      - \u003cb\u003eComponent: \u003c/b\u003e [`strength-bar.component.ts`](/src/app/components/strength-bar/strength-bar.component.ts)\n    - \u003cb\u003eService: \u003c/b\u003e[`strengthUpdate.service.ts`](/src/app/components/strength-bar/strengthUpdate.service.ts)\n    - handles the functionality that determines the strength of the password based on the \u003cb\u003elowercase\u003c/b\u003e, \u003cb\u003euppercase\u003c/b\u003e, \u003cb\u003enumber\u003c/b\u003e and \u003cb\u003esymbol\u003c/b\u003e password input options\n\n### Password Algorithms\nI realized that I would need to create two separate algorithms,   one algorithm to generate a password and another algorithm to determine the passwords' strength.\n#### Password Generator Algorithm\n\n  When I initially started to think of ways to generate a password I considered something like \n  `.charCodeAt()`\n  but I thought that might be too complicated and inffecient\n\n  So I decided it would be best to create an array for each of the password options\n  ```js\n  upperChars: string[] =\n    ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M',\n      'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];\n\n  lowerChars: string[] =\n    ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm',\n      'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];\n\n  symbolChars: string[] =\n    ['!', '@', '#', '$', '%', '^', '\u0026', '*', '(', ')', '-', '+'];\n\n  numChars: string[] =\n    ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];\n ``` \n and based on the user input options an \u003cb\u003eArray\u003c/b\u003e of `availableChars` would be created to generate the password\n ```js\n availableChars: string[] = [];\n\n availableChars = [...upperChars, ...lowerChars, ...symbolChars, ...numChars];\n ```\n \u003cb\u003eSpace Complexity:\u003c/b\u003e \n - `upperChars` = \u003cb\u003eO(26)\u003c/b\u003e\n - `lowerChars` = \u003cb\u003eO(26)\u003c/b\u003e\n - `symbolChars` = \u003cb\u003eO(12)\u003c/b\u003e\n - `numChars`= \u003cb\u003eO(10)\u003c/b\u003e\n - ❓ `availableChars`= \u003cb\u003eO(1)\u003c/b\u003e\n - ❓`currentCharCount`= \u003cb\u003eO(1)\u003c/b\u003e\n - ❓`password`= \u003cb\u003eO(1)\u003c/b\u003e\n\n - \u003cb\u003eTotal Space = O(77) or O(N)\u003c/b\u003e\n\n\u003cb\u003eTime Complexity:\u003c/b\u003e\n- choose a random available character in  `availableChars[]` for each length of the character length `currentCharCount`\n```js\n  setPassword(upper: boolean, lower: boolean, number: boolean, symbol: boolean) {\n    const currentCharCount = this.characterCountService.getCurrentCharacterCount()\n    ...\n    this.getAvailableChars(upper, lower, number, symbol)\n\n    const createPassword = []\n\n    for (let i = 1; i \u003c= currentCharCount; i++) {\n      \n      createPassword\n        .push(this.availableChars[Math.floor(Math.random() * this.availableChars.length)]);\n    }\n    ...\n    \n  }\n```\n - \u003cb\u003eTotal Time = O(N)\u003c/b\u003e because of the `for` loop \n### Password Strength Algorithm\n\n\n## Built with\n\n- \u003cb\u003e[Angular](https://angular.io/)\u003c/b\u003e (\u003cb\u003eJavaScript\u003c/b\u003e framework)\n  - [Angular Material](https://material.angular.io/)\n  - [TypeScript](https://www.typescriptlang.org/)\n  - [JavaScript](https://www.javascript.com/)\n- \u003cb\u003e[Sass](https://sass-lang.com/)/CSS\u003c/b\u003e custom properties\n  - \u003cb\u003eMobile-first\u003c/b\u003e workflow\n- Semantic \u003cb\u003eHTML5\u003c/b\u003e markup\n- \u003cb\u003eFigma\u003c/b\u003e\n\n## What I learned\n- Semantic Input\n- I used [Angular Material - Clipboard](https://material.angular.io/cdk/clipboard/overview) to copy the generated password the users clipboard. `setTimeout()` is to reset the styling 5 seconds after copying the password.\n\n  ```js\n  import { Clipboard } from '@angular/cdk/clipboard';\n\n  ...\n\n  passwordCopied = false;\n\n  ...\n\n  copyPasswordToClipboard(){\n      this.clipboard.copy(this.password);\n\n      this.passwordCopied = true;\n      \n      setTimeout(() =\u003e {\n        this.passwordCopied = false\n      }, 5000);\n    }\n  ```\n- @Input\n- @Output\n- Services\n- Event binding\n- algorithms\n\n```html\n\u003ch1\u003eSome HTML code I'm proud of\u003c/h1\u003e\n```\n```css\n.proud-of-this-css {\n  color: papayawhip;\n}\n```\n```js\nconst proudOfThisFunc = () =\u003e {\n  console.log('🎉')\n}\n```\n\n##  Continued development\n\n- [ ] disable \"generate\" button if no inputs are selected\n- [ ] finish slider styling\n- [ ] update strength level based on character length\n\n\n## Useful resources\n\n- [angular-range-slider-example-draggable-ngx-slider-tutorial](https://www.freakyjolly.com/angular-range-slider-example-draggable-ngx-slider-tutorial/) - This helped me for XYZ reason. I really liked this pattern and will use it going forward.\n- [ CSS Checkbox Generator](https://doodlenerd.com/html-control/css-checkbox-generator) - This is an amazing article which helped me finally understand XYZ. I'd recommend it to anyone still learning this concept.\n- [Introduction to services and dependency injection](https://angular.io/guide/architecture-services) - This helped me for XYZ reason. I really liked this pattern and will use it going forward.\n- [List of Unicode characters](https://en.wikipedia.org/wiki/List_of_Unicode_characters) - This is an amazing article which helped me finally understand XYZ. I'd recommend it to anyone still learning this concept.\n- [Angular Material - Clipboard](https://material.angular.io/cdk/clipboard/overview) - This helped me for XYZ reason. I really liked this pattern and will use it going forward.\n- [Example resource 2](https://www.example.com) - This is an amazing article which helped me finally understand XYZ. I'd recommend it to anyone still learning this concept.\n- [angular-range-slider-example-draggable-ngx-slider-tutorial](https://www.freakyjolly.com/angular-range-slider-example-draggable-ngx-slider-tutorial/) - This helped me for XYZ reason. I really liked this pattern and will use it going forward.\n- [10 Best CSS button hover effects](https://alvarotrigo.com/blog/best-css-button-hover-effects/) - This is an amazing article which helped me finally understand XYZ. I'd recommend it to anyone still learning this concept.\n\n\n## Author\n\n- Frontend Mentor - [@Chanda-Abdul](https://www.frontendmentor.io/profile/Chanda-Abdul)\n- Website - [Chanda Codes](https://chandacodes.com/)\n- GitHub - [github.com/Chanda-Abdul](https://github.com/Chanda-Abdul)\n\n\n## Acknowledgments\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchanda-abdul%2Ffrontend-mentor-angular-password-generator-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchanda-abdul%2Ffrontend-mentor-angular-password-generator-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchanda-abdul%2Ffrontend-mentor-angular-password-generator-app/lists"}