0% found this document useful (0 votes)
64 views

Topalian JavaScript Filter Functions by Christopher Topalian

Learn how to filter an Array of Objects in many ways with this innovative JavaScript application. Code: https://github.com/ChristopherTopalian/Topalian_JavaScript_Filter_Functions
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
64 views

Topalian JavaScript Filter Functions by Christopher Topalian

Learn how to filter an Array of Objects in many ways with this innovative JavaScript application. Code: https://github.com/ChristopherTopalian/Topalian_JavaScript_Filter_Functions
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 149

Topalian

JavaScript
Filter
Functions
by
Christopher Andrew Topalian
All Rights Reserved
Copyright 2000-2024
Dedicated
to
God the Father
<!-- Dedicated to God the Father -->

<!-- All Rights Reserved Christopher Andrew


Topalian Copyright 2000-2024 -->

<!-- https://github.com/ChristopherTopalian --
>

<!--
https://github.com/ChristopherAndrewTopalia
n -->

<!--
Topalian_JavaScript_Filter_Functions.html --
>

<!-- Version 001 - (2024-05-23) -->


<html>
<head>
<title> Topalian JavaScript Filter Functions
</title>

<link rel = 'stylesheet' href =


'css/style001.css'>

<script src =
'js/1shortcuts/1shortcuts.js'></script>

<script src =
'js/2worldVariables/worldVariables.js'></scrip
t>

<script src = 'js/3data/people.js'></script>


<script src =
'js/3data/theFunctions.js'></script>

<script src = 'js/4filter/showAll.js'></script>

<script src =
'js/4filter/showAllNames.js'></script>

<script src =
'js/4filter/showAllDates.js'></script>

<script src =
'js/4filter/filterBeforeDate.js'></script>

<script src =
'js/4filter/filterAfterDate.js'></script>
<script src =
'js/4filter/filterByName.js'></script>

<script src =
'js/4filter/filterByDate.js'></script>

<script src =
'js/4filter/filterByYear.js'></script>

<script src =
'js/4filter/filterByMonth.js'></script>

<script src =
'js/4filter/filterByYearMonth.js'></script>

<script src =
'js/4filter/filterByMonthDay.js'></script>
<script src =
'js/4filter/filterByDateTime.js'></script>

<script src =
'js/5make/makeMenuLeft.js'></script>

<script src =
'js/5make/makeMenuRight.js'></script>

<script src =
'js/5make/makeInputs.js'></script>

<script src =
'js/5make/makeTitleOfApp.js'></script>

<script src =
'js/5make/makeCenterContainer.js'></script>
<script src = 'js/sound/sounds.js'></script>

<script src =
'js/sound/loadSounds.js'></script>

<script src = 'js/sound/audioPlay.js'></script>

<script src =
'js/whenLoaded/whenLoaded.js'></script>

<script src =
'js/resizeElements/resizeElements.js'></script
>

</head>

<body onload = 'whenLoaded();'>


</body>

</html>
/* Dedicated to God the Father */

/* All Rights Reserved Christopher Andrew


Topalian Copyright 2000-2024 */

/* https://github.com/ChristopherTopalian */

/*
https://github.com/ChristopherAndrewTopalia
n */

/* style001.css */

body
{
background-color: rgb(40, 40, 40);
font-family: Arial;
font-size: 20px;
font-weight: bold;
color: rgb(255, 255, 255);
}

a
{
color: rgb(100, 100, 100);
text-decoration: none;
}

a:hover
{
text-decoration: underline;
}

input
{
width: 275px;
margin: 2px;
padding-left: 10px;
padding-right: 10px;
padding-top: 2px;
padding-bottom: 2px;
border: solid 1px rgb(100, 100, 100);
border-radius: 8px;
background-color: rgb(0, 0, 0);
font-size: 15px;
color: rgb(255, 255, 255);
cursor: pointer;
}

input:hover
{
border-color: rgb(0, 255, 255);
}
input:active
{
border-color: rgb(255, 0, 255);
}

.inputContainer
{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5px;
}

.buttonStyle001
{
width: 90hw;
margin: 2px;
padding-left: 10px;
padding-right: 10px;
padding-top: 2px;
padding-bottom: 2px;
border: solid 1px rgb(100, 100, 100);
border-radius: 8px;
background-color: rgb(0, 0, 0);
font-size: 15px;
color: rgb(255, 255, 255);
cursor: pointer;
box-sizing: border-box;
}

.buttonStyle001:hover
{
border-color: rgb(0, 255, 255);
}

.buttonStyle001:active
{
border-color: rgb(255, 0, 255);
}

#resultLabel
{
margin-left: 4px;
color: rgb(0, 255, 255);
}

#resultDiv
{
margin-left: 4px;
padding: 10px;
}

#originalArrayLabel
{
margin-left: 4px;
color: rgb(0, 255, 255);
}

#originalArrayDiv
{
margin-left: 4px;
padding: 10px;
color: rgb(200, 200, 200);
overflow-y: scroll;
}

