19BCE1665
YUKTI S
IWP LAB EXERCISE
1. Source code:
<!DOCTYPE html>
<html>
<head>
<title>19BCE1665</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.
js"
></script>
<script>
$(document).ready(function() {
$("#hide").click(function() {
$("#one").hide();
});
$("#show").click(function() {
$("#one").show();
});
$("#two").click(function() {
$("#para").append(" <b>Appended text</b>.");
});
$("#three").click(function() {
$("body").css("background-color", "lightblue");
});
$("#four").click(function() {
function blink() {
$('#blink').fadeOut(10);
$('#blink').fadeIn(10);
}
setInterval(blink, 100);
});
$("#five").click(function() {
$("#ani").animate({
width: "70%", fontSize: "3em"
});
});
});
</script>
</head>
<body>
<button id="one">Submit</button><br>
<a href="#" id="hide">Hide Button</a><br>
<a href="#" id="show">Show Button</a><br>
<p id="para">HOLLA!!</p>
<button id="two">Append</button><br>
<button id="three">Change background color</button>
<p id="blink">Blinking text</p>
<button id="four">Blink text</button>
<p id="ani">Animated text</p>
<button id="five">Click to see the animation</button>
</body>
</html>
Output:
2. Source code:
<!DOCTYPE html>
<html>
<body>
<script lang="Javascript">
function loadDoc() {
var x = new XMLHttpRequest();
x.onreadystatechange = function(){
document.getElementById("demo").innerHTML = x.responseText;
};
x.open("GET", "hobby.txt", true);
x.send();
}
</script>
<div id="demo">
<h2>Let AJAX change this text</h2>
<button type="button" onclick="loadDoc()">Load Content</button>
</div>
</body>
</html>
Output:
3. Source code:
<!DOCTYPE html>
<html>
<body>
<h2>Store and retrieve data from local storage.</h2>
<p id="demo"></p>
<script>
var myObj, myJSON, text, obj;
// Storing data:
myObj = { name: "Sara", Salary: '50000' };
myJSON = JSON.stringify(myObj);
localStorage.setItem("testJSON", myJSON);
// Retrieving data:
text = localStorage.getItem("testJSON");
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.name+" "+obj.Salary;
</script>
</body>
</html>
Output:
