Skip to content

Commit 8a02e02

Browse files
thenaveensaggamthenaveensaggam
committed
new files
1 parent de43ce8 commit 8a02e02

File tree

10 files changed

+717
-0
lines changed

10 files changed

+717
-0
lines changed

‎9AM_BATCH/01_Basics_JS/01_Basics.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>JS Basics</title>
6+
<style>
7+
body{
8+
margin: 0;
9+
font-family: "Comic Sans MS",sans-serif;
10+
}
11+
h2{
12+
background-color: lightgreen;
13+
text-align: center;
14+
padding: 10px;
15+
}
16+
div{
17+
background-color: seagreen;
18+
padding: 10px;
19+
text-align: center;
20+
color: white;
21+
}
22+
</style>
23+
</head>
24+
25+
<body>
26+
27+
<h2>JavaScript Basics</h2>
28+
<div>
29+
<h1 id="display"></h1>
30+
</div>
31+
32+
</body>
33+
34+
35+
<script>
36+
37+
//Alert Box
38+
39+
//alert('Hello JS');
40+
41+
// confirm Box
42+
43+
// confirm('Welcome to JS');
44+
45+
//console log
46+
47+
console.log('Hello JavaScript');
48+
49+
//Display date on the console
50+
var today = new Date();
51+
console.log(today);
52+
53+
// Display date on the web page using DOM
54+
document.getElementById('display').innerHTML = today +"";
55+
56+
</script>
57+
58+
</html>

‎9AM_BATCH/02_Inline_JavaScript/02_Inline.html‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Inline JavaScript</title>
6+
<style>
7+
body{
8+
margin: 0;
9+
font-family: "Comic Sans MS",sans-serif;
10+
}
11+
h2{
12+
background-color: lightgreen;
13+
text-align: center;
14+
padding: 10px;
15+
}
16+
#text-div{
17+
background-color: seagreen;
18+
padding: 10px;
19+
text-align: center;
20+
color: white;
21+
margin-bottom: 10px;
22+
}
23+
#image-div{
24+
background-color: seagreen;
25+
padding: 10px;
26+
text-align: center;
27+
color: white;
28+
margin-bottom: 10px;
29+
}
30+
#green-p{
31+
font-size: 25px;
32+
}
33+
</style>
34+
</head>
35+
36+
<body>
37+
38+
<h2>Inline JavaScript Example</h2>
39+
<div>
40+
<h1 id="display"></h1>
41+
</div>
42+
43+
<!-- Change the below Text using Inline JavaScript -->
44+
45+
<div id="text-div">
46+
<p id="green-p">Change my Color using the below Buttons</p>
47+
<button onclick="document.getElementById('green-p').style.color='blue'">Change to Blue</button>
48+
<button onclick="document.getElementById('green-p').style.color='red'">Change to Red</button>
49+
</div>
50+
51+
<!-- Change the below Image using Inline JavaScript -->
52+
53+
<div id="image-div">
54+
<img src="../img/google.jpg" width="300" height="200" id="myImage">
55+
<br>
56+
<button onclick="document.getElementById('myImage').setAttribute('src','../img/facebook.jpg')">Facebook</button>
57+
<button onclick="document.getElementById('myImage').setAttribute('src','../img/youtube.jpg')">Youtube</button>
58+
</div>
59+
60+
61+
<!-- Add your Java Script code here for Inline Way-->
62+
<script>
63+
64+
</script>
65+
66+
</body>
67+
</html>

‎9AM_BATCH/03_Internal_JavaScript/03_Internal.html‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Internal JavaScript</title>
6+
<style>
7+
body{
8+
margin: 0;
9+
font-family: "Comic Sans MS",sans-serif;
10+
}
11+
h2{
12+
background-color: lightgreen;
13+
text-align: center;
14+
padding: 10px;
15+
}
16+
#text-div{
17+
background-color: seagreen;
18+
padding: 10px;
19+
text-align: center;
20+
color: white;
21+
margin-bottom: 10px;
22+
}
23+
#image-div{
24+
background-color: seagreen;
25+
padding: 10px;
26+
text-align: center;
27+
color: white;
28+
margin-bottom: 10px;
29+
}
30+
#green-p{
31+
font-size: 25px;
32+
}
33+
</style>
34+
</head>
35+
36+
<body>
37+
38+
<h2>Internal JavaScript Example</h2>
39+
<div>
40+
<h1 id="display"></h1>
41+
</div>
42+
43+
<!-- Change the below Text using Internal JavaScript -->
44+
45+
<div id="text-div">
46+
<p id="green-p">Change my Color using the below Buttons</p>
47+
<button onclick="blue()">Change to Blue</button>
48+
<button onclick="red()">Change to Red</button>
49+
</div>
50+
51+
<!-- Change the below Image using Internal JavaScript -->
52+
53+
<div id="image-div">
54+
<img src="../img/google.jpg" width="300" height="200" id="myImage">
55+
<br>
56+
<button onclick="facebook()">Facebook</button>
57+
<button onclick="youtube()">Youtube</button>
58+
</div>
59+
60+
61+
<!-- Add your Java Script code here for Internal Way-->
62+
<script>
63+
64+
function blue() {
65+
document.getElementById('green-p').style.color = 'blue';
66+
}
67+
68+
function red() {
69+
document.getElementById('green-p').style.color = 'red';
70+
}
71+
72+
function facebook() {
73+
document.getElementById('myImage').setAttribute('src','../img/facebook.jpg');
74+
}
75+
76+
function youtube() {
77+
document.getElementById('myImage').setAttribute('src','../img/youtube.jpg');
78+
}
79+
80+
</script>
81+
82+
</body>
83+
</html>

