Blog

How to Create Show Password Feature / Toggle Password Visibility using JavaScript

How to Create Show Password Feature / Toggle Password Visibility using JavaScript Step 1) Add HTML: <p>Click the radio button to show and hide password:</p> Password: <input type=”password” value=”test123″ id=”myInput”><br><br> <input type=”checkbox” onclick=”myFunction()”>Show Password Step 2) Add JavaScript: <script> function myFunction() { var x = document.getElementById(“myInput”); if (x.type === “password”) { x.type = “text”; } […]

How to Create Hover Tabs / change tabs on hover, with CSS and JavaScript

How to Create Hover Tabs / change tabs on hover, with CSS and JavaScript Step 1) Add HTML: <h2>Hover Tabs</h2> <p>Move the mouse over a button inside the tabbed menu:</p> <div class=”tab”> <button class=”tablinks” onmouseover=”openCity(event, ‘London’)”>London</button> <button class=”tablinks” onmouseover=”openCity(event, ‘Paris’)”>Paris</button> <button class=”tablinks” onmouseover=”openCity(event, ‘Tokyo’)”>Tokyo</button> </div> <div id=”London” class=”tabcontent”> <h3>London</h3> <p>London is the capital city of […]

How to Create Weight Converter using HTML and JavaScript

How to Create Weight Converter using HTML and JavaScript For Converting Pounds to Kilogram Adding HTML : <h2>Weight Converter Pound to Kilogram</h2> <p>Type a value in the Pounds field to convert the value to Kilograms:</p> <p> <label>Pounds</label> <input id=”inputPounds” type=”number” placeholder=”Pounds” oninput=”weightConverter(this.value)” onchange=”weightConverter(this.value)”> </p> <p>Kilograms: <span id=”outputKilograms”></span></p>   Adding Javascript function weightConverter(valNum) { document.getElementById(“outputKilograms”).innerHTML=valNum/2.2046; } […]

How to Create a full screen video background using HTML, CSS

Learn How to Create a full screen video background using HTML, CSS Adding HTML <div class=”videobg”> <video src=”https://adaptabiz.com/wp-content/uploads/2021/05/Pexels-Videos-1234162.mp4″ loop muted autoplay> </video> <div class=”overlay”> </div> <h1>Fullscreen video background </h1> </div> Adding CSS body { margin: 0; padding: 0; } .videobg { position: relative; overflow: hidden; width: 100%; height: 100vh; background: url(body { margin: 0; padding: […]

How to Create 3 dots loading animation using css

How to Create 3 dots loading animation using css Step 1 : Adding HTML <div class=”dot1″> </div> <div class=”dot2″></div> <div class=”dot3″></div> Step 2 Adding CSS : body { margin: 0; padding: 0; background: black; display: flex; flex-direction: row; align-items: center; justify-content: center; height: 100vh; } .dot1, .dot2, .dot3 { background: #fff; width: 5px; height: 5px; […]

How to create a “To-do list” with HTML, CSS and JavaScript

Learn How to create a “To-do list” with HTML, CSS and JavaScript Step 1) Add HTML: <div id=”myDIV” class=”header”> <h2 style=”margin:5px”>Create a To-Do List</h2> <input type=”text” id=”myInput” placeholder=”Title…”> <span onclick=”newElement()” class=”addBtn”>Add</span> </div> <ul id=”myUL”> <li>Wake up at 5</li> <li class=”checked”>Go to GYM @ 6</li> <li>Make breakfast</li> <li>Go for Grocery Shopping</li> <li>Call Client for Briefing the […]

How to create a Password Validation Form with CSS and JavaScript.

How to create a Password Validation Form with CSS and JavaScript. Create A Form and apply Regex : Step 1) Add HTML: <h3>Password Validation</h3> <p>Try to submit the form.</p> <div class=”container”> <form action=”/action_page.php”> <label for=”usrname”>Username</label> <input type=”text” id=”usrname” name=”usrname” required> <label for=”psw”>Password</label> <input type=”password” id=”psw” name=”psw” pattern=”(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}” title=”Must contain at least one number and one […]

How to create a Sliding Full screen Curtain navigation menu with CSS and JavaScript

How to create a Sliding Full screen Curtain navigation menu with CSS and JavaScript Step 1 : Adding HTML, Creating basic Structure of the page and Menu <!– The overlay Wrap or the Curtain Menu –> <div id=”myNav” class=”overlay”> <!– Button to close the overlay navigation –> <a href=”javascript:void(0)” class=”closebtn” onclick=”closeNav()”>&times;</a> <!– Overlay content –> […]

How to Create an Off-Canvas Menu / Side Bar Navigation

How to Create an Off-Canvas Menu / Side Bar Navigation Step 1) Add HTML: <div id=”mySidenav” class=”sidenav”> <a href=”javascript:void(0)” class=”closebtn” onclick=”closeNav()”>&times;</a> <a href=”#”>About</a> <a href=”#”>Services</a> <a href=”#”>Clients</a> <a href=”#”>Contact</a> </div> <div id=”main”> <h2>Off-Canvas Menu / Side Bar Navigation</h2> <p>Click on the element below to open the side navigation menu, and push this content to the […]

Scroll to top