Merge d2e285091e into c92b0bc3a8

2 months ago · 5729145694
parent c92b0bc3a8 d2e285091e
commit 5729145694
3 changed files with 35 additions and 7 deletions
--- a/password-generator/index.html
+++ b/password-generator/index.html
@ -4,8 +4,13 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
-    <link rel="stylesheet" href="style.css" />
+    <style>
+   @import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
+
+</style>
    <title>Password Generator</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="icon" type="image/png" href="padlock.png">
  </head>
  <body>
    <div class="container">
@ -42,7 +47,12 @@
      <button class="btn btn-large" id="generate">
        Generate Password
      </button>
+      <button class="btn btn-large" id="clear">
+  Clear Password
+</button>
+
    </div>
-    <script src="script.js"></script>
+    <script  src="script.js"></script>
+
  </body>
-</html>
+</html>
--- a/password-generator/script.js
+++ b/password-generator/script.js
@ -1,4 +1,4 @@
-const resultEl = document.getElementById('result')
+ const resultEl = document.getElementById('result')
 const lengthEl = document.getElementById('length')
 const uppercaseEl = document.getElementById('uppercase')
 const lowercaseEl = document.getElementById('lowercase')
@ -6,6 +6,7 @@ const numbersEl = document.getElementById('numbers')
 const symbolsEl = document.getElementById('symbols')
 const generateEl = document.getElementById('generate')
 const clipboardEl = document.getElementById('clipboard')
+const clear = document.getElementById('clear');

 const randomFunc = {
    lower: getRandomLower,
@ -20,7 +21,14 @@ clipboardEl.addEventListener('click', () => {
    return;
  }
  navigator.clipboard.writeText(password);
-    alert('Password copied to clipboard!')
+  
+  const icon = clipboardEl.querySelector("i");
+   icon.className = "fas fa-check";
+
+    setTimeout(() => {
+    icon.classList.remove("fa-check");
+    icon.classList.add("fa-clipboard");
+  }, 2000);
 })

 generateEl.addEventListener('click', () => {
@ -54,6 +62,9 @@ function generatePassword(lower, upper, number, symbol, length) {
    return finalPassword
 }

+clear.addEventListener('click' , ()=>{
+  resultEl.innerText  = "";
+});
 function getRandomLower() {
    return String.fromCharCode(Math.floor(Math.random() * 26) + 97)
 }
--- a/password-generator/style.css
+++ b/password-generator/style.css
@ -1,4 +1,3 @@
-@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

 * {
  box-sizing: border-box;
@ -27,7 +26,8 @@ h2 {
  background-color: #23235b;
  box-shadow: 0px 2px 10px rgba(255, 255, 255, 0.2);
  padding: 20px;
-  width: 350px;
+  width: 380px;
+  height: 460px;
  max-width: 100%;
 }

@ -77,6 +77,9 @@ h2 {
  display: block;
  width: 100%;
 }
+.btn:hover{
+  background-color: #48489a;
+}

 .setting {
  display: flex;
@ -84,3 +87,7 @@ h2 {
  align-items: center;
  margin: 15px 0;
 }
+#clear{
+  margin-top: 1rem;
+}
+