Add files via upload

Oto-Gelashvili · May 25, 2024 · 2f62890 · 2f62890
commit 2f62890
Show file tree

Hide file tree

Showing 37 changed files with 5,665 additions and 0 deletions.
diff --git a/bundle.js b/bundle.js
diff --git a/img/active.webp b/img/active.webp
diff --git a/img/lock-solid.svg b/img/lock-solid.svg
diff --git a/img/mobile.webp b/img/mobile.webp
diff --git a/img/nvjjyhvhqfwnjseojdgg.webp b/img/nvjjyhvhqfwnjseojdgg.webp
diff --git a/img/tabelt.webp b/img/tabelt.webp
diff --git a/index.html b/index.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Password Generator">
+    <link rel="shortcut icon" href="img/lock-solid.svg" type="image/x-icon">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Signika+Negative:[email protected]&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://kit.fontawesome.com/a90981c20e.js" crossorigin="anonymous"></script>
+    <title>Password Generator</title>
+</head>
+
+<body>
+    <h1>Password <span>Generator</span></h1>
+    <div class="container">
+        <section class="result">
+            <h2 class="password">Random Password</h2>
+            <i class="fa-regular fa-copy"></i>
+        </section>
+        <section class="generator">
+            <form class="slider">
+                <div class="info">
+                    <p>Character Length</p>
+                    <label for="slider" class="slider-value">16</label>
+                </div>
+                <input type="range" min="8" max="24" value="16" id="slider">
+            </form>
+            <form class="requirements">
+                <label>
+                    <input type="checkbox" id="0" checked>
+                    <p>Include Uppercase Letters</p>
+                </label>
+                <label>
+                    <input type="checkbox" id="1" checked>
+                    <p>Include Lowercase Letters</p>
+                </label>
+                <label>
+                    <input type="checkbox" id="2">
+                    <p>Include Numbers</p>
+                </label>
+                <label>
+                    <input type="checkbox" id="3">
+                    <p>Include Symbols</p>
+                </label>
+            </form>
+            <div class="strength-cheker">
+                <p>Strength</p>
+                <div class="cheker">
+                    <p>MEDIUM</p>
+                    <div class="rectangles">
+                        <div class="rectangle easy"></div>
+                        <div class="rectangle medium"></div>
+                        <div class="rectangle hard"></div>
+                        <div class="rectangle very-hard"></div>
+                    </div>
+                </div>
+            </div>
+            <button>
+                <p>GENERATE</p>
+                <i class="fa-solid fa-arrow-right"></i>
+            </button>
+        </section>
+    </div>
+    <script src="index.js"></script>
+    <script src="bundle.js"></script>
+
+</body>
+
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,122 @@
+var zxcvbn = require('zxcvbn');// SLIDER
+
+const slider = document.getElementById("slider");
+const labelValue = document.querySelector(".slider-value");
+let max = parseInt(slider.getAttribute("max")); 
+let min = parseInt(slider.getAttribute("min")); 
+let sliderStepAmount = max - min;  
+let stepPercent = 100/sliderStepAmount;
+
+slider.addEventListener("input",function (){
+    labelValue.innerHTML = slider.value;
+    let progress = (slider.value - min) * stepPercent;
+    document.documentElement.style.setProperty('--progress', progress + "%");
+});
+
+
+// Check checkboxes
+const checkboxUpper = document.getElementById("0");
+const checkboxLower = document.getElementById("1");
+const checkboxNums = document.getElementById("2");
+const checkboxSymb = document.getElementById("3");
+const passwordField = document.querySelector(".password");
+const upperCaseLetters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+const lowerCaseLetters = "abcdefghijklmnopqrstuvwxyz";
+const numbers = "0123456789";
+const symbols = "!@#$%^&*()_+[]{}|;:,.<>?";
+let allTypes = [upperCaseLetters,lowerCaseLetters,numbers,symbols];
+
+
+function checkCheckbox() {
+    let selectedChars = "";
+    function returnSelectedChars(){
+    if(!checkboxUpper.checked && !checkboxLower.checked && !checkboxNums.checked && !checkboxSymb.checked){
+        checkboxUpper.checked = true;
+        checkboxLower.checked = true;
+        checkboxNums.checked = true;
+    }
+    if (checkboxUpper.checked) {
+        selectedChars+=allTypes[0];
+    }
+    if (checkboxLower.checked) {
+        selectedChars+=allTypes[1];
+    } 
+    if (checkboxNums.checked) {
+        selectedChars+=allTypes[2];
+    } 
+    if (checkboxSymb.checked) {
+        selectedChars+=allTypes[3];
+    } 
+    return selectedChars;
+    }
+    return returnSelectedChars;
+}
+// GENERATE PASSWORD
+function generatePassword(){
+    const getSelectedChars = checkCheckbox();
+    let selectedChars = getSelectedChars();
+    const amountOfChars = slider.value;
+    let password = "";
+
+    for (let i = 0; i < amountOfChars; i++) {
+        const randomIndex = Math.floor(Math.random() * selectedChars.length);
+        password += selectedChars[randomIndex];
+        selectedChars = selectedChars.slice(0, randomIndex) + selectedChars.slice(randomIndex + 1);
+    }
+
+    passwordField.textContent = password;
+    //password cheker
+    const result = zxcvbn(password);
+    document.querySelector(".easy").style.backgroundColor = "unset"
+    document.querySelector(".medium").style.backgroundColor = "unset"
+    document.querySelector(".hard").style.backgroundColor = "unset"
+    document.querySelector(".very-hard").style.backgroundColor = "unset"
+    let strengthText = document.querySelector(".cheker p");
+    strengthText.textContent = "Medium";
+    if(result.score <2){
+        document.querySelector(".easy").style.backgroundColor = "#EDCA71"
+        strengthText.textContent = "Easy";
+      }else if(result.score === 2){
+        document.querySelector(".easy").style.backgroundColor = "#EDCA71"
+        document.querySelector(".medium").style.backgroundColor = "#EDCA71"
+        strengthText.textContent = "Medium";
+      }
+      else if(result.score === 3){
+        document.querySelector(".easy").style.backgroundColor = "#EDCA71"
+        document.querySelector(".medium").style.backgroundColor = "#EDCA71"
+        document.querySelector(".hard").style.backgroundColor = "#EDCA71"
+        strengthText.textContent = "Hard";
+      }else{
+        document.querySelector(".easy").style.backgroundColor = "#EDCA71"
+        document.querySelector(".medium").style.backgroundColor = "#EDCA71"
+        document.querySelector(".hard").style.backgroundColor = "#EDCA71"
+        document.querySelector(".very-hard").style.backgroundColor = "#EDCA71"
+        strengthText.textContent = "Very Hard";
+      }}
+
+const btn = document.querySelector("button");
+btn.addEventListener("click",generatePassword);
+
+//copy to clipboard
+const titleSpan = document.querySelector("span");
+function copyPasswordToClipboard() {
+    navigator.clipboard.writeText(passwordField.textContent)
+        .then(() => {
+            titleSpan.textContent = "Copied";
+            titleSpan.style.color = "#A5FFAF";
+            setTimeout(function() {
+                titleSpan.textContent = "Generator";
+                titleSpan.style.color = "unset";
+            }, 1000); 
+        })
+        .catch(err => {
+            titleSpan.textContent = "Not Copied";
+            titleSpan.style.color = "red";
+            setTimeout(function() {
+                titleSpan.textContent = "Generator";
+                titleSpan.style.color = "unset";
+            }, 1000);
+        });
+}
+const copyIcon = document.querySelector(".fa-copy");
+copyIcon.addEventListener("click", copyPasswordToClipboard);
diff --git a/node_modules/zxcvbn/LICENSE.txt b/node_modules/zxcvbn/LICENSE.txt