‎9AM_BATCH/04_External_JavaScript/04_External.html‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>External JavaScript</title>
6+
<style>
7+
body{
8+
margin: 0;
9+
font-family: "Comic Sans MS",sans-serif;
10+
}
11+
h2{
12+
background-color: lightgreen;
13+
text-align: center;
14+
padding: 10px;
15+
}
16+
#text-div{
17+
background-color: seagreen;
18+
padding: 10px;
19+
text-align: center;
20+
color: white;
21+
margin-bottom: 10px;
22+
}
23+
#image-div{
24+
background-color: seagreen;
25+
padding: 10px;
26+
text-align: center;
27+
color: white;
28+
margin-bottom: 10px;
29+
}
30+
#green-p{
31+
font-size: 25px;
32+
}
33+
</style>
34+
</head>
35+
36+
<body>
37+
38+
<h2>External JavaScript Example</h2>
39+
<div>
40+
<h1 id="display"></h1>
41+
</div>
42+
43+
<!-- Change the below Text using External JavaScript -->
44+
45+
<div id="text-div">
46+
<p id="green-p">Change my Color using the below Buttons</p>
47+
<button onclick="blue()">Change to Blue</button>
48+
<button onclick="red()">Change to Red</button>
49+
</div>
50+
51+
<!-- Change the below Image using External JavaScript -->
52+
53+
<div id="image-div">
54+
<img src="../img/google.jpg" width="300" height="200" id="myImage">
55+
<br>
56+
<button onclick="facebook()">Facebook</button>
57+
<button onclick="youtube()">Youtube</button>
58+
</div>
59+
60+
<!-- Please mention your External JavaScript address here -->
61+
<script src="04_script.js"></script>
62+
63+
</body>
64+
</html>

‎9AM_BATCH/04_External_JavaScript/04_script.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
// Add your JavaScript code here
2+
3+
function blue() {
4+
document.getElementById('green-p').style.color = 'blue';
5+
}
6+
7+
function red() {
8+
document.getElementById('green-p').style.color = 'red';
9+
}
10+
11+
function facebook() {
12+
document.getElementById('myImage').setAttribute('src','../img/facebook.jpg');
13+
}
14+
15+
function youtube() {
16+
document.getElementById('myImage').setAttribute('src','../img/youtube.jpg');
17+
}

‎9AM_BATCH/05_Variable_Declaration/05_Variables.html‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Variable Declaration</title>
6+
<style>
7+
body{
8+
margin: 0;
9+
font-family: "Comic Sans MS",sans-serif;
10+
}
11+
h2{
12+
background-color: lightgreen;
13+
text-align: center;
14+
padding: 10px;
15+
}
16+
div{
17+
background-color: seagreen;
18+
padding: 10px;
19+
text-align: center;
20+
color: white;
21+
}
22+
</style>
23+
</head>
24+
<body>
25+
26+
27+
<h2>Variable Declaration Example</h2>
28+
<div>
29+
<h1 id="display"></h1>
30+
</div>
31+
</body>
32+
33+
<script>
34+
35+
// Create two variables and display their sum
36+
var a = 10;
37+
var b = 20;
38+
var sum = a + b;
39+
var output = "The Sum of a , b is : " + sum;
40+
console.log(output);
41+
document.getElementById('display').innerHTML = output;
42+
43+
// Find the biggest value between 2 numbers
44+
var x = 10;
45+
var y = 20;
46+
output = "";
47+
if(x > y){
48+
output = "The Big value is : " + x;
49+
}
50+
else{
51+
output = "The Big value is : " + y;
52+
}
53+
console.log(output);
54+
document.getElementById('display').innerHTML = output;
55+
56+
// Find the biggest value among 3 numbers
57+
var p = 10;
58+
var q = 20;
59+
var r = 30;
60+
output = "";
61+
if(p > q && p > r){
62+
output = "The Biggest Value is : " + p;
63+
}
64+
else if(q > r){
65+
output = "The Biggest Value is : " + q;
66+
}
67+
else{
68+
output = "The Biggest Value is : " + r;
69+
}
70+
console.log(output);
71+
document.getElementById('display').innerHTML = output;
72+
73+
</script>
74+
</html>

0 commit comments

Comments
 (0)