*{
scrollbar-width: thin;
scrollbar-color: rgb(100, 100, 100) rgb(0, 0,
0);
}
// Dedicated to God the Father

// All Rights Reserved Christopher Andrew


Topalian Copyright 2000-2024

// https://github.com/ChristopherTopalian

//
https://github.com/ChristopherAndrewTopalia
n

// shortcuts.js

function ge(whichId)
{
let result =
document.getElementById(whichId);
return result;
}

function ce(whichType)
{
let result =
document.createElement(whichType);

return result;
}

function ba(whichElement)
{
let result =
document.body.append(whichElement);

return result;
}
// Dedicated to God the Father

// All Rights Reserved Christopher Andrew


Topalian Copyright 2000-2024

// https://github.com/ChristopherTopalian

//
https://github.com/ChristopherAndrewTopalia
n

// worldVariables.js

let online = false;


// Dedicated to God the Father

// All Rights Reserved Christopher Andrew


Topalian Copyright 2000-2024

// https://github.com/ChristopherTopalian

//
https://github.com/ChristopherAndrewTopalia
n

// people.js

let people =
[
{
name: 'Melissa',
date: '1980/03/01 9:30 PM',
},

{
name: 'Tabitha',
date: '1983/03/05 12:30 PM'
},

{
name: 'Jane',
date: '1977/05/22 1:30 AM'
}
];
// Dedicated to God the Father

// All Rights Reserved Christopher Andrew


Topalian Copyright 2000-2024

// https://github.com/ChristopherTopalian

//
https://github.com/ChristopherAndrewTopalia
n

// theFunctions.js

let theFunctions =
[
{
name: `showAll`,
functionName: `showAll(people)`,
},

{
name: `showAllNames`,
functionName: `showAllNames(people)`,
},

{
name: `showAllDates`,
functionName: `showAllDates(people)`,
},

{
name: `filterByName`,
functionName: `filterByName(people,
'Melissa')`,
},
{
name: `filterByDate`,
functionName: `filterByDate(people,
'1983/03/05')`,
},

{
name: `filterBeforeDate`,
functionName: `filterBeforeDate(people,
'1982/02/05')`,
},

{
name: `filterAfterDate`,
functionName: `filterAfterDate(people,
'1981/02/05')`,
},
{
name: `filterByYear`,
functionName: `filterByYear(people,
'1983')`,
},

{
name: `filterByMonth`,
functionName: `filterByMonth(people,
'03')`,
},

{
name: `filterByYearMonth`,
functionName:
`filterByYearMonth(people, '1983/03')`,
},
{
name: `filterByMonthDay`,
functionName:
`filterByMonthDay(people, '3', '5')`,
},

{
name: `filterByDateTime`,
functionName: `filterByDateTime(people,
'1980/03/01 9:30 PM')`,
},
];
// Dedicated to God the Father

// All Rights Reserved Christopher Andrew


Topalian Copyright 2000-2024

// https://github.com/ChristopherTopalian

//
https://github.com/ChristopherAndrewTopalia
n

// filterAfterDate.js

function filterAfterDate(whichArray,
whichDate)
{
let result = [];
for (let z = 0; z < whichArray.length; z++)
{
if (people[z].date > whichDate)
{
result.push(whichArray[z]);
}
}

return result;
}
// Dedicated to God the Father

// All Rights Reserved Christopher Andrew


Topalian Copyright 2000-2024

// https://github.com/ChristopherTopalian

//
https://github.com/ChristopherAndrewTopalia
n

// filterBeforeDate.js

function filterBeforeDate(whichArray,
whichDate)
{
let result = [];
for (let z = 0; z < whichArray.length; z++)
{
if (people[z].date < whichDate)
{
result.push(whichArray[z]);
}
}

return result;
}
// Dedicated to God the Father

// All Rights Reserved Christopher Andrew


Topalian Copyright 2000-2024

// https://github.com/ChristopherTopalian

//
https://github.com/ChristopherAndrewTopalia
n

// filterByDate.js

function filterByDate(whichArray, whichDate)


{
let result = [];

for (let z = 0; z < whichArray.length; z++)


{
let parts = whichArray[z].date.split(' ');

if (parts[0] === whichDate)


{
result.push(whichArray[z]);
}
}

return result;
}
// Dedicated to God the Father

// All Rights Reserved Christopher Andrew


Topalian Copyright 2000-2024

// https://github.com/ChristopherTopalian

//
https://github.com/ChristopherAndrewTopalia
n

// filterByDateTime.js

function filterByDateTime(whichArray,
whichDate)
{
let result = [];
for (let z = 0; z < whichArray.length; z++)
{
if (whichArray[z].date === whichDate)
{
result.push(whichArray[z]);
}
}

return result;
}
// Dedicated to God the Father

// All Rights Reserved Christopher Andrew


Topalian Copyright 2000-2024

// https://github.com/ChristopherTopalian

//
https://github.com/ChristopherAndrewTopalia
n

// filterByMonth.js

