From 63aad9b2982fcdda0f0bb42eaa61e9614bc46f8e Mon Sep 17 00:00:00 2001 From: karan Date: Thu, 24 Mar 2022 18:23:03 +0530 Subject: [PATCH 1/5] arrayIntroduction website commit --- arrayIntroduction/array.html | 81 +++++++++++++++++++ arrayIntroduction/last-element.html | 25 ++++++ arrayIntroduction/pop.html | 31 ++++++++ arrayIntroduction/push.html | 27 +++++++ arrayIntroduction/reverse.html | 25 ++++++ arrayIntroduction/script.js | 58 ++++++++++++++ arrayIntroduction/shift.html | 26 +++++++ arrayIntroduction/sort.html | 25 ++++++ arrayIntroduction/splice.html | 26 +++++++ arrayIntroduction/string.html | 26 +++++++ arrayIntroduction/style.css | 116 ++++++++++++++++++++++++++++ arrayIntroduction/unshift.html | 26 +++++++ 12 files changed, 492 insertions(+) create mode 100644 arrayIntroduction/array.html create mode 100644 arrayIntroduction/last-element.html create mode 100644 arrayIntroduction/pop.html create mode 100644 arrayIntroduction/push.html create mode 100644 arrayIntroduction/reverse.html create mode 100644 arrayIntroduction/script.js create mode 100644 arrayIntroduction/shift.html create mode 100644 arrayIntroduction/sort.html create mode 100644 arrayIntroduction/splice.html create mode 100644 arrayIntroduction/string.html create mode 100644 arrayIntroduction/style.css create mode 100644 arrayIntroduction/unshift.html diff --git a/arrayIntroduction/array.html b/arrayIntroduction/array.html new file mode 100644 index 0000000..6a110d0 --- /dev/null +++ b/arrayIntroduction/array.html @@ -0,0 +1,81 @@ + + + + Array + + + + + + + + + + + + +
+

Array Introduction

+
+
+ +
+
+
+

+ Welcome to Array Introduction!
+ This is Single page application build with HTML, CSS, Javasctipt and AJAX. +

+
+
+ + + + \ No newline at end of file diff --git a/arrayIntroduction/last-element.html b/arrayIntroduction/last-element.html new file mode 100644 index 0000000..14d9cfd --- /dev/null +++ b/arrayIntroduction/last-element.html @@ -0,0 +1,25 @@ + + + + + + + + + +
+
+

Last element of the array

+
+
+ + var + fruits = ['Apple', 'Orange', 'Kiwi', 'Mango', 'Banana']
+ console.log(fruits[fruits.length-1])
+ //Banana + +
+
+ + \ No newline at end of file diff --git a/arrayIntroduction/pop.html b/arrayIntroduction/pop.html new file mode 100644 index 0000000..d3bce01 --- /dev/null +++ b/arrayIntroduction/pop.html @@ -0,0 +1,31 @@ + + + + + + + + + + + +
+
+

Array.prptotype.pop()

+
+
+ + var + fruits = ['Apple', 'Orange', 'Kiwi', 'Mango', 'Banana']
+ fruits.pop()
+ console.log(fruits)
+ // expected output: [ 'Apple', 'Orange', 'Kiwi', 'Mango' ] + +
+ +
+ + + \ No newline at end of file diff --git a/arrayIntroduction/push.html b/arrayIntroduction/push.html new file mode 100644 index 0000000..0cf49a3 --- /dev/null +++ b/arrayIntroduction/push.html @@ -0,0 +1,27 @@ + + + + + + + + + +
+
+

Array.prptotype.push()

+
+
+ + var + fruits = ['Apple', 'Orange', 'Kiwi', 'Mango', 'Banana']
+ fruits.push('Pineapple')
+ console.log(fruits)
+ // expected output: [ 'Apple', 'Orange', 'Kiwi', 'Mango', 'Banana', 'Pineapple' ] + +
+ +
+ + \ No newline at end of file diff --git a/arrayIntroduction/reverse.html b/arrayIntroduction/reverse.html new file mode 100644 index 0000000..4dc9ab2 --- /dev/null +++ b/arrayIntroduction/reverse.html @@ -0,0 +1,25 @@ + + + + + + + + + +
+
+

Array.prptotype.reverse()

