For training register here - https://www.websitedevelopmentservices.in/training
Tuesday, October 29, 2024
Saturday, October 26, 2024
Character Counter using javascript
Max 25 Chars only<br>
<textarea id = "counts"></textarea><br><br>
<div id = "show">0</div>
<script>
var c = document.getElementById("counts");
c.oninput = function(){
var st = c.value;
if(st.length>=25){
document.getElementById("show").innerHTML = "Please stop you reached at maximum limit.";
return false;
}
else{
document.getElementById("show").innerHTML = st.length;
}
}
</script>
Sunday, October 20, 2024
Password strength checker using javascript
<style>
#area{
background-color: aliceblue;
width: 50%;
}
#progress{
background-color: red;
width: 1%;
transition: 0.6s;
color:white;
}
</style>
<input type="text" id = "password" placeholder="Type your password"><br><br>
<div id = "area">
<div id="progress">1%</div>
</div>
<div id="message"></div>
<script>
var p = document.getElementById("password"); //seleting the id
let progress = document.getElementById("progress");
p.oninput = function(){
var myinput = p.value;
let incre = 0;
let per = ["1%","20%","40%","80%","100%"];
let colr = ["red","yellow","blue","steelblue","green"];
if(myinput.length>=8){
let regx = [/[0-9]/,/[a-z]/,/[A-Z]/,/[^0-9a-zA-Z]/]; //a regular expression pattern
regx.forEach((items)=>{
if(items.test(myinput))
{
incre += 1;
}
});
}
progress.style.backgroundColor = colr[incre]; // colr[1] // accessing array address
progress.style.width = per[incre];
progress.innerHTML = per[incre];
}
</script>
Thursday, October 3, 2024
Search bar and data filtering using html and php mysql with jquey ajax
index.php file:
<html>
<head>
<title>Search Bar and Filtering</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
// for search bar
$(".sbar").on("keyup", function(){
var sbar = $(this).val();
$.ajax({
url:"search.php",
type:"POST",
data:{sbar:sbar},
success:function(data){
$("#show").html(data);
}
})
})
//end search bar code
});
// start filtering
function getresult(){
$.ajax({
url:"search.php",
type:"POST",
success:function(data){
$("#show").html(data);
}
})
}
getresult();
//end filtering
</script>
<body>
<input type="text" class = "sbar" style="width:320px; height:20px;" placeholder = "Search your data here!">
<div id ="show"></div>
</body>
</head>
</html>
search.php file:
<?php
//database connection
$connect = mysqli_connect("localhost","root","","mysearchdata");
$sbar = $_POST['sbar'];
$sql = mysqli_query($connect,"select * from datas where mydatas LIKE '%$sbar%'");
while($result = mysqli_fetch_array($sql)){
?>
<p><?php echo $result['mydatas']; ?></p>
<?php
}
?>
Subscribe to:
Posts (Atom)
Professional Trigonometric Calculator using HTML, CSS, and JavaScript.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport...
-
Video Link - Go to video Full Code - <style> .popup-overlay { display : none ; position : fixed ; top ... -
Full Code: Demo : <!DOCTYPE html > <html lang = "en" > <head> <meta charset = "UTF-8" > ...
