Home About Contact

Projects

Create Messenger Pop Up ChatBox Type Writer ChatGpt Basic Copy Text Using Tolltip Digital Clock CountDown Timer Create StopWatch FB login from Tab Button Accordion Auto Image Gallery DropDown Menu Modal Box Modal Image Box Scroll Indicator To Do List Autocomplete Remember Search History Toggle Switch Calender Layout Dynamic Calender Alarm Set Password Validation Password Generator Age Calculator Multi Step Form Weather API

Random Password Generator🔑

Note: If you are a beginner, this is something you need to know. Scroll the below section or Click here
  • RegExp in JS
  • string match method in JS
  • Toogle classList
  • position property in CSS

5

HTML


<div class="showcontent">
    <h4 style="line-height: 1.4;"></h4>

    <div class="container">
        <input  id="display" disabled>
        <div class="range">
            <input type="range" min="2" max="20" value="5" id="range">
            <span id="rangevalue">5</span>
        </div>
        <div class="character">
            <div class="symbol">
                <label for="lower">LowerCase letter</label>
                <span><input type="checkbox" id="lower" checked></span>
            </div>

            <div class="symbol">
                <label for="upper">UpperCase letter</label>
                <span><input type="checkbox" id="upper"></span>
            </div>

            <div class="symbol">
                <label for="digit">Digit</label>
                <span><input type="checkbox" id="digit"></span>
            </div>

            <div class="symbol">
                <label for="other">Other symbol</label>
                <span><input type="checkbox" id="other"></span>
            </div>
        </div>
        <button id="generate">Generate</button>
    </div>
  
       
</div>

CSS


.container{
    max-width: 400px;
    margin: auto;
    background-color: #81bf1d;    
}

#display{
    background-color: white;
    padding: 10px;
    width: 100%;
    display: block;
    margin: auto;
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    color: red;
}

.range{
    padding: 10px;
    display:flex;
    align-items: center;
    justify-content: space-between;
}

.range input[type=range]{
    width: 70%;
    padding: 2px;
    cursor: pointer;
}

.range span{
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    border-radius: 5px;
}

.character{
    padding: 10px;
}

.character .symbol{
    display: flex;
    font-size: 18px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    padding: 5px;
    
}

.character .symbol:hover{
    background-color: #aaa;
    
}

.symbol label,.symbol span input{
    cursor: pointer;
}

#generate{
    background-color:orange;
    padding: 12px 16px;
    border:none;
    width: 100%;
    font-size: 20px;
    border-radius: 5px;
    cursor: pointer;
}

#generate:hover{
    background-color:green;
    color: white;
}

#generate:active{
    opacity: 0.7;
}

JavaScript


let lowerletters="abcdefghijklmnopqrstuvwxyz";
let upperletters="ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let digits="123456789";
let syms="&%#*@&";

var Password="";


let generate=document.getElementById("generate");
let pswlength=document.getElementById("range");
let rangevalueshows=document.getElementById("rangevalue");
//console.log(rangevalueshows);

pswlength.addEventListener("click",function(){
    //console.log(rangevalueshows);
    rangevalueshows.innerText=pswlength.value;
});


let lower=document.getElementById("lower");
let upper=document.getElementById("upper");
let digit=document.getElementById("digit");
let sym=document.getElementById("other");


function PSWGenerate(){
    if(lower.checked){
        let index=Math.floor(Math.random()*lowerletters.length);

        //console.log(lowerletters[index]);
        Password+=lowerletters[index];
    }
    if(upper.checked){
        //console.log(Math.random());
        Password+=upperletters[(Math.floor(Math.random()* upperletters.length))];
    }
    if(digit.checked){
        Password+=digits[(Math.floor(Math.random()* digits.length))];
        
    }
    if(other.checked){
        Password+=syms[(Math.floor(Math.random()* syms.length))];
        
    }
    if(Password.length< pswlength.value){
        PSWGenerate();
    }
    //console.log(Password);
    
    

}

generate.addEventListener("click",()=>{
    Password="";
    PSWGenerate();
    //console.log(Password.substring(0,pswlength.value));

    document.getElementById("display").value=Password.substring(0,pswlength.value);

});

Application🌐

Dark Mode Toggle

Example: The dark mode toggle in setting on Twitter or Facebook

Wi-Fi or Bluetooth Settings

Example: The Wi-Fi and Bluetooth toggles in the quick setting menu on Android or iOS devices.

Notifications Settings

Example: In the settings of a messaging app, you might have a toggle switch to enable or disable notifications for new messages.

new Date()

  • Returns a Date object with the current date and time based on the system's clock.
  • This create a date object represent the current date and time.

toString()

  • The toString() method converts any data type into a string. Syntax: varname.toString(),

padStart()

  • It is used to JS to pad the current string with another string untill the resulting string reaches the given length.
    Example: str.padStart(len,char or string);

setInterval()

  • This method in JS repeatedly calls a function or executes a code with a fixed time delay between each call.

setTimeout()

  • This method is used to execute a function or code snippet after a specified delay in milliseconds.

date.get....()

  • getDate(): Returns the day of the month(1-31)
  • getMonth(): Returns the month(0-11)
  • getFullYear(): Returns the year(4 digit year)
  • getDay(): Returns the day of the week(0-6)
  • getHours(): Returns the hours(0-23)
  • getMinutes(): Returns the minites(0-59)
  • getSeconds(): Returns the seconds(0-59)
  • getMilliseconds(): Returns the milliseconds(0-999)
  • getTime(): Returns the number of milliseconds since January 1, 1970, 00:00:00 UTC