+
+
+ + var + fruits = ['Apple', 'Orange', 'Kiwi', 'Mango', 'Banana']
+ console.log(fruits.reverse())
+ // expected output: [ 'Banana', 'Mango', 'Kiwi', 'Orange', 'Apple' ] + +
+
+ + \ No newline at end of file diff --git a/arrayIntroduction/script.js b/arrayIntroduction/script.js new file mode 100644 index 0000000..b5dd342 --- /dev/null +++ b/arrayIntroduction/script.js @@ -0,0 +1,58 @@ +var pages = { + 'string': 'String page', + 'lastElement': 'Last Element page', + 'push': 'Push page' +} + +function loadPage(href) { + var xmlhttp = new XMLHttpRequest(); + xmlhttp.open("GET", href, false); + xmlhttp.send(); + return xmlhttp.responseText; +} + +function getPageContent(page) { + var content + switch (page) { + case 'string': + content = loadPage('string.html') + break; + + case 'lastElement': + content = loadPage('last-element.html') + break; + + case 'push': + content = loadPage('push.html') + break; + + case 'pop': + content = loadPage('pop.html') + break; + + case 'unshift': + content = loadPage('unshift.html') + break; + + case 'splice': + content = loadPage('splice.html') + break; + + case 'shift': + content = loadPage('shift.html') + break; + + case 'sort': + content = loadPage('sort.html') + break; + + case 'reverse': + content = loadPage('reverse.html') + break; + + default: + content = loadPage('string.html') + break; + } + document.getElementById('content').innerHTML = content +} \ No newline at end of file diff --git a/arrayIntroduction/shift.html b/arrayIntroduction/shift.html new file mode 100644 index 0000000..c73f0d4 --- /dev/null +++ b/arrayIntroduction/shift.html @@ -0,0 +1,26 @@ + + + + + + + + + +
+
+

Array.prptotype.shift()

+
+
+ + var + fruits = ['Apple', 'Orange', 'Kiwi', 'Mango', 'Banana']
+ fruits.shift()
+ console.log(fruits)
+ // expected output: [ 'Orange', 'Kiwi', 'Mango', 'Banana' ] + +
+
+ + \ No newline at end of file diff --git a/arrayIntroduction/sort.html b/arrayIntroduction/sort.html new file mode 100644 index 0000000..3e980f9 --- /dev/null +++ b/arrayIntroduction/sort.html @@ -0,0 +1,25 @@ + + + + + + + + + +
+
+

Array.prptotype.sort()

+
+
+ + var + fruits = ['Apple', 'Orange', 'Kiwi', 'Mango', 'Banana']
+ console.log(fruits.sort())
+ // expected output: [ 'Apple', 'Banana', 'Kiwi', 'Mango', 'Orange' ] + +
+
+ + \ No newline at end of file diff --git a/arrayIntroduction/splice.html b/arrayIntroduction/splice.html new file mode 100644 index 0000000..62e1046 --- /dev/null +++ b/arrayIntroduction/splice.html @@ -0,0 +1,26 @@ + + + + + + + + + +
+
+

Array.prptotype.splice()

+
+
+ + var + fruits = ['Apple', 'Orange', 'Kiwi', 'Mango', 'Banana']
+ fruits.splice(2, 1,'Cherry')
+ console.log(fruits)
+ // expected output: [ 'Apple', 'Orange', 'Cherry', 'Mango', 'Banana' ] + +
+
+ + \ No newline at end of file diff --git a/arrayIntroduction/string.html b/arrayIntroduction/string.html new file mode 100644 index 0000000..fc2acb7 --- /dev/null +++ b/arrayIntroduction/string.html @@ -0,0 +1,26 @@ + + + + + + + + + +
+
+

Convert array to string

