{"mappings":"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","sources":["src/resources/js/main.js"],"sourcesContent":["\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n    setTimeout(() => { jsDomFunction() }, 2000);\n});\n\nfunction jsApiFunction() {\n    createStyles();\n\n    let main = document.getElementsByTagName('main')[0];\n    \n    let section = document.createElement('section');\n    section.id = 'dynamic-content';\n    section.className = 'dynamic-content';\n    section.innerHTML = `\n        <table id=\"dynamic-table\" class='dynamic-table'>\n            <tr style=\"{border: 1px solid black}\">\n                <th>Name</th>\n                <th>Gender</th>\n                <th>Hair</th>\n                <th>Eyes</th>\n            </tr>\n        </table>\n    `;    \n    main.prepend(section);\n\n    promiseWait(1).then(async () => {\n        const apiUrl = 'https://swapi.dev/api/people/';\n        \n        try {\n            showLoader('dynamic-table');\n            let fetchPromise = await fetch(apiUrl);\n            if (!fetchPromise.ok) {\n                throw Error(fetchPromise.status + \": \" + fetchPromise.statusText);\n            }\n\n            let json = await fetchPromise.json();\n            hideLoader('dynamic-table');\n\n            json.results.map((person) => {\n                addPersonToTable(person);\n            });\n        } catch (e) {\n            let p = document.createElement('p');\n            p.innerText = e;\n            section.append(p);\n            hideLoader('dynamic-table');\n        }\n    });\n\n    function createStyles() {\n        let style = document.createElement('style');\n        style.type = 'text/css';\n        style.innerHTML = `\n                        .dynamic-table { margin-left: 30px; }    \n                        .dynamic-content > table, tr, th, td { border: 1px solid black; }\n                        `;\n\n        document.getElementsByTagName('head')[0].appendChild(style);\n    }\n\n    function promiseWait(seconds) {\n        let promise = new Promise((resolve,reject) => {\n            setTimeout(() => { resolve() }, seconds * 1000);\n        });\n        \n        return promise;\n    }\n\n    function addPersonToTable(person) {\n        let table = document.getElementById('dynamic-table');\n        let tr = document.createElement('tr');\n        tr.innerHTML = `\n                        <td>${person.name}</td>\n                        <td>${person.gender}</td>\n                        <td>${person.hair_color}</td>\n                        <td>${person.eye_color}</td>\n                        `;\n        table.append(tr);\n    }\n\n    function showLoader(nodeIdToAppend) {\n        let node = document.getElementById(nodeIdToAppend);\n        \n        let loader = document.createElement('span');\n        loader.id = nodeIdToAppend + '-loader';\n        loader.className = 'loader';\n        node.append(loader);\n    }\n\n    function hideLoader(nodeId) {\n        let loader = document.getElementById(nodeId + '-loader');\n        loader.remove();\n    } \n\n}\n\n\nfunction jsDomFunction() {\n    createStyles();\n\n    let main = document.getElementsByTagName('main')[0];\n    \n    let section = document.createElement('section');\n    section.id = 'dynamic-content';\n    section.className = 'dynamic-content';\n    section.innerHTML = `\n                        <ul id=\"dynamic-list\" class='dynamic-list' style=\"{display: 'block'}\">\n                            <li class=\"dynamic-list-li\">Initial LI - No Click</li>\n                        </ul>\n                    `;\n    \n    main.prepend(section);\n\n    let dynamicDiv = document.getElementById('dynamic-content');\n    appendButton(dynamicDiv, 'Add List Item', 'button-add', 'button-add dynamic-list-button', () => { modifyList('dynamic-list', 'dynamic-list-li', 'add'); });\n    appendButton(dynamicDiv, 'Remove List Item', 'button-remove', 'button-remove dynamic-list-button', () => { modifyList('dynamic-list', 'dynamic-list-li', 'remove') });\n    \n    // #region Helper Functions\n    \n    function createStyles() {\n        let style = document.createElement('style');\n        style.type = 'text/css';\n        style.innerHTML = `\n                            .dynamic-list { margin-left: 30px; }\n                            .dynamic-list-button { margin-left: 30px; height: 50px; }\n                            `;\n\n        document.getElementsByTagName('head')[0].appendChild(style);\n    }\n\n    function appendButton(element, text, id, className, onClickFunction) {\n        let button = document.createElement('button');\n        button.innerText = text;\n        button.id = id;\n        button.className = className;\n        element.append(button);\n\n        document.getElementById(id).addEventListener('click', onClickFunction, true);\n    }\n\n    function modifyList(listId, liClassName, action) {\n        let list = document.getElementById(listId);\n        \n        if (action == 'add') {\n            let listItem = document.createElement('li');\n            listItem.innerText = 'Added LI - Click Me';\n            listItem.className = liClassName;\n            list.append(listItem);\n            listItem.addEventListener('click', () => { \n                document.getElementById('dynamic-list').style.backgroundColor = Math.floor(Math.random()*16777215).toString(16);\n            });\n        }\n        else if (action == 'remove') {\n            let listItems = document.getElementsByClassName(liClassName);\n            if (listItems.length > 0) {\n                listItems[listItems.length-1].remove();\n            }\n        }\n    }\n\n    // #endregion\n\n}\n\n\nfunction jsOneFunction() {    \n    const ARRAY_LENGTH = 5;\n    const MAX_INT = 100;\n\n\n    console.log('START: Generate Random Array');\n    const randomNumbers = generateRandomArray(ARRAY_LENGTH, MAX_INT);\n    printArray(randomNumbers);\n    console.log('END: Generate Random Array');\n    \n    console.log('START: Adding counter to array values');\n    for (let counter = 0; counter < randomNumbers.length; counter++) {\n        randomNumbers[counter] += counter;\n    }\n    console.log('RESULT: Adding counter to array values: ');\n    printArray(randomNumbers);\n    console.log('END: Adding counter to array values');\n    \n    console.log('START: Printing Even or Odd - Stored Array');\n    logIsEvenOrOdd(randomNumbers);\n    console.log('END: Printing Even or Odd - Stored Array');\n    \n    console.log('START: Printing Even or Odd - New Array');\n    logIsEvenOrOdd(generateRandomArray(ARRAY_LENGTH, MAX_INT));\n    console.log('END: Printing Even or Odd - New Array');\n    \n    console.log('START: Manipulate Array');\n    randomNumbers.splice(2, 1);\n    printArray(randomNumbers);\n    \n    randomNumbers.unshift(\"new start\");\n    printArray(randomNumbers);\n    \n    randomNumbers.push(\"new end\");\n    printArray(randomNumbers);\n    console.log('END: Manipulate Array');\n\n    \n    // #region Required Methods\n\n    function logIsEvenOrOdd(numberArray) {\n        let i = 0;\n        while (i < numberArray.length) {\n            if (numberArray[i] % 2 == 0) console.log(`${numberArray[i]} is even`);\n            else console.log(`${numberArray[i]} is odd`);\n            i++;\n        }   \n    }\n\n    // #endregion Required Methods\n\n    // #region Helper Methods\n\n    function generateRandomArray(length, max) {\n        return Array(length).fill().map(() => Math.round(Math.random() * max));\n    }\n\n    function printArray(numbers) {\n        console.log('\\t--Printing Array--');\n        for (let i = 0; i < numbers.length; i++) {\n            console.log(i + ': ' + numbers[i]);\n        }\n        console.log('\\t--End of Array--');\n    }\n    // #endregion Helper Methods\n\n}\n"],"names":["jsApiFunction","style","document","createElement","type","innerHTML","getElementsByTagName","appendChild","createStyles","main","section","seconds","hideLoader","nodeId","getElementById","remove","id","className","prepend","Promise","resolve","reject","setTimeout","then","async","nodeIdToAppend","node","loader","append","showLoader","fetchPromise","fetch","ok","Error","status","statusText","json","results","map","person","table","tr","name","gender","hair_color","eye_color","addPersonToTable","e","p","innerText","jsDomFunction","dynamicDiv","appendButton","element","text","onClickFunction","button","addEventListener","modifyList","listId","liClassName","action","list","listItem","backgroundColor","Math","floor","random","toString","listItems","getElementsByClassName","length","jsOneFunction","console","log","randomNumbers","generateRandomArray","printArray","counter","logIsEvenOrOdd","numberArray","i","max","Array","fill","round","numbers","splice","unshift","push"],"version":3,"file":"index.aa2f5110.js.map"}