Kata: Password Check

You will build a password check app with HTML, CSS and JavaScript.

Features

• Add these five checks
  • Passwords are equal
  • Password contains at least one lower case character
  • Password contains at least one upper case character
  • Password contains at least one number
  • Passwort is at least 10 characters long
• The first check is always the "equality check" of both passwords
  • If this first check fails all other checks will be failed automatically
• Run all checks whenever the user types into any of the password inputs
• Add a button that toggles the text in the password fields and the label of the button itself
  • If the passwords are hidden the text of the button is "Show Passwords"
  • If the passwords are visible the text of the button is "Hide Passwords"

Styling

• Style the app as visible on the screenshots and in the video
• Use lightsalmon as background color
• Use Lobster for Headings and Open Sans for all other text
• Use Open Sans also for inputs and buttons
• Use a one column layout below 700px screen width
• Use a two column layout above 700px screen width
• Use emojis (either from your emoji keyboard or emojicopy) for valid or invalid checks
• Inputs and buttons should have
  • A black border
  • A 2px border radius

Hints

Input elements for passwords are created like this.

<input type="password" />

Input elements for text are implemented like this.

<input type="text" />

Screenshot Mobile

Screenshot Desktop

Video

Password.Check.App.mov

Source

https://github.com/coding-bootcamps-eu/web-apps-foundation/blob/main/katas/password-check.md