Welcome to Rameshwar Tech (RT)
Add two number in Java Script
ram.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome To Rameshwar Tech</title>
</head>
<body>
<p>Enter the First Number: <input id="first"></p> <p>Sum: <input id="answer"></p>
<p>Enter the Second Number: <input id="second"></p> <button onclick="add()">ADD</button>
<script>
function add() {
var num1,num2, sum;
num1=parseInt(document.getElementById('first').value);
num2=parseInt(document.getElementById('second').value);
sum num1 + num2;
document.getElementById('answer').value = sum;
}
</script>
</body>
</html>
Hide Show in Java Script
ram.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome Rameshwar Tech</title>
</head>
<body>
<h1> Welcome to the Rameshwar Tech</h1>
<p id="demo">trust me I am Engineer</p>
<input type="button" value="Hide" name="" onclick="document.getElementById('demo').style.visibility 'hidden"">
<input type="button" value="Show" name="" onclick="document.getElementById('demo').style.visibility 'visible"">
</body>
</html>
Output
Alert Box in Java Script
ram.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome Rameshwar Tech</title>
</head>
<body>
<h1> Welcome to the Rameshwar Tech</h1>
<button onclick="myfun()">Click</button>
<script>
function myfun() {
alert("Trust me! I am An Engineer");
}
</script>
</body>
</html>
Output
Print page in Java Script
ram.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome Rameshwar Tech</title>
</head>
<body>
<p>Rameshwar sahu</p>
<input type="button" value="Print this page" onclick="myfun()"/>
<script>
function myfun() { window.print();
}
</script>
</body>
</html>
Output
Dubble Click This paragraph in Js
ram.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome Rameshwar Tech</title>
</head>
<body>
<p ondblclick="myfun()">Dubble click to this paragraph</p>
<p id="demo"></p>
<script>
function myfun() {
document.getElementById("demo").innerHTML = "Rameshwar Sahu";
}
</script>
</body>
</html>
Output
Click & name color change animation in J Query
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){ $("#p1").css("color", "red")
.slideUp(2000)
.slideDown(2000);
});
});
</script>
</head>
<body>
<p id="p1">Rameshwar Sahu (RINKU SAHU)</p>
<button>Click me</button>
</body>
</html>
Output
Hide Content in j Query
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){ $("p").hide("slow", function(){ alert("The paragraph is now hidden");
});
});
});
</script>
</head>
<body>
<button style="font-size: 30px; ">Hide</button>
<p>This is a paragraph with little content.</p>
</body>
</html>
Output
Hide and Show button in J query
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script> $(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
}); });
</script>
</head>
<body>
<p>Trust Me I am Engineer Rameshwar Sahu</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
Output
Contact box animation in J Query
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){ $("div").animate({left: 250px'});
});
});
</script>
</head>
<body>
<button>Start</button>
<p>click the start Button</p>
<div style="background: #800000; height: 100px; width: 100px; position:absolute;"></div>
</body>
</html>
Output
Slide down in J Query
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#flip").click(function(){ $("#panel").slideDown("slow");
});
});
</script>
<style>
#panel, #flip {
width:100px;
height:30px;
padding: 5px;
text-align: center;
background-color: #800000;
border: solid 2px #800000;
}
#panel {
padding: 50px;
display: none;
}
</style>
</head>
<body>
<div id="flip" style="color: #fff;">Click Here</div> <div id="panel" style="color:#fff;">Trust Me I an Engineer!</div>
</body>
</html>
Output
Slide down animation in J query
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){ $("#panel").slideDown(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});
});
</script>
<style>
#panel, #flip {
padding: 5px;
font-size: 18px;
text-align: center;
background-color: #800000;
color: white;
border: solid 1px #666;
border-radius: 3px;
}
#panel {
padding: 50px;
display: none;
</style>
</head>
<body>
<button id-"stop">Stop sliding</button>
<div id="Flip">Click Here</div>
<div id="panel">Trust Me I am Engineer (Rameshwar Sahu)</div>
</body>
</html>
Output
0 Comments