function filterByMonth(whichArray,
whichMonth)
{
let result = [];
for (let z = 0; z < whichArray.length; z++)
{
let parts = people[z].date.split('/');

if (parts[1] === whichMonth)


{
result.push(whichArray[z]);
}
}

return result;
}
// Dedicated to God the Father

// All Rights Reserved Christopher Andrew


Topalian Copyright 2000-2024

// https://github.com/ChristopherTopalian

//
https://github.com/ChristopherAndrewTopalia
n

// filterByMonthDay.js

function filterByMonthDay(whichArray,
whichMonth, whichDay)
{
let result = [];
for (let z = 0; z < whichArray.length; z++)
{
let parts = whichArray[z].date.split(' ');

let datePart = parts[0];

let month = datePart.substring(5, 7);

let day = datePart.substring(8, 10);

if (whichMonth.length === 1)
{
whichMonth = '0' + whichMonth;
}
if (whichDay.length === 1)
{
whichDay = '0' + whichDay;
}
if (month === whichMonth && day ===
whichDay)
{
result.push(whichArray[z]);
}
}

return result;
}
// Dedicated to God the Father

// All Rights Reserved Christopher Andrew


Topalian Copyright 2000-2024

// https://github.com/ChristopherTopalian

//
https://github.com/ChristopherAndrewTopalia
n

// filterByName.js

function filterByName(whichArray,
whichName)
{
let result = [];
for (let z = 0; z < whichArray.length; z++)
{
if (whichArray[z].name === whichName)
{
result.push(whichArray[z]);
}
}

return result;
}
// Dedicated to God the Father

// All Rights Reserved Christopher Andrew


Topalian Copyright 2000-2024

// https://github.com/ChristopherTopalian

//
https://github.com/ChristopherAndrewTopalia
n

// filterByYear.js

function filterByYear(whichArray, whichYear)


{
let result = [];

for (let z = 0; z < whichArray.length; z++)


{
if (people[z].date.startsWith(whichYear))
{
result.push(whichArray[z]);
}
}

return result;
}
// Dedicated to God the Father

// All Rights Reserved Christopher Andrew


Topalian Copyright 2000-2024

// https://github.com/ChristopherTopalian

//
https://github.com/ChristopherAndrewTopalia
n

// filterByYearMonth.js

function filterByYearMonth(whichArray,
whichYearMonth)
{
let result = [];
for (let z = 0; z < whichArray.length; z++)
{
if
(people[z].date.startsWith(whichYearMonth))
{
result.push(whichArray[z]);
}
}

return result;
}
// Dedicated to God the Father

// All Rights Reserved Christopher Andrew


Topalian Copyright 2000-2024

// https://github.com/ChristopherTopalian

//
https://github.com/ChristopherAndrewTopalia
n

// showAll.js

function showAll(whichArray)
{
let result = [];

for (let z = 0; z < whichArray.length; z++)


{
result.push(whichArray[z]);
}

return result;
}
// Dedicated to God the Father

// All Rights Reserved Christopher Andrew


Topalian Copyright 2000-2024

// https://github.com/ChristopherTopalian

//
https://github.com/ChristopherAndrewTopalia
n

// showAllDates.js

function showAllDates(whichArray)
{
let result = [];

for (let z = 0; z < whichArray.length; z++)


{
result.push(whichArray[z].date);
}

return result;
}
// Dedicated to God the Father

// All Rights Reserved Christopher Andrew


Topalian Copyright 2000-2024

// https://github.com/ChristopherTopalian

//
https://github.com/ChristopherAndrewTopalia
n

// showAllNames.js

function showAllNames(whichArray)
{
let result = [];

for (let z = 0; z < whichArray.length; z++)


{
result.push(whichArray[z].name);
}

return result;
}
// Dedicated to God the Father

// All Rights Reserved Christopher Andrew


Topalian Copyright 2000-2024

// https://github.com/ChristopherTopalian

//
https://github.com/ChristopherAndrewTopalia
n

// makeCenterContainer.js

function makeCenterContainer()
{
// centerContainer
let centerContainer = ce('div');
centerContainer.id = 'centerContainer';
centerContainer.style.position = 'fixed';
centerContainer.style.left =
ge('leftMenu_buttonsContainer').style.right +
160 + 'px';
centerContainer.style.top = '2px';
centerContainer.style.overflowX = 'scroll';
ba(centerContainer);

// originalArrayLabel
let originalArrayLabel = ce('div');
originalArrayLabel.id =
'originalArrayLabel';
originalArrayLabel.textContent = 'Original
Array';
originalArrayLabel.style.fontSize = '16px';

centerContainer.append(originalArrayLabel);
//-//

// originalArrayDiv
let originalArrayDiv = ce('div');
originalArrayDiv.id = 'originalArrayDiv';
originalArrayDiv.textContent =
JSON.stringify(people);
originalArrayDiv.style.width = '450px';
originalArrayDiv.style.height = '100px';
originalArrayDiv.style.border = 'solid 1px
rgb(100, 100, 100)';
originalArrayDiv.style.overflowY = 'scroll';
centerContainer.append(originalArrayDiv);

//-//

let hr001 = ce('br');


hr001.style.lineHeight = '5px';
centerContainer.append(hr001);

//-//

// resultLabel
let resultLabel = ce('div');
resultLabel.id = 'resultLabel';
resultLabel.textContent = 'Result';
resultLabel.style.fontSize = '16px';
centerContainer.append(resultLabel);

//-//

// resultDiv
let resultDiv = ce('div');
resultDiv.id = 'resultDiv';
resultDiv.textContent = 'Result';
resultDiv.style.width = '450px';
resultDiv.style.height = '100px';
resultDiv.style.border = 'solid 1px rgb(100,
100, 100)';
resultDiv.style.overflowY = 'scroll';
centerContainer.append(resultDiv);
}
// Dedicated to God the Father