+
+
+ + var + fruits = ['Apple', 'Orange', 'Kiwi', 'Mango', 'Banana']
+ fruitsStr = fruits.join(',')
+ console.log(typeof(fruitsStr))
+ //string + +
+
+ + \ No newline at end of file diff --git a/arrayIntroduction/style.css b/arrayIntroduction/style.css new file mode 100644 index 0000000..7a8b0d5 --- /dev/null +++ b/arrayIntroduction/style.css @@ -0,0 +1,116 @@ +*{ + margin: 0; + padding: 0; + text-decoration: none; + list-style: none; + overflow-x: hidden; +} + + + +.header{ + background-color: rgb(1, 122, 122); + color: white; +} + +.header-span{ + font-family: 'Lato', sans-serif; + transition: .3s ease; + letter-spacing: 2px; + +} + +.header-span:hover{ + font-size: 45px; + letter-spacing: 5px; +} + +a{ + text-decoration: none; + font-family: 'Aleo', serif; + font-weight: bolder; + +} + +.myLink, .myLink:hover, .myLink:active, .myLink:visited, .myLink:focus { + text-decoration:none; +} + +.sidebar{ + position: fixed; + margin-top: 0px; + left: 0; + width: 250px; + height: 100%; + background-color: darkcyan; +} + +.sidebar ul{ + padding: 0px; + margin-top: 5px; +} + +.sidebar ul a{ + display: block; + height: 100%; + width: 100%; + line-height: 50px; + font-size: 16px; + padding-left: 45px; + box-sizing: border-box; + color: white; + border-bottom: 1px solid rgb(203, 214, 223); + transition: .3s ease; +} + +ul li:hover a{ + padding-left: 60px; +} + +section{ + margin-left: 250px; +} + +.intro{ + margin: 20px 50px; + font-size: larger; + font-family: 'Aleo', serif; +} + +#content{ + margin: 20px 30px; +} + +.header-inner{ + font-family: 'Lato', serif; + margin: 10px 0px; +} + +.code{ + border: 1px solid rgba(0, 0, 0, .2); + width: 93%; + padding: 10px; + line-height: 1.5; + display: block; + margin-right: auto; +} + +code{ + color: black; +} + +.keyword{ + color: #0070a3; +} + +.string{ + color: #5E8E01; +} + +.function{ + color: #dd4a68; +} + +.comment{ + color: #666666; +} \ No newline at end of file diff --git a/arrayIntroduction/unshift.html b/arrayIntroduction/unshift.html new file mode 100644 index 0000000..31dfa26 --- /dev/null +++ b/arrayIntroduction/unshift.html @@ -0,0 +1,26 @@ + + + + + + + + + +
+
+

Array.prptotype.unshift()

+
+
+ + var + fruits = ['Apple', 'Orange', 'Kiwi', 'Mango', 'Banana']
+ fruits.unshift('Pineapple')
+ console.log(fruits)
+ // expected output: [ 'Pineapple', 'Apple', 'Orange', 'Kiwi', 'Mango', 'Banana' ] + +
+
+ + \ No newline at end of file From df47e0489d7e6b1de23369183ef9b12246efbdd6 Mon Sep 17 00:00:00 2001 From: karan Date: Tue, 29 Mar 2022 11:51:49 +0530 Subject: [PATCH 2/5] Combined all html in one file --- arrayIntroduction/array.html | 286 +++++++++++++++++++++------- arrayIntroduction/last-element.html | 25 --- arrayIntroduction/pop.html | 31 --- arrayIntroduction/push.html | 27 --- arrayIntroduction/reverse.html | 25 --- arrayIntroduction/script.js | 70 ++----- arrayIntroduction/shift.html | 26 --- arrayIntroduction/sort.html | 25 --- arrayIntroduction/splice.html | 26 --- arrayIntroduction/string.html | 26 --- arrayIntroduction/style.css | 156 +++++++-------- arrayIntroduction/unshift.html | 26 --- 12 files changed, 309 insertions(+), 440 deletions(-) delete mode 100644 arrayIntroduction/last-element.html delete mode 100644 arrayIntroduction/pop.html delete mode 100644 arrayIntroduction/push.html delete mode 100644 arrayIntroduction/reverse.html delete mode 100644 arrayIntroduction/shift.html delete mode 100644 arrayIntroduction/sort.html delete mode 100644 arrayIntroduction/splice.html delete mode 100644 arrayIntroduction/string.html delete mode 100644 arrayIntroduction/unshift.html diff --git a/arrayIntroduction/array.html b/arrayIntroduction/array.html index 6a110d0..86bad46 100644 --- a/arrayIntroduction/array.html +++ b/arrayIntroduction/array.html @@ -1,81 +1,227 @@ - Array - - - - - - - + Array + + + + - -
-

Array Introduction

-
-
- +
+ +

Array Introduction

+ +
+
+ +
+
+
+ + +
+

+ Welcome to Array Introduction!
+ This is Single page application build with HTML, CSS, Javasctipt and AJAX. +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
-
-
-

- Welcome to Array Introduction!
- This is Single page application build with HTML, CSS, Javasctipt and AJAX. -

