Skip to content

Commit bce170d

Browse files
thenaveensaggamthenaveensaggam
committed
added
1 parent ca101f5 commit bce170d

File tree

3 files changed

+159
-0
lines changed

3 files changed

+159
-0
lines changed

‎6PM_BATCH/10_JS_Arrays/10_JS_Arrays.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>JS Arrays</title>
6+
<link rel="stylesheet" href="10_styles.css">
7+
</head>
8+
<body>
9+
10+
<h2>JS Arrays Example</h2>
11+
<div>
12+
<form>
13+
<input type="text" id="item" placeholder="Item here">
14+
<button type="button" id="add-button" onclick="addItem()">Add Item</button>
15+
<button type="button" id="rem-button" onclick="deleteItem()">Remove Item</button>
16+
</form>
17+
<h1 id="display"></h1>
18+
</div>
19+
20+
<script src="10_script.js"></script>
21+
</body>
22+
</html>

‎6PM_BATCH/10_JS_Arrays/10_script.js‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
// creation of arrays
2+
var array = [10,20,30,40,50];
3+
4+
// Accessing an array and its properties
5+
console.log(array);
6+
console.log(array[0]); // 10
7+
8+
// Access not existed property from an array
9+
console.log(array[100]); // undefined
10+
11+
// adding properties to an array
12+
array[5] = 60;
13+
console.log(array);
14+
15+
// Accessing length of an Array
16+
console.log('Length of the array is : ' + array.length);
17+
18+
// reverse the array using reverse()
19+
array = [10,20,30,40,50];
20+
console.log('Before : ' + array.join());
21+
array.reverse();
22+
console.log('After : ' + array.join());
23+
24+
// Remove the first value of the array: shift()
25+
array = [10,20,30,40,50];
26+
console.log('Before : ' + array.join());
27+
array.shift();
28+
console.log('After : ' + array.join());
29+
30+
// Add value to front of the array:unshift()
31+
array = [10,20,30,40,50];
32+
console.log('Before : ' + array.join());
33+
array.unshift(60);
34+
console.log('After : ' + array.join());
35+
36+
// Remove the last value of the array: pop()
37+
array = [10,20,30,40,50];
38+
console.log('Before : ' + array.join());
39+
array.pop();
40+
console.log('After : ' + array.join());
41+
42+
// Add value the end of the array: push()
43+
array = [10,20,30,40,50];
44+
console.log('Before : ' + array.join());
45+
array.push(60);
46+
console.log('After : ' + array.join());
47+
48+
// Remove an element from an Array , Arguments: colors.splice(pos,n):
49+
array = [10,20,30,40,50];
50+
console.log('Before : ' + array.join());
51+
array.splice(1,1); // removes 20
52+
console.log('After : ' + array.join());
53+
54+
// Create a copy of an array. Typically assigned to a new variable:slice();
55+
var array1 = [10,20,30,40,50];
56+
var array2 = array1.slice(); // create a separate copy
57+
if(array1 === array2){
58+
console.log('Both are Equal');
59+
}
60+
else{
61+
console.log('Both are NOT Equal');
62+
}
63+
64+
// indexOf()
65+
array = [10,20,30,40,50];
66+
var num = 200;
67+
if(array.indexOf(num) === -1){
68+
console.log('The value is not Exists');
69+
}
70+
else{
71+
console.log('The value exists @ index : '
72+
+ array.indexOf(num));
73+
}
74+
75+
// Join()
76+
array = [10,20,30,40,50];
77+
var strArray = array.join(" - ");
78+
console.log(strArray);
79+
80+
// Prove an array is an Object
81+
82+
// Logic for the Application
83+
var itemsArray = [];
84+
var h1Element = document.querySelector('#display');
85+
function addItem() {
86+
var item = document.querySelector('#item').value;
87+
if(itemsArray.indexOf(item) === -1){
88+
itemsArray.push(item);
89+
}
90+
else{
91+
alert('Dude!! the Item already Exists!!');
92+
document.querySelector('#item').value = '';
93+
}
94+
document.querySelector('#item').value = '';
95+
h1Element.textContent = itemsArray.join(" , ");
96+
}
97+
function deleteItem() {
98+
var item = document.querySelector('#item').value;
99+
itemsArray.splice(itemsArray.indexOf(item),1);
100+
document.querySelector('#item').value = '';
101+
h1Element.textContent = itemsArray.join(" , ");
102+
}
103+
104+
105+
// MDN documentation for Array:
106+
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

‎6PM_BATCH/10_JS_Arrays/10_styles.css‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
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+
div{
11+
background-color: orange;
12+
padding: 10px;
13+
text-align: center;
14+
}
15+
input[type='text']{
16+
font-size: 18px;
17+
height: 35px;
18+
outline: none;
19+
border: 2px solid white;
20+
}
21+
button{
22+
font-size: 18px;
23+
padding: 10px 25px;
24+
color: white;
25+
}
26+
#add-button{
27+
background-color: forestgreen;
28+
}
29+
#rem-button{
30+
background-color: red;
31+
}

0 commit comments

Comments
 (0)