// All Rights Reserved Christopher Andrew


Topalian Copyright 2000-2024

// https://github.com/ChristopherTopalian

//
https://github.com/ChristopherAndrewTopalia
n

// makeInputs.js

function makeInputs(whichArray)
{
// inputContainer
let inputContainer = ce('div');
inputContainer.id = 'inputContainer';
inputContainer.className =
'inputContainer';
inputContainer.style.position = 'fixed';
inputContainer.style.left = '10px';
inputContainer.style.top =
ge('resultDiv').getBoundingClientRect().botto
m + 20 + 'px';
inputContainer.style.height = '100px';
inputContainer.style.overflowY = 'scroll';
inputContainer.style.zIndex = 2;
ba(inputContainer);

//-//

for (let x = 0; x < whichArray.length; x++)


{
let theInput = ce('input');
theInput.id = whichArray[x].name;
theInput.value =
whichArray[x].functionName;
theInput.onkeyup = function()
{
audioPlay('sfx_blip_001', 1.0);

ge('resultDiv').innerHTML =
JSON.stringify(eval(theInput.value));
};
theInput.onmouseover = function()
{
audioPlay('sfx_warp_001', 1.0);
};
theInput.onclick = function()
{
audioPlay('sfx_blip_001', 1.0);
ge('resultDiv').innerHTML =
JSON.stringify(eval(theInput.value));
};
inputContainer.append(theInput);
}
}
// Dedicated to God the Father

// All Rights Reserved Christopher Andrew


Topalian Copyright 2000-2024

// https://github.com/ChristopherTopalian

//
https://github.com/ChristopherAndrewTopalia
n

// makeMenuLeft.js

// makes our menu of buttons using the array


of objects named theFunctions

function makeMenuLeft(whichArray)
{
let nameSpace = 'leftMenu_';

//-//

// buttonsContainer
let buttonsContainer = ce('div');
buttonsContainer.id = nameSpace +
'buttonsContainer';
buttonsContainer.style.display = 'flex';
buttonsContainer.style.flexDirection =
'column';
buttonsContainer.style.overflowY = 'scroll';
buttonsContainer.style.position = 'fixed';
buttonsContainer.style.left = '0px';
buttonsContainer.style.top = '5px';
buttonsContainer.style.height = '200px';
ba(buttonsContainer);
//-//

let aooLabel = ce('div');


aooLabel.textContent = 'AOO Menu';
aooLabel.style.fontSize = '16px';
aooLabel.style.margin = 'auto';
buttonsContainer.append(aooLabel);

//-//

for (let x = 0; x < whichArray.length; x++)


{
// theButton
let theButton = ce('button');
theButton.id = nameSpace +
whichArray[x].name;
theButton.className = 'buttonStyle001';
theButton.title =
whichArray[x].functionName;
theButton.textContent =
whichArray[x].name;
theButton.onmouseover = function()
{
audioPlay('sfx_warp_001', 1.0);
};
theButton.onclick = function()
{
audioPlay('sfx_blip_001', 1.0);

ge('resultDiv').innerHTML =
JSON.stringify(eval(whichArray[x].functionNa
me));
};
buttonsContainer.append(theButton);
}
}
// Dedicated to God the Father

// All Rights Reserved Christopher Andrew


Topalian Copyright 2000-2024

// https://github.com/ChristopherTopalian

//
https://github.com/ChristopherAndrewTopalia
n

// makeMenuRight.js

// makes our menu of buttons without using


an array of objects

