Skip to content

Commit 08ce91d

Browse files
thenaveensaggamthenaveensaggam
committed
added
1 parent dd47034 commit 08ce91d

File tree

8 files changed

+270
-0
lines changed

8 files changed

+270
-0
lines changed

‎JS_Starter_Template/02_Inline_JavaScript/02_Inline.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Inline JavaScript</title>
6+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
7+
<link rel="stylesheet" href="../css/font-awesome.min.css">
8+
<link rel="stylesheet" href="02_styles.css">
9+
</head>
10+
11+
<body>
12+
13+
<h2>Inline JavaScript Example</h2>
14+
<div>
15+
<h1 id="display"></h1>
16+
</div>
17+
18+
<!-- Change the below Text using Inline JavaScript -->
19+
20+
<div id="text-div">
21+
<p id="green-p">Change my Color using the below Buttons</p>
22+
<button id="blue">Change to Blue</button>
23+
<button id="red">Change to Red</button>
24+
</div>
25+
26+
<!-- Change the below Image using Inline JavaScript -->
27+
28+
<div id="image-div">
29+
<img src="../img/google.jpg" width="300" height="150" id="myImage">
30+
<br>
31+
<button id="facebook"><i class="fa fa-facebook"></i> Facebook</button>
32+
<button id="youtube"><i class="fa fa-youtube-play"></i> Youtube</button>
33+
</div>
34+
35+
36+
<!-- Add your Java Script code here for Inline Way-->
37+
<script>
38+
39+
</script>
40+
41+
</body>
42+
</html>

‎JS_Starter_Template/02_Inline_JavaScript/02_styles.css‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
body{
2+
margin: 0;
3+
font-family: "Comic Sans MS",sans-serif;
4+
}
5+
h2{
6+
background-color: lightsalmon;
7+
text-align: center;
8+
padding: 10px;
9+
}
10+
#text-div{
11+
background-color: orange;
12+
padding: 10px;
13+
text-align: center;
14+
color: white;
15+
margin-bottom: 10px;
16+
}
17+
#image-div{
18+
background-color: orange;
19+
padding: 10px;
20+
text-align: center;
21+
color: white;
22+
margin-bottom: 10px;
23+
}
24+
#green-p{
25+
font-size: 25px;
26+
}
27+
28+
img{
29+
border: 2px solid gray;
30+
border-radius: 15px;
31+
}
32+
33+
#blue , #facebook{
34+
background-color: dodgerblue;
35+
color: white;
36+
border: none;
37+
padding: 10px 25px;
38+
}
39+
#red,#youtube{
40+
background-color: #ff110a;
41+
color: white;
42+
border: none;
43+
padding: 10px 25px;
44+
}
45+
#blue:hover , #red:hover , #facebook:hover , #youtube:hover{
46+
opacity: 0.8;
47+
}

‎JS_Starter_Template/03_Internal_JavaScript/03_Internal.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Internal JavaScript</title>
6+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
7+
<link rel="stylesheet" href="../css/font-awesome.min.css">
8+
<link rel="stylesheet" href="03_styles.css">
9+
</head>
10+
11+
<body>
12+
13+
<h2>Internal JavaScript Example</h2>
14+
<div>
15+
<h1 id="display"></h1>
16+
</div>
17+
18+
<!-- Change the below Text using Internal JavaScript -->
19+
20+
<div id="text-div">
21+
<p id="green-p">Change my Color using the below Buttons</p>
22+
<button id="blue">Change to Blue</button>
23+
<button id="red">Change to Red</button>
24+
</div>
25+
26+
<!-- Change the below Image using Internal JavaScript -->
27+
28+
<div id="image-div">
29+
<img src="../img/google.jpg" width="300" height="150" id="myImage">
30+
<br>
31+
<button id="facebook"><i class="fa fa-facebook"></i> Facebook</button>
32+
<button id="youtube"><i class="fa fa-youtube-play"></i> Youtube</button>
33+
</div>
34+
35+
36+
<!-- Add your Java Script code here for Internal Way-->
37+
<script>
38+
39+
</script>
40+
41+
</body>
42+
</html>

