JavaScript DOM activity
JavaScript DOM activity
What JavaScript can do.
Activity: 1
<!DOCTYPE html>
<html>
<head>
<title>Activity1</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style type="text/css">
.container{
width: 28%;
margin-top: 30px;
border: 2px solid orange;
border-radius: 10px;
background-color: lightyellow;
}
</style>
</head>
<body>
<div class="container">
<h1 id="demo">My Work</h1>
<p id="demo1">My Name is:</p>
<form>
<label id="demo2">Name</label>
<input type="text" name="Name" >
</form>
<a id="demo3" href="https://www.google.com/">Link</a>
<table>
<tr>
<td id="demo4">Text1</td>
<td id="demo5">Text2</td>
</tr>
</table>
<br>
</div>
<script type="text/javascript">
document.getElementById('demo').innerHTML = "Activity 1";
document.getElementById('demo1').innerHTML = "Muhammad Bin Jameel";
document.getElementById('demo2').innerHTML = "First Name:";
document.getElementById('demo3').innerHTML = "Google";
document.getElementById('demo4').innerHTML = "Demo1 ";
document.getElementById('demo5').innerHTML = " Demo2";
</script>
</body>
</html>
Activity: 2
<!DOCTYPE html>
<html>
<head>
<title>Activity2</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style type="text/css">
.container{
width: 31.75%;
margin-top: 30px;
border: 2px solid orange;
border-radius: 10px;
background-color: lightsilver;
}
</style>
</head>
<body>
<div class="container">
<img id="demo" src="https://cdn.dribbble.com/users/2322685/screenshots/6221645/welcome-dribbble.gif" width="400px"><br>
<button onclick="myfunction()">Change Image</button>
<button onclick="myfunction1()">Check Link</button><br>
<p id="demo1"></p>
</div>
<script type="text/javascript">
function myfunction(){
document.getElementById("demo").src = "https://i.pinimg.com/originals/06/e2/07/06e2073689fb8ecd78bef84833c77b17.gif";
document.getElementById("demo").style.width = "400px";
}
function myfunction1(){
var Link = document.getElementById("demo").src;
document.getElementById("demo1").innerHTML = Link;
document.getElementById("demo1").style.fontSize = "11px";
document.getElementById("demo1").style.color = "blue";
document.getElementById("demo1").style.fontWeight = "bold";
}
</script>
</body>
</html>
Activity: 3
<!DOCTYPE html>
<html>
<head>
<title>Activity3</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style type="text/css">
.container{
width: 18%;
margin-top: 30px;
border: 2px solid orange;
border-radius: 10px;
background-color: lightgreen;
}
th,td{
border: 1px solid blue;
width: 100px;
text-align: center;
}
</style>
</head>
<body>
<button onclick="showDiv()">Show/Hide Screen Disply</button>
<div class="container" id="demo" style="display: none;">
<div style="margin-left: 10px;">
<table>
<tr>
<th>Name</th>
<th>Roll No</th>
<th>Marks</th>
</tr>
<tr>
<td>Ali</td>
<td>Hassan</td>
<td>Hussain</td>
</tr>
<tr>
<td>ABC1</td>
<td>ABC2</td>
<td>ABC3</td>
</tr>
<tr>
<td>85</td>
<td>84</td>
<td>83</td>
</tr>
</table>
<ol>
<li>ABC</li>
<li>CDE</li>
</ol>
<p>Hello!...</p>
<a href="https://www.google.com/">Google</a><br>
<img src="https://68.media.tumblr.com/9b1cb0fc052daac34dcb3cef2a0e2ab9/tumblr_o63i3qp9uf1sunm0go1_500.gif" width="180px;">
</div>
</div>
<script type="text/javascript">
function showDiv(){
var x = document.getElementById('demo');
if(x.style.display == 'none'){
x.style.display = 'block';
}
else{
x.style.display = 'none';
}
}
</script>
</body>
</html>
Activity: 4
<!DOCTYPE html>
<html>
<head>
<title>Activity4</title>
</head>
<body>
<button onclick="showDiv()">Custom Background Color</button><br>
<div id="demo" style="display: none; margin-top: 5px;">
<button type="button" onclick="myfunction()">White</button>
<button type="button" onclick="myfunction1()">Blue</button>
<button type="button" onclick="myfunction2()">Red</button>
<button type="button" onclick="myfunction3()">Green</button>
<button type="button" onclick="myfunction4()">Yellow</button>
</div>
<script type="text/javascript">
function showDiv(){
var x = document.getElementById('demo');
if(x.style.display == 'none'){
x.style.display = 'block';
}
else{
x.style.display = 'none';
}
}
function myfunction(){
document.body.style.backgroundColor = "white";
}
function myfunction1(){
document.body.style.backgroundColor = "blue";
}
function myfunction2(){
document.body.style.backgroundColor = "red";
}
function myfunction3(){
document.body.style.backgroundColor = "green";
}
function myfunction4(){
document.body.style.backgroundColor = "yellow";
}
</script>
</body>
</html>
Activity: 5
<!DOCTYPE html>
<html>
<head>
<title>Activity5</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style type="text/css">
.container{
width: 11.25%;
margin-top: 30px;
border: 1px solid orange;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="container">
<div style="margin-left: 10px;">
<img id="demo" src="https://www.w3schools.com/js/pic_bulboff.gif" style="width:100px"><br>
<button onclick="myfunction()">Bulb On/Off</button>
</div>
</div>
<script type="text/javascript">
function myfunction(){
if(demo.src.indexOf('https://www.w3schools.com/js/pic_bulboff.gif')!=-1){
demo.src = 'https://www.w3schools.com/js/pic_bulbon.gif';
}
else{
demo.src = 'https://www.w3schools.com/js/pic_bulboff.gif';
}
}
</script>
</body>
</html>
Hello, my name is Muhammad Bin Jameel.
No comments:
Post a Comment