-
-
- +
+ \ No newline at end of file diff --git a/arrayIntroduction/last-element.html b/arrayIntroduction/last-element.html deleted file mode 100644 index 14d9cfd..0000000 --- a/arrayIntroduction/last-element.html +++ /dev/null @@ -1,25 +0,0 @@ - - - - - - - - - -
-
-

Last element of the array

-
-
- - var - fruits = ['Apple', 'Orange', 'Kiwi', 'Mango', 'Banana']
- console.log(fruits[fruits.length-1])
- //Banana - -
-
- - \ No newline at end of file diff --git a/arrayIntroduction/pop.html b/arrayIntroduction/pop.html deleted file mode 100644 index d3bce01..0000000 --- a/arrayIntroduction/pop.html +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - - - - - - -
-
-

Array.prptotype.pop()

-
-
- - var - fruits = ['Apple', 'Orange', 'Kiwi', 'Mango', 'Banana']
- fruits.pop()
- console.log(fruits)
- // expected output: [ 'Apple', 'Orange', 'Kiwi', 'Mango' ] - -
- -
- - - \ No newline at end of file diff --git a/arrayIntroduction/push.html b/arrayIntroduction/push.html deleted file mode 100644 index 0cf49a3..0000000 --- a/arrayIntroduction/push.html +++ /dev/null @@ -1,27 +0,0 @@ - - - - - - - - - -
-
-

Array.prptotype.push()

-
-
- - var - fruits = ['Apple', 'Orange', 'Kiwi', 'Mango', 'Banana']
- fruits.push('Pineapple')
- console.log(fruits)
- // expected output: [ 'Apple', 'Orange', 'Kiwi', 'Mango', 'Banana', 'Pineapple' ] - -
- -
- - \ No newline at end of file diff --git a/arrayIntroduction/reverse.html b/arrayIntroduction/reverse.html deleted file mode 100644 index 4dc9ab2..0000000 --- a/arrayIntroduction/reverse.html +++ /dev/null @@ -1,25 +0,0 @@ - - - - - - - - - -
-
-

Array.prptotype.reverse()

