thinkswell · PBJI · Oct 8, 2023 · Oct 6, 2023 · Oct 8, 2023 · Oct 8, 2023
diff --git a/PasswordGenerator/README.md b/PasswordGenerator/README.md
@@ -0,0 +1,33 @@
+# Password Generator
+
+[![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)](https://forthebadge.com)
+[![forthebadge](https://forthebadge.com/images/badges/made-with-javascript.svg)](https://forthebadge.com)
+
+
+
+Hello Community,
+The password generator generates passwords of different lengths and can include or
+ exclude special characters based on user selection. 
+  wuth the help of HTML layout, CSS styling, and JavaScript functions.
+
+## Requirements
+
+No external package is required.
+
+## Usage
+
+Using a password generator ensures that your passwords are strong and unique, making it difficult for hackers to guess or crack them. 
+
+
+## Screenshort
+
+![image](https://github.com/xlo-u/javascript-mini-projects/assets/67045160/e137a72a-27eb-469b-98f7-1a7ed259bdb3)
+
+
+## Contributing
+
+Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
+
+Please make sure to update tests as appropriate.
+
+
diff --git a/PasswordGenerator/app.js b/PasswordGenerator/app.js
@@ -0,0 +1,63 @@
+//DOM Elements
+const passwordElem = document.querySelector('.password');
+const btnElem = document.getElementById('btn-generate');
+const passwordLengthElem = document.getElementById('password-length-number');
+const lowercaseElem = document.getElementById('lowercase');
+const uppercaseElem = document.getElementById('uppercase');
+const numbersElem = document.getElementById('numbers');
+const symbolsElem = document.getElementById('symbols');
+
+//when user clicks on btn, generate a new password
+btnElem.addEventListener('click', updateUI);
+
+//display generated password on UI
+function updateUI(){
+    const passwordLength = passwordLengthElem.value;
+    const includeLowercase = lowercaseElem.checked;
+    const includeUppercase = uppercaseElem.checked;
+    const includeNumbers = numbersElem.checked;
+    const includeSymbols = symbolsElem.checked;
+    const password = generatePassword(passwordLength, includeLowercase, includeUppercase, includeNumbers, includeSymbols);
+    passwordElem.innerText = password;
+}
+
+function generatePassword(len, isLC, isUC, isNum, isSym){
+    let charCodes = [];
+    if(isLC)
+        charCodes = LOWERCASE_CHAR_CODES;
+    if(isUC)
+        charCodes = charCodes.concat(UPPERCASE_CHAR_CODES);
+    if(isNum)
+        charCodes = charCodes.concat(NUMBER_CHAR_CODES);
+    if(isSym)
+        charCodes = charCodes.concat(SYMBOL_CHAR_CODES);
+
+    const finalPassword = [];
+    for(let i = 0; i < len; i++){
+        const randomCode = charCodes[Math.floor(Math.random() * charCodes.length)];
+        finalPassword.push(String.fromCharCode(randomCode));
+    }
+
+    //if all of the checkbox are unchecked
+    if(charCodes.length === 0) 
+        return `Select at least one option`;
+
+    return finalPassword.join(''); //return string of array finalPassword    
+}
+
+function arrayLowToHigh(low, high){
+    let array = [];
+    for(let i = low; i <= high; i++){
+        array.push(i);
+    }
+    return array;
+}
+
+//Arrays storing all our characters
+const LOWERCASE_CHAR_CODES = arrayLowToHigh(97, 122);
+const UPPERCASE_CHAR_CODES = arrayLowToHigh(65, 90);
+const NUMBER_CHAR_CODES = arrayLowToHigh(48, 57);
+const SYMBOL_CHAR_CODES = arrayLowToHigh(33, 47)
+                          .concat(arrayLowToHigh(58, 64))
+                          .concat(arrayLowToHigh(91, 96))
+                          .concat(arrayLowToHigh(123, 126));  
diff --git a/PasswordGenerator/index.html b/PasswordGenerator/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Password Generator</title>
+    <link rel="stylesheet" href="./style.css" type="text/css">
+</head>
+<body>
+    <div class="container">
+        <h1 class="title">Password Generator</h1>
+        <p class="password">Your Password</p>
+        <button class="btn" id="btn-generate">GENERATE!</button>
+        <p class="desc-title">Preferences</p>
+        <form class="form">
+            <label for="password-length-number">Length</label>
+            <input type="number" name="pln" id="password-length-number" class="number-input" min="1" max="50" value="8">
+
+            <label for="lowercase">Lower Case Alphabets</label>
+            <input type="checkbox" name="lc" id="lowercase" checked>
+
+            <label for="lowercase">Upper Case Alphabets</label>
+            <input type="checkbox" name="uc" id="uppercase">
+
+            <label for="lowercase">Numbers</label>
+            <input type="checkbox" name="num" id="numbers">
+
+            <label for="lowercase">Symbols</label>
+            <input type="checkbox" name="sym" id="symbols">
+        </form>
+    </div>
+    <script src="./app.js" type="text/javascript"></script>
+</body>
+</html>
diff --git a/PasswordGenerator/resource.md b/PasswordGenerator/resource.md
@@ -0,0 +1,3 @@
+## CheatSheet Reference
+
+[ASCII](https://www.petefreitag.com/cheatsheets/ascii-codes/)
diff --git a/PasswordGenerator/style.css b/PasswordGenerator/style.css
@@ -0,0 +1,84 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+html,
+body {
+    font-size: 10px;
+    font-family: 'lato', Arial, Helvetica, sans-serif;
+}
+body {
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: linear-gradient(115deg, #85ee56 50%, #144dd5 50%);
+}
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    background: #eee;
+    border-radius: 0.5rem;
+    padding: 2rem;
+    min-height: 35rem;
+}
+.title {
+    width: 71%;
+    text-align: center;
+}
+.desc-title {
+    font-size: 1.6rem;
+    text-align: left;
+    width: 71%;
+    border-bottom: 1px solid #144dd5;
+}
+.form {
+    display: grid;
+    grid-template-columns: auto auto;
+    row-gap: 1rem;
+    column-gap: 3rem;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.3rem;
+}
+label{
+    font-weight: bold;
+}
+.number-input {
+    width: 4rem;
+}
+.password {
+    background: black;
+    color: white;
+    padding: 1rem;
+    font-size: 1.5rem;
+    height: 6rem;
+    width: 28rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    word-break: break-all;
+    border-radius: 0.5rem;
+}
+.btn {
+    cursor: pointer;
+    border: none;
+    background: #144dd5;
+    border-radius: 0.5rem;
+    padding: 1rem;
+    width: 100%;
+    color: #fff;
+    font-weight: bold;
+    letter-spacing: 0.3rem;
+    transition: opacity ease-in-out 0.2s;
+}
+.btn:hover {
+    opacity: 0.9;
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		## CheatSheet Reference

		[ASCII](https://www.petefreitag.com/cheatsheets/ascii-codes/)