function makeMenuRight()
{
let nameSpace = 'rightMenu_';

// buttonsContainer
let buttonsContainer = ce('div');
buttonsContainer.id = nameSpace +
'buttonsContainer';
buttonsContainer.style.position = 'fixed';
buttonsContainer.style.right = '0px';
buttonsContainer.style.top = '5px';
buttonsContainer.style.height = '200px';
buttonsContainer.style.display = 'flex';
buttonsContainer.style.flexDirection =
'column';
buttonsContainer.style.overflowY = 'scroll';
ba(buttonsContainer);

//-//
let nonAOOLabel = ce('div');
nonAOOLabel.textContent = 'Non AOO
Menu';
nonAOOLabel.style.fontSize = '16px';
nonAOOLabel.style.margin = 'auto';
buttonsContainer.append(nonAOOLabel);

//-//

// showAllButton
let showAllButton = ce('button');
showAllButton.className =
'buttonStyle001';
showAllButton.id = nameSpace +
'showAllButton';
showAllButton.textContent = 'showAll';
showAllButton.title = 'showAll(people)';
showAllButton.onmouseover = function()
{
audioPlay('sfx_warp_001', 1.0);
};
showAllButton.onclick = function()
{
audioPlay('sfx_blip_001', 1.0);

ge('resultDiv').innerHTML =
JSON.stringify(showAll(people));
};
buttonsContainer.append(showAllButton);

//-//

// showAllNamesButton
let showAllNamesButton = ce('button');
showAllNamesButton.className =
'buttonStyle001';
showAllNamesButton.id = nameSpace +
'showAllNamesButton';
showAllNamesButton.textContent =
'showAllNames';
showAllNamesButton.title =
'showAllNames(people)';
showAllNamesButton.onmouseover =
function()
{
audioPlay('sfx_warp_001', 1.0);
};
showAllNamesButton.onclick = function()
{
audioPlay('sfx_blip_001', 1.0);

ge('resultDiv').innerHTML =
JSON.stringify(showAllNames(people));
};
buttonsContainer.append(showAllNamesButt
on);

//-//

// showAllDatesButton
let showAllDatesButton = ce('button');
showAllDatesButton.className =
'buttonStyle001';
showAllDatesButton.id = nameSpace +
'showAllDatesButton';
showAllDatesButton.textContent =
'showAllDates';
showAllDatesButton.title =
'showAllDates(people)';
showAllDatesButton.onmouseover =
function()
{
audioPlay('sfx_warp_001', 1.0);
};
showAllDatesButton.onclick = function()
{
audioPlay('sfx_blip_001', 1.0);

ge('resultDiv').innerHTML =
JSON.stringify(showAllDates(people));
};

buttonsContainer.append(showAllDatesButto
n);

//-//

// filterByNameButton
let filterByNameButton = ce('button');
filterByNameButton.className =
'buttonStyle001';
filterByNameButton.id = nameSpace +
'filterByNameButton';
filterByNameButton.textContent =
'filterByName';
filterByNameButton.title =
'filterByName(people, "Melissa")';
filterByNameButton.onmouseover =
function()
{
audioPlay('sfx_warp_001', 1.0);
};
filterByNameButton.onclick = function()
{
audioPlay('sfx_blip_001', 1.0);
ge('resultDiv').innerHTML =
JSON.stringify(filterByName(people,
'Melissa'));
};

buttonsContainer.append(filterByNameButto
n);

//-//

// filterByDateButton
let filterByDateButton = ce('button');
filterByDateButton.className =
'buttonStyle001';
filterByDateButton.id = nameSpace +
'filterByDateButton';
filterByDateButton.textContent =
'filterByDate';
filterByDateButton.title =
'filterByDate(people, "1983/03/05")';
filterByDateButton.onmouseover =
function()
{
audioPlay('sfx_warp_001', 1.0);
};
filterByDateButton.onclick = function()
{
audioPlay('sfx_blip_001', 1.0);

ge('resultDiv').innerHTML =
JSON.stringify(filterByDate(people,
'1983/03/05'));
};

buttonsContainer.append(filterByDateButton)
;
//-//

// filterBeforeDateButton
let filterBeforeDateButton = ce('button');
filterBeforeDateButton.className =
'buttonStyle001';
filterBeforeDateButton.id = nameSpace +
'filterBeforeDateButton';
filterBeforeDateButton.textContent =
'filterBeforeDate';
filterBeforeDateButton.title =
'filterBeforeDate(people, "1982/02/05")';
filterBeforeDateButton.onmouseover =
function()
{
audioPlay('sfx_warp_001', 1.0);
};
filterBeforeDateButton.onclick = function()
{
audioPlay('sfx_blip_001', 1.0);

ge('resultDiv').innerHTML =
JSON.stringify(filterBeforeDate(people,
'1982/02/05'));
};

buttonsContainer.append(filterBeforeDateBut
ton);

//-//

// filterAfterDateButton
let filterAfterDateButton = ce('button');
filterAfterDateButton.className =
'buttonStyle001';
filterAfterDateButton.id = nameSpace +
'filterAfterDateButton';
filterAfterDateButton.textContent =
'filterAfterDate';
filterAfterDateButton.title =
'filterAfterDate(people, "1981/02/05")';
filterAfterDateButton.onmouseover =
function()
{
audioPlay('sfx_warp_001', 1.0);
};
filterAfterDateButton.onclick = function()
{
audioPlay('sfx_blip_001', 1.0);

ge('resultDiv').innerHTML =
JSON.stringify(filterAfterDate(people,
'1981/02/05'));
};

buttonsContainer.append(filterAfterDateButto
n);

//-//

// filterByYearButton
let filterByYearButton = ce('button');
filterByYearButton.className =
'buttonStyle001';
filterByYearButton.id = nameSpace +
'filterByMonthButton';
filterByYearButton.textContent =
'filterByYear';
filterByYearButton.title =
'filterByYear(people, "1983")';
filterByYearButton.onmouseover =
function()
{
audioPlay('sfx_warp_001', 1.0);
};
filterByYearButton.onclick = function()
{
audioPlay('sfx_blip_001', 1.0);

ge('resultDiv').innerHTML =
JSON.stringify(filterByYear(people, '1983'));
};

buttonsContainer.append(filterByYearButton)
;

//-//
// filterByMonthButton
let filterByMonthButton = ce('button');
filterByMonthButton.className =
'buttonStyle001';
filterByMonthButton.id = nameSpace +
'filterByMonthButton';
filterByMonthButton.textContent =
'filterByMonth';
filterByMonthButton.title =
'filterByMonth(people, "03")';
filterByMonthButton.onmouseover =
function()
{
audioPlay('sfx_warp_001', 1.0);
};
filterByMonthButton.onclick = function()
{
audioPlay('sfx_blip_001', 1.0);
ge('resultDiv').innerHTML =
JSON.stringify(filterByMonth(people, '03'));
};

buttonsContainer.append(filterByMonthButto
n);

//-//

// filterByYearMonthButton
let filterByYearMonthButton = ce('button');
filterByYearMonthButton.className =
'buttonStyle001';
filterByYearMonthButton.id = nameSpace +
'filterByYearMonthButton';
filterByYearMonthButton.textContent =
'filterByYearMonth';
filterByYearMonthButton.title =
'filterByYearMonth(people, "1983/03")';
filterByYearMonthButton.onmouseover =
function()
{
audioPlay('sfx_warp_001', 1.0);
};
filterByYearMonthButton.onclick =
function()
{
audioPlay('sfx_blip_001', 1.0);

ge('resultDiv').innerHTML =
JSON.stringify(filterByYearMonth(people,
'1983/03'));
};
buttonsContainer.append(filterByYearMonthB
utton);

//-//

// filterByMonthDayButton
let filterByMonthDayButton = ce('button');
filterByMonthDayButton.className =
'buttonStyle001';
filterByMonthDayButton.id = nameSpace +
'filterByMonthDayButton';
filterByMonthDayButton.textContent =
'filterByMonthDay';
filterByMonthDayButton.title =
'filterByMonthDay(people, "3", "5")';
filterByMonthDayButton.onmouseover =
function()
{
audioPlay('sfx_warp_001', 1.0);
};
filterByMonthDayButton.onclick =
function()
{
audioPlay('sfx_blip_001', 1.0);

ge('resultDiv').innerHTML =
JSON.stringify(filterByMonthDay(people, '3',
'5'));
};

buttonsContainer.append(filterByMonthDayB
utton);

//-//
// filterByDateTimeButton
let filterByDateTimeButton = ce('button');
filterByDateTimeButton.className =
'buttonStyle001';
filterByDateTimeButton.id = nameSpace +
'filterByDateTimeButton';
filterByDateTimeButton.textContent =
'filterByDateTime';
filterByDateTimeButton.title =
'filterByDateTime(people, "1980/03/01 9:30
PM")';
filterByDateTimeButton.onmouseover =
function()
{
audioPlay('sfx_warp_001', 1.0);
};
filterByDateTimeButton.onclick = function()
{
audioPlay('sfx_blip_001', 1.0);

ge('resultDiv').innerHTML =
JSON.stringify(filterByDateTime(people,
'1980/03/01 9:30 PM'));
};

buttonsContainer.append(filterByDateTimeBu
tton);
}
// Dedicated to God the Father

