Wed Apr 26 2023

Array Methods

File Name: javascript-array-methods.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        section {
            display: flex;
            gap: 10;
            justify-content: space-between;
        }

        section div.col {
            width: calc(100% / 3);
        }

        section div.col > div {
            margin: 10px 0;
        }

        button { margin-bottom: 10px; }
    </style>
    <script>
        let num1 = [25, 45, 81, 64, 10, 46, 89, 49];
        let num2 = [22, 40, 78, 62];

        const addEnd = () => {
            /* Add Item at End of the Array */
            num1.push(50);
            document.getElementById('add1').innerHTML = "Add at the end; " + num1;
        }

        const addBeginning  = () => {
            /* Add Item at Beginning of the Array */
            num2.unshift(79)
            document.getElementById('add2').innerHTML = "Add at the beginning: "+ num2;
        }


        const removeEnd = () => {
            /* Remove Item from the End of the Array */
            num2.pop();
            document.getElementById('remove1').innerHTML = "Remove from the end; " + num2;
        }

        const rmvBeginning = () => {
            /* Remove Item from the Beginning of the Array */
            num1.shift();
            document.getElementById('remove2').innerHTML = "Remove from the beginning: "+ num1;
        }

        const rmvItem  = () => {
            /* Remove two Item from the beginning and create a new Array */
            const newNum = num1.slice(2);
            document.getElementById('remove3').innerHTML = "Remove two item from beginning: "+ newNum;
        }

        const rmvAnyWhere = () => {
            /* Remove 1 item from the posting 2 */
            num2.splice(1,1);
            document.getElementById('remove4').innerHTML = "Remove from the position 2: " + num2;
        }

        const mergeArray = () => {
            /* Merge Two Array in One */
            const newNum = num1.concat(num2);
            document.getElementById('merge').innerHTML = "Merge Two Array: " + newNum;
            document.getElementById("length").innerHTML = "Array Length: "+ newNum.length;
            /* Get Length of the Array */

        }
    </script>
</head>
<body>
    <section>
        <div class="col">
            <h3>Add Item</h3>
            <button type="button" onclick="addEnd()">End</button>
            <button type="button" onclick="addBeginning()">Beginning</button>
            <div id="add1"></div>
            <div id="add2"></div>
        </div>
        <div class="col">
            <h3>Remove Item</h3>
            <button type="button" onclick="removeEnd()">End</button>
            <button type="button" onclick="rmvBeginning()">Beginning</button>
            <button type="button" onclick="rmvItem()">2 Beginning Item</button>
            <button type="button" onclick="rmvAnyWhere()">Position 2</button>
            <div id="remove1"></div>
            <div id="remove2"></div>
            <div id="remove3"></div>
            <div id="remove4"></div>

        </div>
        <div class="col">
            <h3>Merge Array</h3>
            <button type="button" onclick="mergeArray()">Merge</button>
            <div id="merge"></div>
            <div id="length"></div>
        </div>
    </section>
</body>
</html>
Result Screenshot(s)

Author:Geekboots