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
}
?>
Friday, September 6, 2024
Browser Object Model in javascript
Timing code-
<input type="button" value="Click" onclick="setTimeout(hello, 5000)">
<script>
function hello(){
// alert("yes you can go anywhere!!");
window.location='https://www.google.com/';
}
</script>
Confirm popup code-
<input type="button" value="Click to Know" onclick="hello()">
<p id="show"></p>
<script>
function hello(){
var result;
if(confirm("Yes tell me what you want to do?"))
{
result = "You press OK!!!";
}
else{
result = "You press Cancel!!!!!!!!";
}
document.getElementById("show").innerHTML=result;
}
</script>
Thursday, September 5, 2024
Factorial of any number
<script>
var num = 12;
var z = 1;
var i;
for(i=1;i<=num;i++){
z = z*i;
}
document.write(z);
</script>
Add to Cart (Advanced Tutorial)
index.html file:
<html>
<head>
<title>Advanced Js Cart</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</head>
</html>
<body>
<div class="container">
<div class="row">
<div class="col-md-7">
<div class="row" style="background: cornsilk;padding: 20px;text-align: center;">
<div class="col-md-6">
<img src="phone.png" id ="pic" width="100"><br>
Name: Pink Flower<input type="hidden" id = "name" value="Pink Flower"><br>
Price: Rs 2000<input type="hidden" id = "price" value="2000"><br>
Description: Good<input type="hidden" id = "description" value="Good "><br><br>
<input type="button" onclick="add(1)" class="btn btn-info btn-sm" value="Add to cart">
</div>
<div class="col-md-6">
<img src="other.png" id ="pic2" width="100"><br>
Name: Red Flower<input type="hidden" id = "name2" value="red Flower"><br>
Price: Rs 3000<input type="hidden" id = "price2" value="3000"><br>
Description: Best<input type="hidden" id = "description2" value="Best"><br><br>
<input type="button" onclick="add(2)" class="btn btn-info btn-sm" value="Add to cart">
</div>
</div>
</div>
<div class="col-md-1"></div>
<div class="col-md-4" style="background: #4985c794;">
Total Cart Item : <b id = "c">0</b>
<div id="cartval"></div><br>
<div style=" background: aliceblue;padding: 6px;">Amount<b style="float: right;" id="t">0</b></div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
script.js file:
var count = 0;
var r = 0;
function add(val){
if(val=='1'){
var name = document.getElementById("name").value;
var price = parseInt(document.getElementById("price").value);
var description = document.getElementById("description").value;
var img = document.getElementById("pic").src;
count = count+1;
document.getElementById("c").innerHTML=count;
document.getElementById("t").innerHTML = r;
document.getElementById("cartval").innerHTML+="<div style='background:white; width:350px;height:100px;'><img style='width:50px;' src="+img+"><br>Name:"+name+" Description:"+description+"<br>Price: "+price+"</div>";
}
if(val=='2'){
var name = document.getElementById("name2").value;
var price = parseInt(document.getElementById("price2").value);
var description = document.getElementById("description2").value;
var img = document.getElementById("pic2").src;
count = count+1;
document.getElementById("c").innerHTML=count;
document.getElementById("t").innerHTML = r;
document.getElementById("cartval").innerHTML+="<div style='background:white; width:350px;height:100px;'><img style='width:50px;' src="+img+"><br>Name:"+name+" Description:"+description+"<br>Price: "+price+"</div>";
}
r = r+price;
document.getElementById("t").innerHTML=r;
}
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" > ...