// All Rights Reserved Christopher Andrew


Topalian Copyright 2000-2024

// https://github.com/ChristopherTopalian

//
https://github.com/ChristopherAndrewTopalia
n

// makeTitleOfApp.js

function makeTitleOfApp()
{
// titleContainer
let titleContainer = ce('div');
titleContainer.style.position = 'absolute';
titleContainer.style.right = '10px';
titleContainer.style.bottom = '4px';
titleContainer.style.zIndex = 1;
ba(titleContainer);

//-//

// titleOfApp
let titleOfApp = ce('div');
titleOfApp.id = 'titleOfApp';
titleOfApp.innerHTML =
`<a href =
'https://github.com/christophertopalian/topali
an_javascript_filter_functions' target =
'_blank'> Topalian JavaScript Filter Functions
</a>`;
titleOfApp.style.fontSize = '17px';
titleContainer.append(titleOfApp);
}
// Dedicated to God the Father

// All Rights Reserved Christopher Andrew


Topalian Copyright 2000-2024

// https://github.com/ChristopherTopalian

//
https://github.com/ChristopherAndrewTopalia
n

// resizeElements.js

function resizeElements()
{
ge('originalArrayDiv').style.width =
(window.innerWidth - 348) + 'px';
ge('resultDiv').style.width =
(window.innerWidth - 348) + 'px';

ge('inputContainer').style.width =
(window.innerWidth - 20) + 'px';
}

window.onresize = function()
{
resizeElements();
};
// Dedicated to God the Father

// All Rights Reserved Christopher Andrew


