An Interest In:
Web News this Week
- April 22, 2024
- April 21, 2024
- April 20, 2024
- April 19, 2024
- April 18, 2024
- April 17, 2024
- April 16, 2024
January 28, 2021 07:18 pm GMT
Original Link: https://dev.to/sadmansakib2234/how-to-make-a-random-password-generator-using-javascript-2bae
How to make a random password generator using javascript
So today we are doing to build a random password generator using html css js so lets start
At first lets see the folder structure
PASSWORD GENERATOR MINI PROJECT USING HTML CSS & JAVASCRIPTcssimgjs
in the project root make an index.html file and make a css file in css folder and a js file in js folder and for copying the password we need an clipboard image download it
open project in the code editor
code .
import css and js in the index.html file
now lets start codding.Write the entire html
After it we want to code the css so lets start. copy the entire style.css from here
* { margin: 0; padding: 0; font-family: Consolas; user-select: none;}body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #f8f8f8;}.inputBox { position: relative; width: 450px;}.inputBox h2 { font-size: 28px; color: #333333;}.inputBox input { position: relative; width: 100%; height: 60px; border: none; margin: 15px 0 20px; background: transparent; outline: none; padding: 0 20px; font-size: 24px; letter-spacing: 4px; box-sizing: border-box; border-radius: 4px; color: #333333; box-shadow: -4px -4px 10px rgba(255, 255, 255, 1), inset 4px 4px 10px rgba(0, 0, 0, 0.05), inset -4px -4px 10px rgba(255, 255, 255, 1), 4px 4px 10px rgba(0, 0, 0, 0.05);}.inputBox input::placeholder { letter-spacing: 0px;}.inputBox #btn { position: relative; cursor: pointer; color: #fff; background-color: #333333; font-size: 24px; display: inline-block; padding: 10px 15px; border-radius: 8px;}.inputBox #btn:active { background-color: #9c27b0;}.copy { position: absolute; top: 58px; right: 15px; cursor: pointer; opacity: 0.2; width: 40px; height: 40px;}.copy:hover { opacity: 1;}.alertbox { position: fixed; top: 0; left: 0; height: 100vh; width: 100%; background-color: #9c27b0; color: #fff; align-items: center; text-align: center; justify-content: center; font-size: 4em; display: none;}.alertbox.active { display: flex; justify-content: center; align-content: center;}
now lets write the js file open it and start put the js code in
so now we have completed the project. the full code is on github .please follow me on github if you want and thanks for reading good bye...
github: get the code here
Original Link: https://dev.to/sadmansakib2234/how-to-make-a-random-password-generator-using-javascript-2bae
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To