Javascript Utility Functions

util.js

// Youtube tutorial here: https://youtu.be/LDgPTw6tePk

// These functions are designed to be exported, but you could create a class instead. See tutorial video. 

// #1 proper case
export const properCase = (string) => {
    return `${string[0].toUpperCase()}${string.slice(1).toLowerCase()}`;
};


// #2 console log
export const log = (content) => {
    console.log(content);
}

// #3 query selector with optional scope 
export const select = (selector, scope) => {
    return (scope || document).querySelector(selector);
}

// #4 addEventListener wrapper 
export const listen = (target, event, callback, capture = false) => {
    target.addEventListener(event, callback, !!capture);
}

// #5 sanitize input / escape characters
export const sanitizeInput = (inputValue) => {
    const div = document.createElement('div');
    div.textContent = inputValue;
    return div.innerHTML;
}

// #6 create an element with an optional CSS class
export const createElement = (tag, className) => {
    const el = document.createElement(tag);
    if (className) el.classList.add(className);
    return el;
}

// #7 delete all contents
export const deleteChildElements = (parentElement) => {
    let child = parentElement.lastElementChild;
    while (child) {
        parentElement.removeChild(child);
        child = parentElement.lastElementChild;
    }
}

// #8 add class with optional query scope
export const addClass = (selector, className, scope) => {
    (scope || document).querySelector(selector).classList.add(className);
}

// #9 check for iOS
export const isIOS = () => {
    return (
        (/iPad|iPhone|iPod/.test(navigator.platform) ||
            (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1)) && !window.MSStream //MSStream is to avoid IE11
    );
}

// #10 get parameters by name from url
export const getParameterValue = (paramName, url) => {
    if (!url) url = window.location.href;
    const regex = new RegExp(`[?&]${paramName}(=([^&#]*))`);
    const results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return "";
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

Nice utility functions

I have 2 variations of your select function but named them $ (uses querySelector) and $$ (uses querySelectorAll)

We can make use of the URL interface in getParametersValue,
check https://developer.mozilla.org/en-US/docs/Web/API/URL/searchParams

anyways, I tried to share my gist on your YT video but once again YT keeps deleting it so I gave up after 3rd attempt
I have a plural, resetForm and EventEmitter , see the z_example.js file
https://gist.github.com/ahmad-511/79f62262e96113225ddddd9f7b4c848f

Thanks Dave

Hi Ahmad, I'll check out those functions in your gist. Sounds great! So sorry that YT is not cooperating. When I woke up this morning, I had a notification for your 3rd attempt, but YT did not even have it in my comments held for review when I went there. Seems there algorithm is a bit aggressive when it comes to comments. Very frustrating. I appreciate you continuing to try :) Thanks again, Dave

…

On Thu, May 27, 2021 at 7:28 AM Ahmad Murey ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ Nice utility functions I have 2 variations of your *select* function but named them $ (uses querySelector) and $$ (uses querySelectorAll) We can make use of the URL interface in getParametersValue, check https://developer.mozilla.org/en-US/docs/Web/API/URL/searchParams anyways, I tried to share my gist on your YT video but once again YT keeps deleting it so I gave up after 3rd attempt I have a plural, resetForm and EventEmitter , see the z_example.js file https://gist.github.com/ahmad-511/79f62262e96113225ddddd9f7b4c848f Thanks Dave — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <https://gist.github.com/df5a023fd41dd3d3d3b7a07a2779fec0#gistcomment-3759378>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AHRWJN77WUSK6PKKHKPBKBTTPY3HFANCNFSM45UFQJ4A> .

No problems,
Thanks

Nice work Ahmad! I just reviewed your functions. I especially like your event emitter. That is explained very well. It takes what could be a complicated topic and breaks it down into an easy to follow example. Very nice. Dave

…

On Thu, May 27, 2021 at 9:20 AM Ahmad Murey ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ No problems, Thanks — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <https://gist.github.com/df5a023fd41dd3d3d3b7a07a2779fec0#gistcomment-3759554>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AHRWJN6WHWVAZHTX3X2BJ4TTPZIMDANCNFSM45UFQJ4A> .

I really appreciate it Dave