Topalian Copyright 2000-2024

// https://github.com/ChristopherTopalian

//
https://github.com/ChristopherAndrewTopalia
n

// audioPlay.js

function audioPlay(whichId, whichVolume)


{
let audio = ge(whichId);

if (audio)
{
audio.volume = whichVolume;
audio.play();
}
}
// Dedicated to God the Father

// All Rights Reserved Christopher Andrew


Topalian Copyright 2000-2024

// https://github.com/ChristopherTopalian

//
https://github.com/ChristopherAndrewTopalia
n

// loadSounds.js

function loadSounds(whichArray)
{
for (let x = 0; x < whichArray.length; x++)
{
let theSound = ce('audio');
if (online == false)
{
theSound.src =
whichArray[x].soundFileOffline;
}
else
{
theSound.src =
whichArray[x].soundFileOnline;
}

theSound.id = whichArray[x].name;
theSound.loop = false;
theSound.volume = 1.0;
ba(theSound);
}
}
// Dedicated to God the Father

// All Rights Reserved Christopher Andrew


Topalian Copyright 2000-2024

// https://github.com/ChristopherTopalian

//
https://github.com/ChristopherAndrewTopalia
n

// sounds.js

let sounds =
[
{
name: 'sfx_blip_001',
soundFileOffline:
'media/sounds/sfx_blip_001.mp4',
soundFileOnline:
'https://collegeofscripting.weebly.com/upload
s/6/4/4/8/64482293/sfx_blip_001.mp4'
},

{
name: 'sfx_warp_001',
soundFileOffline:
'media/sounds/sfx_warp_001.mp3',
soundFileOnline:
'https://collegeofscripting.weebly.com/upload
s/6/4/4/8/64482293/sfx_warp_001.mp3'
}
];
// Dedicated to God the Father

// All Rights Reserved Christopher Andrew


Topalian Copyright 2000-2024

// https://github.com/ChristopherTopalian

//
https://github.com/ChristopherAndrewTopalia
n

// whenLoaded.js

function whenLoaded()
{
loadSounds(sounds);

makeMenuLeft(theFunctions);
makeMenuRight();

makeCenterContainer();

makeInputs(theFunctions);

makeTitleOfApp();

resizeElements();
}
How to Paste Code from a PDF
that has Junk Characters.
When we paste from a pdf into VSCode,
it might look like this:

We can't leave those junk characters in the


code, so we remove them with find/replace.
We Find 1 of the spaces.
We Replace All with the 1 space that we
typed. This gets rid of the junk characters in
the code.

We highlight 1 space with our mouse arrow:


We press Control + H to open the
Find/Replace feature and Replace All with our
own Space
Here we see that the Find/Replace All
has replaced the junk characters
with our working spaces instead:

Now that the code


has no junk characters,
it can run.
How to Combine
.js files
into one
main.js file
using
Command
Prompt

Version for when we have only


ONE folder of .js files that we
want to combine.
// HowToCombineJSFilesOneFolder.js

First, we add two new lines at the end of


every script. This way they will later combine
nicely with a line break in between each
script.

We open our js folder.


In our js project folder, we type
cmd
in the address bar of the folder and then
press enter

This opens our js folder in the Command


prompt

We type in the words


copy *.js main.js
and then press enter
This creates a new file that is named main.js
This new file contains all .js files in ONE file.
But, there is a junk character at the end of the
main.js script that we have to delete. In
VSCode the character might be called SUB
We remove this junk SUB character and the
code will now run.

As we can see, the junk character is


removed.

<!-- Now, in our html code, we can type -->


<script src = 'main.js'></script>

This makes it much easier to upload our js


code to our website.
How to Combine
.js files
into one
main.js file
using
Command
Prompt

Version for when we have js


scripts in subfolders in our js
project folder, that we want to
combine.
// HowToCombineJSFiles.js
TUTORIAL:
How to Combine all .js files in all folders that
are in our js folder.

Getting things ready:


We should add two new lines at the end every
script. This way they will combine nicely with
a line break in between each script.

Step One: Open our js folder

Step Two: Type in the address bar of the js


folder, cmd, press Enter

This opens our js folder in the command


prompt
Step Three: Type the command shown below
in the command prompt and then press Enter

for /r "%CD%" %i in (*.js) do type "%i" >>


main.js

Now we have a newly created .js file named


main.js that has all of our js files included
into one file.

This makes it easy to upload our application


and easy to find out how many lines of code
our project is.

To use our main.js file, we include it in our


html file code:
<script src = 'js/main.js'></script>
Happy Scripting :-)
How to Combine
.js files
into one
main.js file
using
a batch file

Version for when we have js


scripts in subfolders in our js
project folder, that we want to
combine.
// HowToCombineJSFilesUsingBatFile.js

We can combine all of the .js files


that are located in our js folder
into one main.js file, using either:
The Command Prompt Method
or
The .bat File Method

The .bat file method is very easy.


We double click the bat file, which is located
in our js folder, and it will make a main.js file,
which includes all .js files in the js folder,
including all .js files in all subdirectories of
our js folder.

