Skip to content

Latest commit

 

History

History
265 lines (185 loc) · 13.3 KB

README.md

File metadata and controls

265 lines (185 loc) · 13.3 KB
Raw

Password Generator Web Application

CSS HTML JavaScript edX

Table of content

Project Description

This project focuses on creating a user-friendly web application that allows user to generate secure and random passwords based on their specified criteria. The application runs in the browser and dynamically updated HTML and CSS, powered by custom JavaScript code. The goal is to provide a polished and responsive user interface adaptable to various screen sizes.

Requirements

Web application will:

  1. Generate a password when the "Generate Password" button is clicked.
  2. Prompt users for password criteria, including:
    • Length of password (between 8 and 128 characters).
    • Character types: Lowercase, Uppercase, Numeric, and Special characters.
  3. Validate each input, ensuring at least one character type is selected.
  4. Display the generated password in the page.

Installation instructions

Option 1 - Download

Download the project from GitHub repository on your local machine.

  1. Open GitHub repository. (link to repository)

  2. Select Code from top navigation section. (reference on the image below) 👇

  3. Select <> Code dropdown button from sub section. (reference on the image below) 👇

  4. Select Download ZIP from dropdown menu to download project in .zip format. (reference on the image below) 👇

  5. Unzip the project.

    [!TIP] You can use 7-Zip if you don't have file archiver. 7-Zip is free software with open source. The most of the code is under the GNU LGPL license. Some parts of the code are under the BSD 3-clause License. Also there is unRAR license restriction for some parts of the code. Read 7-Zip License information. Download the application from official website.

  6. Open project with VS Code or other IDE.

Option 2 - Clone project

  1. On GitHub.com, navigate to the main page of the repository. (link to repository).

  2. Above the list of files, click Code. (reference on the image below) 👇

  3. Copy the URL for the repository.

  • To clone the repository using HTTPS, under "HTTPS", click

  • To clone the repository using an SSH key, including a certificate issued by your organization's SSH certificate authority, click SSH, then click

  • To clone a repository using GitHub CLI, click GitHub CLI, then click (reference on the image below) 👇

  1. Open Git Bash.

  2. Change the current working directory to the location where you want the cloned directory.

  3. Type git clone, and then paste the URL you copied earlier.

    git clone https://github.com/FilipPaskalev/Password-generator.git

  4. Press Enter to create your local clone.

    $ git clone https://github.com/FilipPaskalev/Password-generator.git
> Cloning into `Spoon-Knife`...
> remote: Counting objects: 10, done.
> remote: Compressing objects: 100% (8/8), done.
> remove: Total 10 (delta 1), reused 10 (delta 1)
> Unpacking objects: 100% (10/10), done.

Project structure

root/                   main directory of the project
  |----.vscode          contains settings for vscode 
  |----assets/          directory for the assets - video, images, sounds ...
  |----imgs/            contains all needed images files for project
  |----scripts/           directory for javascript files
      |----index.js     root script file
      |----logic.js     store all logic for generating password
      |----utils.js     store all needed resources for logic.js
  |----styles/          directory for the styles
      |----style.css    store css styles for index.html
  |----.prettierrc      settings if you using Prettier extension
  |----index.html       root html file
  |----LICENSE          information about the license
  |----README.md        file that describe the project

Demo

Screenshot of the application is on the image below.

demo screenshot

Important

You can find deployed version of the project on 👉direct link here or by clicking on the picture above. ☝️

Features

Checkbox

Change UI to give user ability to select password options with Input Type Checkbox element in html file for better interaction.

Note

Click on the image for more information. ☝️

Range slider

Change UI to give user ability to select password length from html with range slider element.

Length slider

Note

Click on the image for more information. ☝️

Copy password button

Add to UI button where user will be able to copy (to clipboard) generated password. button should be positioned next to button generate password.

Password score

Add an element that shows (after password is generated) password's score: very week, week, good, strong, very strong.

Information sections

Add information sections (What makes a password strong?):

  • What is a strong pass­word?
  • Why should my password be random?
  • Why should my password be unique?

Tools and extensions

Prettier

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

VSCode

Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS and Linux. It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages and runtime (such as C++, C#, Java, Python, PHP, Go, .NET).

VS Code Counter

VS Code extension counts blank lines, comment lines, and physical lines of source code in many programming languages. This extension uses other language extensions to determine the line of code. Therefore, you may need to install the language extension to support a new language. Conversely, as the number of language extensions increases, the range of support for this feature also increases.

Statistics

Total : 7 files, 388 codes, 45 comments, 112 blanks, all 545 lines

Directories

path files code comment blank total
. 7 388 45 112 545
. (Files) 3 183 0 71 254
scripts 3 85 45 23 153
styles 1 120 0 18 138

Files

filename language code comment blank total
.prettierrc JSON 5 0 1 6
README.md Markdown 147 0 67 214
index.html HTML 31 0 3 34
scripts/index.js JavaScript 7 3 4 14
scripts/logic.js JavaScript 43 34 17 94
scripts/utils.js JavaScript 35 8 2 45
styles/style.css CSS 120 0 18 138

Languages

language files code comment blank total
Markdown 1 147 0 67 214
CSS 1 120 0 18 138
JavaScript 3 85 45 23 153
HTML 1 31 0 3 34
JSON 1 5 0 1 6

References

15 Elements to Include in Your README Document

The Markdown elements outlined in the original design document.

How to concatenate strings in JavaScript?

How to check if value is undefined or null in JavaScript

Detecting an undefined object property

Complete list of GitHub markdown emojis

Advanced Markdown Guide

License

MIT

Copyright (c) 2024 Filip

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

© 2023 edX Boot Camps LLC. Confidential and Proprietary. All Rights Reserved.