-
-
- - var - fruits = ['Apple', 'Orange', 'Kiwi', 'Mango', 'Banana']
- console.log(fruits.reverse())
- // expected output: [ 'Banana', 'Mango', 'Kiwi', 'Orange', 'Apple' ] - -
-
- - \ No newline at end of file diff --git a/arrayIntroduction/script.js b/arrayIntroduction/script.js index b5dd342..e112b11 100644 --- a/arrayIntroduction/script.js +++ b/arrayIntroduction/script.js @@ -1,58 +1,16 @@ -var pages = { - 'string': 'String page', - 'lastElement': 'Last Element page', - 'push': 'Push page' -} - -function loadPage(href) { - var xmlhttp = new XMLHttpRequest(); - xmlhttp.open("GET", href, false); - xmlhttp.send(); - return xmlhttp.responseText; -} - -function getPageContent(page) { - var content - switch (page) { - case 'string': - content = loadPage('string.html') - break; - - case 'lastElement': - content = loadPage('last-element.html') - break; - - case 'push': - content = loadPage('push.html') - break; - - case 'pop': - content = loadPage('pop.html') - break; - - case 'unshift': - content = loadPage('unshift.html') - break; - - case 'splice': - content = loadPage('splice.html') - break; - - case 'shift': - content = loadPage('shift.html') - break; - - case 'sort': - content = loadPage('sort.html') - break; - - case 'reverse': - content = loadPage('reverse.html') - break; +function getPageContent(page){ + const targetDiv = document.getElementById(page) + let childLength = document.getElementById('content').children.length + + for(i=3;i - - - - - - - - -
-
-

Array.prptotype.shift()

-
-
- - var - fruits = ['Apple', 'Orange', 'Kiwi', 'Mango', 'Banana']
- fruits.shift()
- console.log(fruits)
- // expected output: [ 'Orange', 'Kiwi', 'Mango', 'Banana' ] - -
-
- - \ No newline at end of file diff --git a/arrayIntroduction/sort.html b/arrayIntroduction/sort.html deleted file mode 100644 index 3e980f9..0000000 --- a/arrayIntroduction/sort.html +++ /dev/null @@ -1,25 +0,0 @@ - - - - - - - - - -
-
-

Array.prptotype.sort()

-
-
- - var - fruits = ['Apple', 'Orange', 'Kiwi', 'Mango', 'Banana']
- console.log(fruits.sort())
- // expected output: [ 'Apple', 'Banana', 'Kiwi', 'Mango', 'Orange' ] - -
-
- - \ No newline at end of file diff --git a/arrayIntroduction/splice.html b/arrayIntroduction/splice.html deleted file mode 100644 index 62e1046..0000000 --- a/arrayIntroduction/splice.html +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - - - -
-
-

Array.prptotype.splice()

-
-
- - var - fruits = ['Apple', 'Orange', 'Kiwi', 'Mango', 'Banana']
- fruits.splice(2, 1,'Cherry')
- console.log(fruits)
- // expected output: [ 'Apple', 'Orange', 'Cherry', 'Mango', 'Banana' ] - -
-
- - \ No newline at end of file diff --git a/arrayIntroduction/string.html b/arrayIntroduction/string.html deleted file mode 100644 index fc2acb7..0000000 --- a/arrayIntroduction/string.html +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - - - -
-
-

Convert array to string

-
-
- - var - fruits = ['Apple', 'Orange', 'Kiwi', 'Mango', 'Banana']
- fruitsStr = fruits.join(',')
- console.log(typeof(fruitsStr))
- //string - -
-
- - \ No newline at end of file diff --git a/arrayIntroduction/style.css b/arrayIntroduction/style.css index 7a8b0d5..71d8f65 100644 --- a/arrayIntroduction/style.css +++ b/arrayIntroduction/style.css @@ -1,116 +1,118 @@ -*{ - margin: 0; - padding: 0; - text-decoration: none; - list-style: none; - overflow-x: hidden; +* { + margin: 0; + padding: 0; + text-decoration: none; + list-style: none; + overflow-x: hidden; } - - -.header{ - background-color: rgb(1, 122, 122); - color: white; +.header { + background-color: rgb(1, 122, 122); + color: white; + border-bottom: 1px solid white; } -.header-span{ - font-family: 'Lato', sans-serif; - transition: .3s ease; - letter-spacing: 2px; - +.header-span { + font-family: "Lato", sans-serif; + transition: 0.3s ease; + letter-spacing: 2px; } -.header-span:hover{ - font-size: 45px; - letter-spacing: 5px; +.header-span:hover { + font-size: 45px; + letter-spacing: 5px; } -a{ - text-decoration: none; - font-family: 'Aleo', serif; - font-weight: bolder; - +a { + text-decoration: none; + font-family: "Aleo", serif; + font-weight: bolder; } -.myLink, .myLink:hover, .myLink:active, .myLink:visited, .myLink:focus { - text-decoration:none; +.myLink, +.myLink:hover, +.myLink:active, +.myLink:visited, +.myLink:focus { + text-decoration: none; + color: white; } -.sidebar{ - position: fixed; - margin-top: 0px; - left: 0; - width: 250px; - height: 100%; - background-color: darkcyan; +.sidebar { + position: fixed; + margin-top: 0px; + left: 0; + width: 250px; + height: 100%; + background-color: darkcyan; } -.sidebar ul{ - padding: 0px; - margin-top: 5px; +.sidebar ul { + padding: 0px; } -.sidebar ul a{ - display: block; - height: 100%; - width: 100%; - line-height: 50px; - font-size: 16px; - padding-left: 45px; - box-sizing: border-box; - color: white; - border-bottom: 1px solid rgb(203, 214, 223); - transition: .3s ease; +.sidebar ul a { + display: block; + height: 100%; + width: 100%; + line-height: 50px; + font-size: 16px; + padding-left: 45px; + box-sizing: border-box; + color: white; + border-bottom: 1px solid rgb(203, 214, 223); + transition: 0.3s ease; } -ul li:hover a{ - padding-left: 60px; +ul li:hover a { + padding-left: 70px; + background-color: rgb(0, 161, 161); } -section{ - margin-left: 250px; +section { + margin-left: 250px; } -.intro{ - margin: 20px 50px; - font-size: larger; - font-family: 'Aleo', serif; +.intro { + margin: 20px 50px; + font-size: larger; + font-family: "Aleo", serif; } -#content{ - margin: 20px 30px; +#content { + margin: 20px 30px; } -.header-inner{ - font-family: 'Lato', serif; - margin: 10px 0px; +.header-inner { + font-family: "Lato", serif; + margin: 10px 0px; } -.code{ - border: 1px solid rgba(0, 0, 0, .2); - width: 93%; - padding: 10px; - line-height: 1.5; - display: block; - margin-right: auto; +.code { + border: 1px solid rgba(0, 0, 0, 0.2); + width: 93%; + padding: 10px; + line-height: 1.5; + display: block; + margin-right: auto; } -code{ - color: black; +code { + color: black; } -.keyword{ - color: #0070a3; +.keyword { + color: #0070a3; } -.string{ - color: #5E8E01; +.string { + color: #5e8e01; } -.function{ - color: #dd4a68; +.function { + color: #dd4a68; } -.comment{ - color: #666666; +.comment { + color: #666666; } \ No newline at end of file diff --git a/arrayIntroduction/unshift.html b/arrayIntroduction/unshift.html deleted file mode 100644 index 31dfa26..0000000 --- a/arrayIntroduction/unshift.html +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - - - -
-
-

Array.prptotype.unshift()

-
-
- - var - fruits = ['Apple', 'Orange', 'Kiwi', 'Mango', 'Banana']
- fruits.unshift('Pineapple')
- console.log(fruits)
- // expected output: [ 'Pineapple', 'Apple', 'Orange', 'Kiwi', 'Mango', 'Banana' ] - -
-
- - \ No newline at end of file From 4247d58b3ef16eb10a02c356398619ad7578c44f Mon Sep 17 00:00:00 2001 From: karan Date: Tue, 29 Mar 2022 16:58:30 +0530 Subject: [PATCH 3/5] javascript code updated --- arrayIntroduction/script.js | 30 ++++++++++++++++-------------- 1 file changed, 16 insertions(+), 14 deletions(-) diff --git a/arrayIntroduction/script.js b/arrayIntroduction/script.js index e112b11..d8b8d19 100644 --- a/arrayIntroduction/script.js +++ b/arrayIntroduction/script.js @@ -1,16 +1,18 @@ -function getPageContent(page){ - const targetDiv = document.getElementById(page) - let childLength = document.getElementById('content').children.length +function getPageContent(page) { + const targetDiv = document.getElementById(page) + const container = document.querySelector('.container') + const containerChildren = Array.from(container.children) + containerChildren.forEach(checkForBlock) - for(i=3;i Date: Thu, 31 Mar 2022 12:39:16 +0530 Subject: [PATCH 4/5] User Input feature added --- arrayIntroduction/array.html | 286 ++++++++++++++++++++++++++++++++++- arrayIntroduction/script.js | 98 +++++++++++- arrayIntroduction/style.css | 63 +++++++- 3 files changed, 434 insertions(+), 13 deletions(-) diff --git a/arrayIntroduction/array.html b/arrayIntroduction/array.html index 86bad46..c59df78 100644 --- a/arrayIntroduction/array.html +++ b/arrayIntroduction/array.html @@ -1,4 +1,5 @@ + Array @@ -17,7 +18,7 @@

Array Introduction

-
+
+
@@ -82,7 +84,13 @@

Convert array to string

-
+
+ The join() method creates and returns a new string by concatenating all of the elements in an + array (or an + array-like object), separated by commas or a specified separator string. If the array has only one item, then + that item will be returned without using the separator. +
+
var fruits = ['Apple', 'Orange', 'Kiwi', 'Mango', 'Banana']
@@ -91,6 +99,27 @@ //string
+
+
+ Enter your array here...
+ +
+
+
+
+
+ + +
+
+
+

+
+
+
+
+
+
@@ -98,6 +127,10 @@

Last element of the array

+
+ The length property returns the number of elements in an array. Subtracting 1 from the length of an array + gives the index of the last element of an array using which the last element can be accessed. +
var @@ -106,6 +139,27 @@ //Banana
+
+
+ Enter your array here...
+ +
+
+
+
+
+ + +
+
+
+

+
+
+
+
+
+
@@ -113,6 +167,11 @@

Array.prptotype.push()

+
+ The push() method adds one or more elements to the end of an array and returns the new + length of + the array. +
var @@ -123,6 +182,38 @@ ]
+
+
+ Enter your array here...
+
+
+
+
+
Push Element(s):
+
+ +
+
+
+
+
+
+
+
+
+ + +
+
+
+

+
+
+
+
+
+
@@ -130,6 +221,11 @@

Array.prptotype.pop()

+
+ The pop() method removes the last element from an array and returns that element. This method + changes the + length of the array. +
var @@ -139,6 +235,27 @@ // expected output: [ 'Apple', 'Orange', 'Kiwi', 'Mango' ]
+
+
+ Enter your array here...
+ +
+
+
+
+
+ + +
+
+
+

+
+
+
+
+
+
@@ -146,6 +263,10 @@

Array.prptotype.unshift()

+
+ The unshift() method adds one or more elements to the beginning of an array and returns the new + length of the array. +
var @@ -156,6 +277,38 @@ ]
+
+
+ Enter your array here...
+
+
+
+
+
Unshift Element(s):
+
+ +
+
+
+
+
+
+
+
+
+ + +
+
+
+

+
+
+
+
+
+
@@ -163,6 +316,10 @@

Array.prptotype.splice()

+
+ The splice() method changes the contents of an array by removing or replacing existing elements + and/or adding new elements in place. +
var @@ -172,6 +329,53 @@ // expected output: [ 'Apple', 'Orange', 'Cherry', 'Mango', 'Banana' ]
+
+
+ Enter your array here...
+
+
+
+
+
Start(number):
+
+ +
+
+
+
Delete Count(number):
+
+ +
+
+
+
Element(s):
+
+ +
+
+
+
+
+
+
+
+
+ + +
+
+
+

+
+
+
+
+
+
@@ -179,6 +383,10 @@

Array.prptotype.shift()

+
+ The shift() method removes the first element from an array and returns that removed element. This + method changes the length of the array. +
var @@ -188,13 +396,39 @@ // expected output: [ 'Orange', 'Kiwi', 'Mango', 'Banana' ]
+
+
+ Enter your array here...
+ +
+
+
+
+
+ + +
+
+
+

+
+
+
+
+
+
- diff --git a/arrayIntroduction/script.js b/arrayIntroduction/script.js index d8b8d19..71c8b45 100644 --- a/arrayIntroduction/script.js +++ b/arrayIntroduction/script.js @@ -1,8 +1,8 @@ function getPageContent(page) { - const targetDiv = document.getElementById(page) - const container = document.querySelector('.container') - const containerChildren = Array.from(container.children) - containerChildren.forEach(checkForBlock) + const targetDiv = document.getElementById(page); + const container = document.querySelector(".container"); + const containerChildren = Array.from(container.children); + containerChildren.forEach(checkForBlock); if (targetDiv.style.display !== "none") { targetDiv.style.display = "none"; @@ -12,7 +12,93 @@ function getPageContent(page) { } function checkForBlock(element) { - if (element.style.display === 'block') { - element.style.display = 'none' + if (element.style.display === "block") { + element.style.display = "none"; } +} + +function getStringOutput() { + var input = document.getElementById("arrayValue1").value.replaceAll("'", '"'); + var array = JSON.parse(input); + arrayStr = array.join(","); + document.getElementById("output1").innerHTML = typeof arrayStr; +} + +function getLastElementOutput() { + var input = document.getElementById("arrayValue2").value.replaceAll("'", '"'); + var array = JSON.parse(input); + document.getElementById("output2").innerHTML = array[array.length - 1]; +} + +function getPushOutput() { + var input = document.getElementById("arrayValue3").value.replaceAll("'", '"'); + var array = JSON.parse(input); + var pushElementInput = document + .getElementById("pushElementValue") + .value.replaceAll("'", '"'); + var pushElement = JSON.parse(pushElementInput); + array.push(pushElement); + var flattenedArray = array.reduce((a, b) => a.concat(b), []); + document.getElementById("output3").innerHTML = JSON.stringify(flattenedArray); +} + +function getPopOutput() { + var input = document.getElementById("arrayValue4").value.replaceAll("'", '"'); + var array = JSON.parse(input); + array.pop(); + document.getElementById("output4").innerHTML = JSON.stringify(array); +} + +function getUnshiftOutput() { + var input = document.getElementById("arrayValue5").value.replaceAll("'", '"'); + var array = JSON.parse(input); + var unshiftElementInput = document + .getElementById("unshiftElementValue") + .value.replaceAll("'", '"'); + var unshiftElement = JSON.parse(unshiftElementInput); + array.unshift(unshiftElement); + var flattenedArray = array.reduce((a, b) => a.concat(b), []); + document.getElementById("output5").innerHTML = JSON.stringify(flattenedArray); +} + +function getSpliceOutput() { + var input = document.getElementById("arrayValue6").value.replaceAll("'", '"'); + var array = JSON.parse(input); + var startValue = document.getElementById("startValue").value; + var deleteCountValue = document.getElementById("deleteCountValue").value; + var elementValue = document + .getElementById("elementValue") + .value.replaceAll("'", '"'); + var unshiftElement = JSON.parse(elementValue); + array.splice(startValue, deleteCountValue, unshiftElement); + var flattenedArray = array.reduce((a, b) => a.concat(b), []); + document.getElementById("output6").innerHTML = JSON.stringify(flattenedArray); +} + +function getShiftOutput() { + var input = document.getElementById("arrayValue7").value.replaceAll("'", '"'); + var array = JSON.parse(input); + array.shift(); + document.getElementById("output7").innerHTML = JSON.stringify(array); +} + +function getSortOutput() { + var input = document.getElementById("arrayValue8").value.replaceAll("'", '"'); + var array = JSON.parse(input); + array.sort(); + document.getElementById("output8").innerHTML = JSON.stringify(array); +} + +function getReverseOutput() { + var input = document.getElementById("arrayValue9").value.replaceAll("'", '"'); + var array = JSON.parse(input); + array.reverse(); + document.getElementById("output9").innerHTML = JSON.stringify(array); +} + +function resetValue(flag) { + let arrayValue = "arrayValue" + flag; + let output = "output" + flag; + document.getElementById(arrayValue).value = ""; + document.getElementById(output).innerHTML = ""; } \ No newline at end of file diff --git a/arrayIntroduction/style.css b/arrayIntroduction/style.css index 71d8f65..2a60960 100644 --- a/arrayIntroduction/style.css +++ b/arrayIntroduction/style.css @@ -4,6 +4,7 @@ text-decoration: none; list-style: none; overflow-x: hidden; + overflow-y: auto; } .header { @@ -43,7 +44,8 @@ a { margin-top: 0px; left: 0; width: 250px; - height: 100%; + height: 459px; + overflow-y: hidden; background-color: darkcyan; } @@ -88,17 +90,23 @@ section { margin: 10px 0px; } +.about { + text-align: justify; + width: 93%; + margin-right: auto; +} + .code { - border: 1px solid rgba(0, 0, 0, 0.2); + border: 1px solid #cfcfd8; width: 93%; padding: 10px; line-height: 1.5; - display: block; margin-right: auto; } code { color: black; + margin-inline: 3px; } .keyword { @@ -115,4 +123,51 @@ code { .comment { color: #666666; -} \ No newline at end of file +} + +.input-output { + width: 93%; +} + +.secondaryInput { + padding: 5px 6px !important; +} + +input[type="text"] { + width: 100%; + margin: 8px 0px; + padding: 10px 12px; + color: #5e8e01; + border: 1px solid #cfcfd8; + font-family: var(--bs-font-monospace); +} + +input[type="text"]:hover, +input[type="text"]:focus { + background-color: rgba(0, 0, 0, 0.1); +} + +.button { + display: block; + border: 1px solid #cfcfd8; + padding: 3px 15px; + width: 100%; + font-size: 14px; + font-weight: bold; + border-radius: 5px; +} + +.button:hover { + background-color: rgba(0, 0, 0, 0.1); +} + +.output { + display: block; + border: 1px solid #cfcfd8; + margin-top: 8px; + font-family: var(--bs-font-monospace); + font-size: 14px; + height: 100px; + overflow-y: auto; + padding: 10px 20px; +} From b95730a621c2ba2e5a2a4a31f073fe9425d45497 Mon Sep 17 00:00:00 2001 From: karan Date: Mon, 4 Apr 2022 13:06:23 +0530 Subject: [PATCH 5/5] Commited all files with required changes --- arrayIntroduction/array.html | 296 ++++++++++++++++++----------------- arrayIntroduction/script.js | 239 ++++++++++++++++++++-------- arrayIntroduction/style.css | 17 +- 3 files changed, 340 insertions(+), 212 deletions(-) diff --git a/arrayIntroduction/array.html b/arrayIntroduction/array.html index c59df78..35c2e58 100644 --- a/arrayIntroduction/array.html +++ b/arrayIntroduction/array.html @@ -9,7 +9,7 @@ - + @@ -72,7 +72,7 @@
-
+

Welcome to Array Introduction!
This is Single page application build with HTML, CSS, Javasctipt and AJAX. @@ -80,7 +80,7 @@

-