Upload Project

README.md

@@ -1,2 +1,90 @@
-# js-password-generator
-it enables you to generate your own passwords with different degrees of power and security and adjust them to the length, characters, etc. You can include it in your website very easily, where no outside libraries have been used. Only Java Script.
+# JS-Password-Generator  :lock_with_ink_pen:
+
+![image](assets/screenshot.jpg)
+
+It enables you to generate your own passwords with different degrees of power and security and adjust them to the length, characters, etc. You can include it in your website very easily, where no outside libraries have been used. Only Java Script.
+
+This writing method is not the only one and you can generate the same results in different ways in the same language.
+I hope it's useful to you in your work, and I'm going to constantly improve its coordination and add new features to it.
+
+- Explain Code  </br>
+Here we use some function to generate a strings from Uppercase and lowercase letters, numbers and symbols
+```java-script
+function getRandomLower() {
+    return String.fromCharCode(Math.floor(Math.random() * 26) + 97);
+}
+
+function getRandomUpper() {
+    return String.fromCharCode(Math.floor(Math.random() * 26) + 65);
+}
+
+function getRandomNumber() {
+    return String.fromCharCode(Math.floor(Math.random() * 10) + 48);
+}
+
+function getRandomSymbol() {
+    const symbols = "!@#$%^&*(){}[]=/<>,."
+    return symbols[Math.floor(Math.random() * symbols.length)];
+}
+
+const randomFunc = {
+    lower: getRandomLower,
+    upper: getRandomUpper,
+    number: getRandomNumber,
+    symbol: getRandomSymbol,
+};
+```
+This is the code that executes the command when the button is pressed in order to collect and generate those values
+```java-script
+const generate = document.getElementById("generateBtn");
+generate.addEventListener("click", () => {
+    const length = document.getElementById("PasswordLength").value;
+    const hasUpper = document.getElementById("uppercase").checked;
+    const hasLower = document.getElementById("lowercase").checked;
+    const hasNumber = document.getElementById("numbers").checked;
+    const hasSymbol = document.getElementById("symbols").checked;
+    const result = document.getElementById("PasswordResult");
+    result.innerText = generatePassword(
+        hasLower,
+        hasUpper,
+        hasNumber,
+        hasSymbol,
+        length
+    );
+});
+
+function generatePassword(lower, upper, number, symbol, length){
+    let generatedPassword = "";
+    const typesCount = lower + upper + number + symbol;
+    const typesArr = [{lower}, {upper}, {number}, {symbol}].filter(
+        (item) => Object.values(item)[0]
+    );
+    for (let i = 0; i < length; i += typesCount){
+        typesArr.forEach((type) => {
+            const funcName = Object.keys(type)[0];
+            generatedPassword += randomFunc[funcName]();
+        });
+    }
+    const finalPassword = generatedPassword.slice(0, length);
+    return finalPassword;
+}
+```
+And the last ting is the code for the "copy to clipboard" button in order to copy the generated password.
+
+```java-script
+let button = document.getElementById("clipboardBtn");
+button.addEventListener("click", (e) => {
+    e.preventDefault();
+    document.execCommand(
+        "copy",
+        false,
+        document.getElementById("PasswordResult").select()
+    );
+});
+```
+Note: This is optional, you can not add it, it's up to how useful this code can be in your projects.
+
+Credits
+-------
+- [Linkedin Account](https://www.somar-kesen.com/)  </br>
+- [My website](https://www.somar-kesen.com/)

assets/js.js

@@ -0,0 +1,66 @@
+function getRandomLower() {
+    return String.fromCharCode(Math.floor(Math.random() * 26) + 97);
+}
+
+function getRandomUpper() {
+    return String.fromCharCode(Math.floor(Math.random() * 26) + 65);
+}
+
+function getRandomNumber() {
+    return String.fromCharCode(Math.floor(Math.random() * 10) + 48);
+}
+
+function getRandomSymbol() {
+    const symbols = "!@#$%^&*(){}[]=/<>,."
+    return symbols[Math.floor(Math.random() * symbols.length)];
+}
+
+const randomFunc = {
+    lower: getRandomLower,
+    upper: getRandomUpper,
+    number: getRandomNumber,
+    symbol: getRandomSymbol,
+};
+
+const generate = document.getElementById("generateBtn");
+generate.addEventListener("click", () => {
+    const length = document.getElementById("PasswordLength").value;
+    const hasUpper = document.getElementById("uppercase").checked;
+    const hasLower = document.getElementById("lowercase").checked;
+    const hasNumber = document.getElementById("numbers").checked;
+    const hasSymbol = document.getElementById("symbols").checked;
+    const result = document.getElementById("PasswordResult");
+    result.innerText = generatePassword(
+        hasLower,
+        hasUpper,
+        hasNumber,
+        hasSymbol,
+        length
+    );
+});
+
+function generatePassword(lower, upper, number, symbol, length){
+    let generatedPassword = "";
+    const typesCount = lower + upper + number + symbol;
+    const typesArr = [{lower}, {upper}, {number}, {symbol}].filter(
+        (item) => Object.values(item)[0]
+    );
+    for (let i = 0; i < length; i += typesCount){
+        typesArr.forEach((type) => {
+            const funcName = Object.keys(type)[0];
+            generatedPassword += randomFunc[funcName]();
+        });
+    }
+    const finalPassword = generatedPassword.slice(0, length);
+    return finalPassword;
+}
+
+let button = document.getElementById("clipboardBtn");
+button.addEventListener("click", (e) => {
+    e.preventDefault();
+    document.execCommand(
+        "copy",
+        false,
+        document.getElementById("PasswordResult").select()
+    );
+});

assets/style.css

@@ -0,0 +1,49 @@
+.result-container{
+background-color: var(--bg-color);
+border: 12px solid var(--bg-color);
+filter: var(--filter2);
+display: flex;
+justify-content: flex-start;
+align-items: center;
+position: relative;
+font-size: 18px;
+letter-spacing: 1px;
+height: 60px;
+width: 100%;
+margin-bottom: 35px;
+}
+
+.result-container .btn{
+    font-size: 20px;
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    height: 40px;
+    width: 40px;
+}
+
+textarea{
+    background: none;
+    border: solid 3px;
+    height : 42px;
+    color: var(--color);
+    font-size: 20px;
+    margin-top: auto;
+    outline: none;
+}
+
+.buttons{
+    display: flex;
+}
+
+.btn{
+    width: 50%;
+    border: solid;
+    color: var(--color);
+    cursor: pointer;
+    font-size: 16px;
+    padding: 8px 12px;
+    margin: 14px 5px 7px 5px;
+    background-color: var(--bg-color);
+    filter: var(--filter2);
+}

index.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
+    <link rel="stylesheet" href="assets/style.css">
+    <title>JS Password Generator</title>
+</head>
+<body>
+    <div class="result-container">
+        <textarea name="" id="PasswordResult" cols="30" rows="10" placeholder="Your Password will show Here"></textarea>
+    </div>
+    <div class="setting">
+        <div class="setting">
+            <label>Password Length</label>
+            <input type="number" id="PasswordLength" min="4" max="20" value="8">
+        </div>
+        <div class="setting">
+            <label>Include Uppercase Letters</label>
+            <input type="checkbox" id="uppercase" checked>
+        </div>
+        <div class="setting">
+            <label>Include Lowercase Letters</label>
+            <input type="checkbox" id="lowercase" checked>
+        </div>
+        <div class="setting">
+            <label>Include Numbers</label>
+            <input type="checkbox" id="numbers" checked>
+        </div>
+        <div class="setting">
+            <label>Include Symbols</label>
+            <input type="checkbox" id="symbols" checked>
+        </div>
+    </div>
+    <div class="buttouns">
+        <button class="btn btn-large" id="generateBtn">
+            <i class="fas fa-key"></i> Generate
+        </button>
+        <button class="btn" id="clipboardBtn">
+            <i class="far fa-clipboard"></i> Copy
+        </button>
+    </div>
+    <script src="assets/js.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
+</body>
+</html>