From 8aa7f4e01dcaebe28724c8e5b03b381b21f5f0b7 Mon Sep 17 00:00:00 2001 From: dhruvishavaghani Date: Sun, 1 Oct 2023 15:17:39 +0530 Subject: [PATCH] PasswordGeneratotAPI --- .../PasswordGeneratorAPI/README.md | 9 ++ .../PasswordGeneratorAPI/index.html | 27 +++++ .../PasswordGeneratorAPI/script.js | 16 +++ .../PasswordGeneratorAPI/style.css | 100 ++++++++++++++++++ 4 files changed, 152 insertions(+) create mode 100644 Existing_API_Collection/PasswordGeneratorAPI/README.md create mode 100644 Existing_API_Collection/PasswordGeneratorAPI/index.html create mode 100644 Existing_API_Collection/PasswordGeneratorAPI/script.js create mode 100644 Existing_API_Collection/PasswordGeneratorAPI/style.css diff --git a/Existing_API_Collection/PasswordGeneratorAPI/README.md b/Existing_API_Collection/PasswordGeneratorAPI/README.md new file mode 100644 index 0000000..c7f5f89 --- /dev/null +++ b/Existing_API_Collection/PasswordGeneratorAPI/README.md @@ -0,0 +1,9 @@ +

Password Generator API🌟

+

This API is used to generate strong passwords.

+

Use of API👀

+

User can generate a strong password on a single that contains uppercase, lowercase letters, numbers, and symbols as well.

+

Future Scope Of API📌

+

A Threat-safe password can be easily generated for better security purposes.

+

Preview🤩

+ + diff --git a/Existing_API_Collection/PasswordGeneratorAPI/index.html b/Existing_API_Collection/PasswordGeneratorAPI/index.html new file mode 100644 index 0000000..fe1d862 --- /dev/null +++ b/Existing_API_Collection/PasswordGeneratorAPI/index.html @@ -0,0 +1,27 @@ + + + + + + + Password Generator API + + + + + +
+ + + + + +
+ + \ No newline at end of file diff --git a/Existing_API_Collection/PasswordGeneratorAPI/script.js b/Existing_API_Collection/PasswordGeneratorAPI/script.js new file mode 100644 index 0000000..eee6aa7 --- /dev/null +++ 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); + } +}); +} \ No newline at end of file diff --git a/Existing_API_Collection/PasswordGeneratorAPI/style.css b/Existing_API_Collection/PasswordGeneratorAPI/style.css new file mode 100644 index 0000000..2f0e624 --- /dev/null +++ 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; +} \ No newline at end of file