Merge pull request #22 from dhruvishavaghani/PasswordGeneratorAPI

Password Generator API
dishamodi0910 · Oct 1, 2023 · 9cb2116 · 9cb2116
2 parents f19df47 + 8aa7f4e
commit 9cb2116
Show file tree

Hide file tree

Showing 4 changed files with 152 additions and 0 deletions.
diff --git a/Existing_API_Collection/PasswordGeneratorAPI/README.md b/Existing_API_Collection/PasswordGeneratorAPI/README.md
@@ -0,0 +1,9 @@
+<h1>Password Generator API🌟</h1>
+<h3>This API is used to generate strong passwords.</h3>
+<h2>Use of API👀</h2>
+<p>User can generate a strong password on a single that contains uppercase, lowercase letters, numbers, and symbols as well.</p>
+<h2>Future Scope Of API📌</h2>
+<p>A Threat-safe password can be easily generated for better security purposes.</p>
+<h2>Preview🤩</h2>
+<img src="https://github.com/dhruvishavaghani/demo/assets/109460833/74fb24e3-f501-4b9c-b4a4-0d7459ecdc27">
+
diff --git a/Existing_API_Collection/PasswordGeneratorAPI/index.html b/Existing_API_Collection/PasswordGeneratorAPI/index.html
@@ -0,0 +1,27 @@
+<!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">
+    <title>Password Generator API</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script src="script.js"></script>
+</head>
+<body>
+    <main mv-app="passwordToggle">
+        <meta property="isShown" content="[if(toggle mod 2, true, false)]" />
+
+        <label>
+          <p>Password</p>
+          <input id="in" class="password" value="password" />  
+        </label>
+
+        <button type="button" onclick="fun()" property="toggle" aria-pressed="[isShown]" aria-label="Password is [if(isShown, visible, hidden)]"
+              class="password-[if(isShown, 'hide', 'show')]">
+          Get A New Password
+        </button>
+      </main>
+</body>
+</html>
diff --git a/Existing_API_Collection/PasswordGeneratorAPI/script.js b/Existing_API_Collection/PasswordGeneratorAPI/script.js
@@ -0,0 +1,16 @@
+function fun(){
+    var length = '10'
+$.ajax({
+    method: 'GET',
+    url: 'https://api.api-ninjas.com/v1/passwordgenerator?length=' + length,
+    headers: { 'X-Api-Key': '9SAecf5e8Llay9jfLxJbOw==Ic2yXmTIbcm2VldF'},
+    contentType: 'application/json',
+    success: function(result) {
+        document.getElementById("in").value = result.random_password
+        console.log(result.random_password)
+    },
+    error: function ajaxError(jqXHR) {
+        console.error('Error: ', jqXHR.responseText);
+    }
+});
+}
diff --git a/Existing_API_Collection/PasswordGeneratorAPI/style.css b/Existing_API_Collection/PasswordGeneratorAPI/style.css
@@ -0,0 +1,100 @@
+@import url('https://fonts.googleapis.com/css2?family=Arsenal&display=swap');
+
+/* Main logic */
+.password-hide::before {
+  content: "🧐";
+}
+
+.password-show::before {
+  content: "😌";
+}
+
+
+/* App styles */
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+
+  font-family: "Arsenal", sans-serif;
+  font-size: 100%;
+}
+
+html {
+  --accent-color: #97266d;
+  --text-color: #2d3748;
+  --bg-color: #f7fafc;
+
+  min-block-size: 100vh;
+
+  display: grid;
+  place-items: center;
+
+  background-color: #edf2f7;
+
+  font-size: 150%;
+}
+
+[mv-app] {
+  min-inline-size: 25em;
+  padding: 2em 3.5em;
+
+  color: var(--text-color);
+  background-color: var(--bg-color);
+
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+label > p {
+  color: #718096;
+
+  font-size: 80%;
+}
+
+.password {
+  margin-block-start: 0.4em;
+  padding: 0.3em 0.5em;
+
+  color: var(--accent-color);
+}
+
+::selection {
+  color: var(--bg-color);
+  background-color: var(--accent-color);
+}
+
+[property="toggle"] {
+  min-inline-size: 5em;
+  margin-inline-start: 1em;
+  padding: 0.4em 0.6em;
+
+  font-size: 110%;
+  color: var(--bg-color);
+
+  background-color: var(--accent-color);
+
+  border: none;
+  border-radius: 0.3em;
+
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.password:focus {
+  outline: none;
+
+  box-shadow: 0 0 1px 3px var(--accent-color);
+
+  border-color: transparent;
+}
+
+[property="toggle"]:focus {
+  outline-color: var(--accent-color);
+}
+
+:focus:not(:focus-visible) {
+  outline: none;
+}
+
+.password-show::before, .password-hide::before {
+  margin-inline-end: 0.3em;
+}