This is a very easy way to combine our .js


files, because we can double click the .bat file
anytime, and it will again generate the main.js
file, which includes all .js files in the js folder,
including all .js files in all subdirectories of
our js folder. This makes uploading our
application online much easier.

Happy Scripting :-)

:: Topalian_Combine_JS_Files.bat

:: This .bat File Combines All .js files in all


folders of our project folder, into one main.js
file.

:: To activate this .bat file, we double click


the .bat file, while it is located in our js folder.

@echo off
:: set the output file name
set "output=main.js"

:: clear existing output file


type nul > "%output%"

:: loop through all JavaScript files in


subdirectories
for /r %%i in (*.js) do (
:: append the content of each file to the
output file
type "%%i" >> "%output%"
)

echo "JavaScript files combined into


%output% successfully."
How to Combine
.js files
into one
main.js file
using
Node.js

This version will successfully


combine a single folder of js
files.
It also works to combine js files
in all subdirectories.
// Topalian_Combine_JS_Files.js

let fs = require('fs');
let path = require('path');

function combineJSFiles(directory,
scriptFilename)
{
let outputFilePath = path.join(directory,
'main.js');

let fileContents = [];

function traverseFolder(folder)
{
let files = fs.readdirSync(folder);

for (let i = 0; i < files.length; i++)


{
let file = files[i];

let filePath = path.join(folder, file);

let stats = fs.statSync(filePath);

if (stats.isDirectory())
{
traverseFolder(filePath);
}
else if (path.extname(filePath) === '.js')
{
let content =
fs.readFileSync(filePath, 'utf8');
// check if file is not script file itself
if (filePath !== scriptFilename)
{
fileContents.push(content);
}
}
}
}

traverseFolder(directory);

fs.writeFileSync(outputFilePath,
fileContents.join('\n'), 'utf8');

console.log(`Combined $
{fileContents.length} .js files into $
{outputFilePath}`);
}

// get current directory of script


let currentDirectory = process.cwd();
// get filename of script
let scriptFilename = __filename;

combineJSFiles(currentDirectory,
scriptFilename);
How to Combine
.js files
into one
main.js file
using
Python

This version will successfully


combine a single folder of js
files.
It also works to combine js files
in all subdirectories.
# Topalian_Combine_JS_Files.py

import os

def combineJSFiles(directory,
scriptFileName):
outputFilePath = os.path.join(directory,
'main.js')
fileContents = []

def traverseFolder(folder):
for root, dirs, files in os.walk(folder):
for file in files:
filePath = os.path.join(root, file)
if filePath != scriptFileName and
filePath.endswith('.js'):
with open(filePath, 'r',
encoding='utf-8') as f:
fileContents.append(f.read())

traverseFolder(directory)

with open(outputFilePath, 'w',


encoding='utf-8') as f:
f.write('\n'.join(fileContents))
print(f"Combined {len(fileContents)} .js
files into {outputFilePath}")

# get current directory of script


currentDirectory =
os.path.dirname(os.path.abspath(__file__))

# get filename of script


scriptFileName = os.path.abspath(__file__)
combineJSFiles(currentDirectory,
scriptFileName)
What other file types can we combine?
We have combined .js files in this book, but
we might choose to instead combine:
.py or .html or .txt
This is very useful for book making.
In each of the scripts shown in this book, we
can manually change the parts where it
says .js, with .py, if we wanted to, for
instance, copy all .py files into one main.py
file.
We can do the same thing for .html files,
where we change the file type it will be
combining to .html and it will combine
all .html files into one main.html file.
We add two line breaks at the end of all files,
so that there is space between files, when
they are combined.
Remember too, that not all file types will
combine, but the ones above will.
The original files are not changed. The
content from the original files is only copied
from.
True Artificial Intelligence System
16-Gon
Tautology
MI 1111 CI
1101 1011
AND XNOR
0001 1001
LP RP
0011 0101

OR NOR
0111 1000

RC LC
1010 1100

XOR NAND
0110 1110
CNI MNI
Contra-
0100 0010
-diction
0000
For More Tutorials:
GitHub.com/ChristopherTopalian

GitHub.com/ChristopherAndrewTopalian

Sites.google.com/view/CollegeOfScripting

CollegeOfScripting.weebly.com

CollegeOfScripting.wordpress.com

Youtube.com/ScriptingCollege

Twitter.com/CollegeOfScript

Rumble.com/user/CollegeOfScripting
Dedicated to God the Father
This book is created by the
College of Scripting Music & Science.
Always remember, that each time you write a script
with a pencil and paper, it becomes imprinted so
deeply in memory that the material and methods are
learned extremely well.
When you Type the scripts, the same is true. The
more you type and write out the scripts by keyboard
or pencil and paper, the more you will learn
programming!
Write and Type every example that you find.
Keep all of your scripts organized.
Every script that you create increases your
programming abilities.
SEEING CODE, is one thing,
but WRITING CODE is another.
Write it, Type it, Speak it, See it, Dream it.
CollegeOfScripting.weebly.com

You might also like