Beautiful Password Generator using only HTML, CSS, and JavaScript | Step-by-Step Tutorial

Sdílet
Vložit
  • čas přidán 2. 08. 2024
  • Use only HTML, CSS, and JavaScript to create a beautiful password generator. We'll cover everything from creating a colored character-length slider, implementing toggles for including numbers and symbols, copying the password to the clipboard, and even adding a password strength meter.
    📚 Materials/References:
    Full Repository: github.com/CodeSnaps/password...
    Full HTML Code: github.com/CodeSnaps/password...
    Full CSS Code: github.com/CodeSnaps/password...
    Full JavaScript Code: github.com/CodeSnaps/password...
    👨🏻‍💻 Here's what you'll learn:
    - Create a password generator with HTML, CSS, and JavaScript
    - Easily copy passwords to the clipboard
    - Create a slider to set the character length of the password
    - Implement toggles to include numbers and symbols in the generated password
    - Add a password strength meter to evaluate the strength of the generated password
    - Submit the form to generate a new password
    👇 Timestamps:
    00:00 Intro
    00:37 HTML & CSS
    03:33 Form Container
    04:02 Password Length Slider
    05:47 Toggles
    07:08 Strength Meter
    07:48 Submit Button
    08:24 Finished HTML & CSS
    08:48 JavaScript IEFE
    09:13 DOM Selection
    09:43 Copy Button
    10:23 Password Length
    10:59 Generate Password
    15:05 Set Font Size
    15:47: Password Strength
    18:07 Outro
  • Věda a technologie

Komentáře •