diff --git a/arrayIntroduction/array.html b/arrayIntroduction/array.html new file mode 100644 index 0000000..35c2e58 --- /dev/null +++ b/arrayIntroduction/array.html @@ -0,0 +1,513 @@ + + + + + Array + + + + + + + + +
+ +

Array Introduction

+ +
+
+ +
+
+ +
+ + +
+

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

+
+ + +
+
+

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']
+ fruitsStr = fruits.join(',')
+ console.log(typeof(fruitsStr))
+ //string + +
+
+
+
+
+ +
+ +
+
+
+ + +
+
+
+

+
+
+
+
+
+
+
+ + +
+
+

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 + fruits = ['Apple', 'Orange', 'Kiwi', 'Mango', 'Banana']
+ console.log(fruits[fruits.length-1])
+ //Banana + +
+
+
+
+ Enter your array here...
+ +
+ +
+
+
+ + +
+
+
+

+
+
+
+
+
+
+
+ + +
+
+

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 + fruits = ['Apple', 'Orange', 'Kiwi', 'Mango', 'Banana']
+ fruits.push('Pineapple')
+ console.log(fruits)
+ // expected output: [ 'Apple', 'Orange', 'Kiwi', 'Mango', 'Banana', 'Pineapple' + ] + +
+
+
+
+ Enter your array here...
+
+
+
+
+
Push Element(s):
+
+ +
+
+
+
+
+ +
+
+
+ + +
+
+
+

+
+
+
+
+
+
+
+ + +
+
+

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 + fruits = ['Apple', 'Orange', 'Kiwi', 'Mango', 'Banana']
+ fruits.pop()
+ console.log(fruits)
+ // expected output: [ 'Apple', 'Orange', 'Kiwi', 'Mango' ] + +
+
+
+
+ Enter your array here...
+ +
+ +
+
+
+ + +
+
+
+

+
+
+
+
+
+
+
+ + +
+
+

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 + fruits = ['Apple', 'Orange', 'Kiwi', 'Mango', 'Banana']
+ fruits.unshift('Pineapple')
+ console.log(fruits)
+ // expected output: [ 'Pineapple', 'Apple', 'Orange', 'Kiwi', 'Mango', 'Banana' + ] + +
+
+
+
+ Enter your array here...
+
+
+
+
+
Unshift Element(s):
+
+ +
+
+
+
+
+ +
+
+
+ + +
+
+
+

+
+
+
+
+
+
+
+ + +
+
+

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 + fruits = ['Apple', 'Orange', 'Kiwi', 'Mango', 'Banana']
+ fruits.splice(2, 1,'Cherry')
+ console.log(fruits)
+ // expected output: [ 'Apple', 'Orange', 'Cherry', 'Mango', 'Banana' ] + +
+
+
+
+ Enter your array here...
+
+
+
+
+
Start:
+
+ +
+
+
+
Delete Count:
+
+ +
+
+
+
Element(s):
+
+ +
+
+
+
+
+ +
+
+
+ + +
+
+
+

+
+
+
+
+
+
+
+ + +
+
+

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 + fruits = ['Apple', 'Orange', 'Kiwi', 'Mango', 'Banana']
+ fruits.shift()
+ console.log(fruits)
+ // expected output: [ 'Orange', 'Kiwi', 'Mango', 'Banana' ] + +
+
+
+
+ Enter your array here...
+ +
+ +
+
+
+ + +
+
+
+

+
+
+
+
+
+
+
+ + +
+
+

Array.prptotype.sort()

+
+
+ The sort() method sorts the elements of an array in place and returns the sorted array. The + default sort order is ascending, built upon converting the elements into strings, then comparing their + sequences of UTF-16 code units values. +
+
+ + var + fruits = ['Apple', 'Orange', 'Kiwi', 'Mango', 'Banana']
+ console.log(fruits.sort())
+ // expected output: [ 'Apple', 'Banana', 'Kiwi', 'Mango', 'Orange' ] + +
+
+
+
+ Enter your array here...
+ +
+ +
+
+
+ + +
+
+
+

+
+
+
+
+
+
+
+ + +
+
+

Array.prptotype.reverse()

+
+
+ The reverse() method reverses an array in place. The first array element becomes the last, and + the last array element becomes the first. +
+
+ + var + fruits = ['Apple', 'Orange', 'Kiwi', 'Mango', 'Banana']
+ console.log(fruits.reverse())
+ // expected output: [ 'Banana', 'Mango', 'Kiwi', 'Orange', 'Apple' ] + +
+
+
+
+ Enter your array here...
+ +
+ +
+
+
+ + +
+
+
+

