Skip to content

Commit 24784af

Browse files
thenaveensaggamthenaveensaggam
committed
added
1 parent 66eb029 commit 24784af

File tree

35 files changed

+2735
-0
lines changed

35 files changed

+2735
-0
lines changed

‎JS_Completed_Template/.idea/JS_Completed_Template.iml‎

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

‎JS_Completed_Template/.idea/modules.xml‎

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

‎JS_Completed_Template/.idea/preferred-vcs.xml‎

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

‎JS_Completed_Template/.idea/workspace.xml‎

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

‎JS_Completed_Template/01_Basics_JS/basics.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
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+
//alert("Hello JavaScript");
19+
20+
// confirm Box
21+
//confirm("Hello JS");
22+
23+
//console log
24+
console.log("Welcome to JavaScript");
25+
26+
//Display date
27+
var today = new Date();
28+
console.log(today);
29+
30+
var output = "<h1>" + today + "</h1>";
31+
document.body.innerHTML = output;
32+
33+
34+
</script>
35+
36+
</html>

‎JS_Completed_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 onclick="document.getElementById('green-p').style.color='blue'">Change to Blue</button>
18+
<button onclick="document.getElementById('green-p').style.color='red'">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 onclick="document.getElementById('myImage').setAttribute('src','../img/facebook.jpg')">Facebook</button>
27+
<button onclick="document.getElementById('myImage').setAttribute('src','../img/youtube.jpg')">Youtube</button>
28+
</div>
29+
30+
</body>
31+
32+
33+
</html>

‎JS_Completed_Template/03_Internal_JavaScript/internal.html‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
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>Internal JavaScript</title>
8+
</head>
9+
10+
<body>
11+
12+
<!-- Inline JavaScript TEXT-->
13+
14+
<h2> Internal JavaScript </h2>
15+
<div id="text-div">
16+
<p id="green-p">This is a Green Color Text</p>
17+
<button onclick="blue();">Change to Blue</button>
18+
<button onclick="red();">Change to Red</button>
19+
</div>
20+
21+
<!-- Internal JavaScript IMAGE-->
22+
23+
<div id="image-div">
24+
<img src="../img/google.jpg" width="300px" height="200px" id="myImage">
25+
<br>
26+
<button onclick="facebook();">Facebook</button>
27+
<button onclick="youtube();">Youtube</button>
28+
</div>
29+
30+
</body>
31+
32+
<script>
33+
34+
function blue() {
35+
document.getElementById('green-p').style.color = 'blue';
36+
}
37+
38+
function red() {
39+
document.getElementById('green-p').style.color = 'red';
40+
}
41+
42+
function facebook() {
43+
document.getElementById('myImage').setAttribute('src','../img/facebook.jpg');
44+
}
45+
46+
function youtube() {
47+
document.getElementById('myImage').setAttribute('src','../img/youtube.jpg');
48+
}
49+
50+
</script>
51+
52+
</html>

‎JS_Completed_Template/04_External_JavaScript/external.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
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+
</head>
9+
10+
<body>
11+
12+
13+
14+
<h2> External JavaScript </h2>
15+
<div id="text-div">
16+
<p id="green-p">This is a Green Color Text</p>
17+
<button onclick="blue();">Change to Blue</button>
18+
<button onclick="red();">Change to Red</button>
19+
</div>
20+
21+
22+
<div id="image-div">
23+
<img src="../img/google.jpg" width="300px" height="200px" id="myImage">
24+
<br>
25+
<button onclick="facebook();">Facebook</button>
26+
<button onclick="youtube();">Youtube</button>
27+
</div>
28+
29+
30+
31+
<!-- External JavaScript JS File -->
32+
<script src="script.js"></script>
33+
34+
</body>
35+
</html>

‎JS_Completed_Template/04_External_JavaScript/script.js‎

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

‎JS_Completed_Template/05_Variable_Declaration/Variables.html‎

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

0 commit comments

Comments
 (0)