From 6c259f456fd08d3382dfde961bb0faedd4db35f2 Mon Sep 17 00:00:00 2001 From: Andrea Fazzi Date: Tue, 16 Jul 2024 07:36:08 +0200 Subject: [PATCH] Add Toggle Multiple Form Visibility project --- js-essentials/main.go | 1 + js-essentials/toggle-multiple-forms/README.md | 7 ++ .../toggle-multiple-forms/index.html | 65 +++++++++++++++++++ js-essentials/toggle-multiple-forms/script.js | 19 ++++++ 4 files changed, 92 insertions(+) create mode 100644 js-essentials/toggle-multiple-forms/README.md create mode 100644 js-essentials/toggle-multiple-forms/index.html create mode 100644 js-essentials/toggle-multiple-forms/script.js diff --git a/js-essentials/main.go b/js-essentials/main.go index ab9fd3b..3915909 100644 --- a/js-essentials/main.go +++ b/js-essentials/main.go @@ -11,6 +11,7 @@ func main() { mux.Handle("GET /toggle-password-visibility/", http.StripPrefix("/toggle-password-visibility", http.FileServer(http.Dir("toggle-password-visibility")))) mux.Handle("GET /toggle-multiple-fields/", http.StripPrefix("/toggle-multiple-fields", http.FileServer(http.Dir("toggle-multiple-fields")))) + mux.Handle("GET /toggle-multiple-forms/", http.StripPrefix("/toggle-multiple-forms", http.FileServer(http.Dir("toggle-multiple-forms")))) log.Println("Start the web server...") err := http.ListenAndServe(":8080", mux) diff --git a/js-essentials/toggle-multiple-forms/README.md b/js-essentials/toggle-multiple-forms/README.md new file mode 100644 index 0000000..3eace5d --- /dev/null +++ b/js-essentials/toggle-multiple-forms/README.md @@ -0,0 +1,7 @@ +# Toggle Multiple Password Fields + +A script that let's users toggle the visibility with the ability to toggle multiple fields. + +# Reference + +* https://leanwebclub.com/learn/js-essentials/project-toggle-multiple-password-fields/ diff --git a/js-essentials/toggle-multiple-forms/index.html b/js-essentials/toggle-multiple-forms/index.html new file mode 100644 index 0000000..c49805c --- /dev/null +++ b/js-essentials/toggle-multiple-forms/index.html @@ -0,0 +1,65 @@ + + + + + + + Toggle Multiple Forms Password Visibility + + +

Toggle Multiple Forms Password Visibility

+ +

Change Username

+

Enter your username and password to change your username.

+
+
+ + +
+ +
+ + +
+ +
+ +
+ +

+ +

+
+ +

Change Password

+

Enter your current password and new password below.

+ +
+
+ + +
+ +
+ + +
+ +
+ +
+ +

+ +

+
+ + + + diff --git a/js-essentials/toggle-multiple-forms/script.js b/js-essentials/toggle-multiple-forms/script.js new file mode 100644 index 0000000..fd2acf9 --- /dev/null +++ b/js-essentials/toggle-multiple-forms/script.js @@ -0,0 +1,19 @@ +let passwordFields = document.querySelectorAll('input[type="password"]'); +let checkboxes = document.querySelectorAll('input[type="checkbox"]'); +let state = {true: "text", false: "password" }; + +window.addEventListener('click', function (event) { + if (event.target.matches('#show-password')) { + for (let field of passwordFields) { + field.type=state[event.target.checked]; + } + } + else { + console.log("Show passwords toggle"); + for (let field of passwordFields) { + field.type=state[event.target.checked]; + } + } + +}); +