+
+
+
+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/arrayIntroduction/script.js b/arrayIntroduction/script.js new file mode 100644 index 0000000..0315687 --- /dev/null +++ b/arrayIntroduction/script.js @@ -0,0 +1,217 @@ +function getPageContent(page) { + const targetDiv = document.getElementById(page); + + const container = document.querySelector(".container"); + //Stores all children of
(line no. 72) in form of array + const containerChildren = Array.from(container.children); + + //calls function setDisplayToNone() with containerChildren as parameter + containerChildren.forEach(setDisplayToNone); + + if (targetDiv.style.display !== "none") { + targetDiv.style.display = "block"; + } else { + resetValue(); + targetDiv.style.display = "block"; + } +} + +//This function set display property to none .element{display: none} +function setDisplayToNone(element) { + element.style.display = "none"; +} + +function getStringOutput() { + try { + var form = document.getElementById("formString"); + //prevents page from refreshing after clicking submit button + preventRefresh(form); + + //takes input as string from user + var input = document + .getElementById("arrayValue1") + .value.replaceAll("'", '"'); //replace single quote with double quote + + //JSON.parse() does not allow single quotes + //JSON.parse() method converts string to object(array here) + var array = JSON.parse(input); + arrayStr = array.join(","); + document.getElementById("output1").innerHTML = typeof arrayStr; + } catch { + alert("Please enter valid input!"); + } +} + +function getLastElementOutput() { + try { + var form = document.getElementById("formLastElement"); + preventRefresh(form); + var input = document + .getElementById("arrayValue2") + .value.replaceAll("'", '"'); + var array = JSON.parse(input); + document.getElementById("output2").innerHTML = array[array.length - 1]; + } catch { + alert("Please enter valid input!"); + } +} + +function getPushOutput() { + try { + var form = document.getElementById("formPush"); + preventRefresh(form); + 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); + + //array = [1,2,3,[4,5]] after reduce flattenedArray = [1,2,3,4,5] + var flattenedArray = array.reduce((a, b) => a.concat(b), []); + document.getElementById("output3").innerHTML = + JSON.stringify(flattenedArray); + } catch { + alert("Please enter valid input!"); + } +} + +function getPopOutput() { + try { + var form = document.getElementById("formPop"); + preventRefresh(form); + var input = document + .getElementById("arrayValue4") + .value.replaceAll("'", '"'); + var array = JSON.parse(input); + + array.pop(); + document.getElementById("output4").innerHTML = JSON.stringify(array); + } catch { + alert("Please enter valid input!"); + } +} + +function getUnshiftOutput() { + try { + var form = document.getElementById("formUnshift"); + preventRefresh(form); + 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); + } catch { + alert("Please enter valid input!"); + } +} + +function getSpliceOutput() { + try { + var form = document.getElementById("formSplice"); + preventRefresh(form); + 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("'", '"'); + if (elementValue) { + var elementValue = JSON.parse(elementValue); + } + if (startValue && deleteCountValue && elementValue) { + array.splice(startValue, deleteCountValue, elementValue); + } else if (startValue && deleteCountValue) { + array.splice(startValue, deleteCountValue); + } else { + array.splice(startValue); + } + var flattenedArray = array.reduce((a, b) => a.concat(b), []); + document.getElementById("output6").innerHTML = + JSON.stringify(flattenedArray); + } catch { + alert("Please enter valid input!"); + } +} + +function getShiftOutput() { + try { + var form = document.getElementById("formShift"); + preventRefresh(form); + var input = document + .getElementById("arrayValue7") + .value.replaceAll("'", '"'); + var array = JSON.parse(input); + + array.shift(); + document.getElementById("output7").innerHTML = JSON.stringify(array); + } catch { + alert("Please enter valid input!"); + } +} + +function getSortOutput() { + try { + var form = document.getElementById("formSort"); + preventRefresh(form); + var input = document + .getElementById("arrayValue8") + .value.replaceAll("'", '"'); + var array = JSON.parse(input); + + array.sort(); + document.getElementById("output8").innerHTML = JSON.stringify(array); + } catch { + alert("Please enter valid input!"); + } +} + +function getReverseOutput() { + try { + var form = document.getElementById("formReverse"); + preventRefresh(form); + var input = document + .getElementById("arrayValue9") + .value.replaceAll("'", '"'); + var array = JSON.parse(input); + + array.reverse(); + document.getElementById("output9").innerHTML = JSON.stringify(array); + } catch { + alert("Please enter valid input!"); + } +} + +function resetValue() { + var arrayValue = Array.from(document.getElementsByClassName("array-input")); + var output = Array.from(document.getElementsByClassName("output")); + var secondaryInput = Array.from( + document.getElementsByClassName("secondary-input") + ); + arrayValue.forEach((a) => (a.value = "")); + output.forEach((a) => (a.innerHTML = "")); + secondaryInput.forEach((a) => (a.value = "")); +} + +function preventRefresh(form) { + form.addEventListener("submit", (e) => { + e.preventDefault(); + }); +} \ No newline at end of file diff --git a/arrayIntroduction/style.css b/arrayIntroduction/style.css new file mode 100644 index 0000000..4e95e3d --- /dev/null +++ b/arrayIntroduction/style.css @@ -0,0 +1,182 @@ +* { + margin: 0; + padding: 0; + text-decoration: none; + list-style: none; + overflow-x: hidden; + overflow-y: auto; +} + +.header { + background-color: rgb(1, 122, 122); + color: white; + border-bottom: 1px solid white; +} + +.header-span { + font-family: "Lato", sans-serif; + transition: 0.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; + color: white; +} + +.sidebar { + position: fixed; + margin-top: 0px; + left: 0; + width: 250px; + height: 459px; + overflow-y: hidden; + background-color: darkcyan; +} + +.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: 0.3s ease; +} + +ul li:hover a { + padding-left: 70px; + background-color: rgb(0, 161, 161); +} + +section { + margin-left: 250px; +} + +#intro { + display: block; +} + +.intro { + margin: 20px 50px; + font-size: larger; + font-family: "Aleo", serif; +} + +#content { + margin: 20px 30px; +} + +.header-inner { + font-family: "Lato", serif; + margin: 10px 0px; +} + +.about { + text-align: justify; + width: 93%; + margin-right: auto; +} + +.code { + border: 1px solid #cfcfd8; + width: 93%; + padding: 10px; + line-height: 1.5; + margin-right: auto; +} + +code { + color: black; + margin-inline: 3px; +} + +.keyword { + color: #0070a3; +} + +.string { + color: #5e8e01; +} + +.function { + color: #dd4a68; +} + +.comment { + color: #666666; +} + +.input-output-container { + width: 93%; +} + +.main-content { + display: none; +} + +.secondary-input { + padding: 5px 6px !important; +} + +input[type="text"], +input[type="number"] { + 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-box { + 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; +}