Skip to content

Commit aeef3b3

Browse files
thenaveensaggamthenaveensaggam
committed
added new files
1 parent 2834cf8 commit aeef3b3

File tree

38 files changed

+1683
-0
lines changed

38 files changed

+1683
-0
lines changed

‎JS_Starter_Template/01_Basics_JS/01_Basics.html‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
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+
// confirm Box
40+
41+
//console log
42+
43+
//Display date on the console
44+
45+
// Display date on the web page using DOM
46+
47+
48+
</script>
49+
50+
</html>

‎JS_Starter_Template/01_Basics_JS/basics.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>JS Basics</title>
8+
</head>
9+
10+
<body>
11+
12+
</body>
13+
14+
15+
<script>
16+
17+
//Alert Box
18+
19+
// confirm Box
20+
21+
//console log
22+
23+
//Display date
24+
25+
26+
</script>
27+
28+
</html>

‎JS_Starter_Template/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>Change to Blue</button>
48+
<button>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>Facebook</button>
57+
<button>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>

‎JS_Starter_Template/02_Inline_JavaScript/inline.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>Inline JavaScript</title>
8+
</head>
9+
10+
<body>
11+
12+
<!-- Inline JavaScript TEXT-->
13+
14+
<h2> Inline JavaScript </h2>
15+
<div id="text-div">
16+
<p id="green-p">This is a Green Color Text</p>
17+
<button>Change to Blue</button>
18+
<button>Change to Red</button>
19+
</div>
20+
21+
<!-- Inline JavaScript IMAGE-->
22+
23+
<div id="image-div">
24+
<img src="../img/google.jpg" width="300px" height="200px" id="myImage">
25+
<br>
26+
<button>Facebook</button>
27+
<button>Youtube</button>
28+
</div>
29+
30+
</body>
31+
32+
33+
</html>

‎JS_Starter_Template/03_Internal_JavaScript/03_Internal.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>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>Change to Blue</button>
48+
<button>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>Facebook</button>
57+
<button>Youtube</button>
58+
</div>
59+
60+
61+
<!-- Add your Java Script code here for Internal Way-->
62+
<script>
63+
64+
</script>
65+
66+
</body>
67+
</html>

‎JS_Starter_Template/03_Internal_JavaScript/internal.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>An empty page</title>
8+
9+
<script>
10+
var date = new Date();
11+
document.body.innerHTML = "<h1> Today is " + date + "</h1>";
12+
</script>
13+
14+
</head>
15+
16+
<body>
17+
18+
</body>
19+
20+
21+
</html>

‎JS_Starter_Template/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>Change to Blue</button>
48+
<button>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>Facebook</button>
57+
<button>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>

‎JS_Starter_Template/04_External_JavaScript/04_script.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
// Add your JavaScript code here
2+

‎JS_Starter_Template/04_External_JavaScript/external.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>External JavaScript</title>
8+
9+
</head>
10+
11+
<body>
12+
<!-- do the same thing as Internal here -->
13+
</body>
14+
<script src="script.js"></script>
15+
</html>

‎JS_Starter_Template/04_External_JavaScript/script.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
var date = new Date();
2+
document.body.innerHTML = "<h1> Today is " + date + "</h1>";

0 commit comments

Comments
 (0)