‎JS_Starter_Template/03_Internal_JavaScript/03_styles.css‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
body{
2+
margin: 0;
3+
font-family: "Comic Sans MS",sans-serif;
4+
}
5+
h2{
6+
background-color: lightsalmon;
7+
text-align: center;
8+
padding: 10px;
9+
}
10+
#text-div{
11+
background-color: orange;
12+
padding: 10px;
13+
text-align: center;
14+
color: white;
15+
margin-bottom: 10px;
16+
}
17+
#image-div{
18+
background-color: orange;
19+
padding: 10px;
20+
text-align: center;
21+
color: white;
22+
margin-bottom: 10px;
23+
}
24+
#green-p{
25+
font-size: 25px;
26+
}
27+
28+
img{
29+
border: 2px solid gray;
30+
border-radius: 15px;
31+
}
32+
33+
#blue , #facebook{
34+
background-color: dodgerblue;
35+
color: white;
36+
border: none;
37+
padding: 10px 25px;
38+
}
39+
#red,#youtube{
40+
background-color: #ff110a;
41+
color: white;
42+
border: none;
43+
padding: 10px 25px;
44+
}
45+
#blue:hover , #red:hover , #facebook:hover , #youtube:hover{
46+
opacity: 0.8;
47+
}

‎JS_Starter_Template/04_External_JavaScript/04_External.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>External JavaScript</title>
6+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
7+
<link rel="stylesheet" href="../css/font-awesome.min.css">
8+
<link rel="stylesheet" href="04_styles.css">
9+
</head>
10+
11+
<body>
12+
13+
<h2>External JavaScript Example</h2>
14+
<div>
15+
<h1 id="display"></h1>
16+
</div>
17+
18+
<!-- Change the below Text using External JavaScript -->
19+
20+
<div id="text-div">
21+
<p id="green-p">Change my Color using the below Buttons</p>
22+
<button id="blue">Change to Blue</button>
23+
<button id="red">Change to Red</button>
24+
</div>
25+
26+
<!-- Change the below Image using External JavaScript -->
27+
28+
<div id="image-div">
29+
<img src="../img/google.jpg" width="300" height="150" id="myImage">
30+
<br>
31+
<button id="facebook"><i class="fa fa-facebook"></i> Facebook</button>
32+
<button id="youtube"><i class="fa fa-youtube-play"></i> Youtube</button>
33+
</div>
34+
35+
<!-- Please mention your External JavaScript address here -->
36+
<script src="04_script.js"></script>
37+
38+
</body>
39+
</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/04_styles.css‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
body{
2+
margin: 0;
3+
font-family: "Comic Sans MS",sans-serif;
4+
}
5+
h2{
6+
background-color: lightsalmon;
7+
text-align: center;
8+
padding: 10px;
9+
}
10+
#text-div{
11+
background-color: orange;
12+
padding: 10px;
13+
text-align: center;
14+
color: white;
15+
margin-bottom: 10px;
16+
}
17+
#image-div{
18+
background-color: orange;
19+
padding: 10px;
20+
text-align: center;
21+
color: white;
22+
margin-bottom: 10px;
23+
}
24+
#green-p{
25+
font-size: 25px;
26+
}
27+
28+
img{
29+
border: 2px solid gray;
30+
border-radius: 15px;
31+
}
32+
33+
#blue , #facebook{
34+
background-color: dodgerblue;
35+
color: white;
36+
border: none;
37+
padding: 10px 25px;
38+
}
39+
#red,#youtube{
40+
background-color: #ff110a;
41+
color: white;
42+
border: none;
43+
padding: 10px 25px;
44+
}
45+
#blue:hover , #red:hover , #facebook:hover , #youtube:hover{
46+
opacity: 0.8;
47+
}

‎JS_Starter_Template/css/font-awesome.min.css‎

Lines changed: 4 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)