I also used newer CSS variables to avoid repeating myself in a few spots concerning colors. You’ll see I’ve added a gradient for the main background. gradient : linear-gradient ( to right, var ( -teal ), var ( -blue )) īox-shadow : 0 10px 15px -3px rgb ( 0 0 0 / 0.1 ), 0 4px 6px -4px rgb ( 0 0 0 / 0.1 ) I added the following code within the head tags of the HTML page so the font renders. There’s a Generate button and a Copy button to make it easy to grab the password for quick use.įor the body of the page I’ll use a Google font called Lexend. The generator has a text input where the final password will display and a set of controls to configure the password character types, including numbers, symbols, and length. Now apply the justify-content property to the div elements that we used to wrap the pairs of labels and inputs to align at both ends of the element. Apply "display: flex align-items: center justify-content: center" on '.container' class to align app vertically and horizontally in center of the screen. We are using CSS flexbox properties to align-items.Īlign the app to the center of the window screen using flexbox. Now use CSS to style the app to look beautiful. Here is the complete HTML code for the app. Here is the complete HTML code password generator. Get Random PasswordĪdd font-awesome CDN in the head for the icon. Now create a button and add onclick event to it with "createPassword()" function. We will now create 4 checkboxes for number, symbol, lowerCase, and upperCase respectively for selecting the type of characters to add in the password and wrap each of these inputs in an element.Īgain we will wrap each pair within an element to align it side by side. Creating a checkbox for selecting the type of characters in the password Create a label for it and provide min, max, and value attribute to it.Īdd 'length' as an id to tag and wrap both tag and tag in element so that we may align is side by side. Now create an input box for the length of the password using tag, with type number. Creating an input box for taking password length as input. We will use this class later to style the elements. Now wrap these 2 item in a single element with CSS class of 'password'. Creating a box to show passwordįirst create a tag to show the password and add 'passwordBox' id to it for later access, also create a copy icon button using the font-awesome icon.
0 Comments
Leave a Reply. |