always include an

importmap script

in your main html file:

<script type="importmap">
    {
        "imports": {
            "pop-helper": "https://cdn.jsdelivr.net/npm/[email protected]/index.js"
        }
    }
</script>

don't run the html file

without a local server

example usage:

import Pop from "pop-helper";

const value = Pop.random(10);
console.log(value);

pop-helper

A lightweight JavaScript utility library providing helpers for DOM manipulation, math operations, array processing, and small UI utilities like clocks and notifications.

Pop object functions:

Pop.clearSymbols(val)

Removes all non-numeric characters from a string

Pop.clearNumbers(val)

Removes all integer characters from a string

Pop.clearSpecific(val, chars)

Removes the specified symbol, or if an array was provided; all of the symbols contained within it from the string

Pop.getPropNum(el, prop)

Returns the number value of the specified property with the symbols cleared from the designated element

Pop.getPropFull(el, prop)

Returns the full value in a string of the specified property from the designated element

Pop.setProp(el, prop, val)

Sets the value of the specified property in the designated element

Pop.random(max)

Returns a random integer from 1 to max

Pop.randomArray(len, max)

Returns an array of integers with the specified length and designated maximum integer limit

Pop.antiFilter(arr, req)

Returns an array whose elements do not meet the specified requirement

Pop.clock(el)

Creates a clock that automatically increments every second, requires an html element to latch onto for the text content

Pop.clearClock(id)

Stops the Pop.clock function from running

Pop.autoColor(el, prop, min, max, val, time)

Animates a property between the min and max limits: el - element the property is in prop - the property that will be altered min - the smallest number the property can reach before starting to increment again max - the biggest number the property can reach before starting to decrement again val - the amount that is added or subtracted from the property per iteration time - how often the interval runs

• (as of 0.2.4, Pop.autoColor supports properties with symbols and letters attached at the end, for example; 24px, 50% or 90deg)
• (as of 0.2.7, Pop.autoColor properly supports negative values)

Pop.clearAutoColor(id)

Stops the Pop.autoColor functions from running

Pop.noDocCheck(id, max)

Iterates the maximum amount of times (or if left null or 0 while it exists) checking if an id doesn't exist and returns the element with the id if it doesn't (or undefined if it does)

Pop.docCheck(id, max)

Iterates the maximum amount of times (or if left null or 0 while it doesn't exist) checking if an id exists and returns the element with the id if it does (or undefined if it doesn't)

Pop.displayCheck(el, display)

Checks the current display of the specified element, and either makes it displayed with the specified display parameter, or makes it disappear if it's already displayed

Pop.toPercentage(val)

Returns the string of the provided value as a percentage (0.1 -> 10%)

Pop.toPercentageLimit(val, min, max)

Returns the string of the provided value as a percentage clamped to min and max limits provided

Pop.fromPercentage(val)

Returns a number from a string percentage (88% -> 0.88)

Pop.clamp(val, min, max)

Returns the provided value clamped to the min and max limits

Pop.round(int, max)

Returns the numbered rounded value of the number provided

Pop.modulo(val, loop)

Returns the value looped by the provided modulo value

Pop.suffixFormatting(val)

Returns the string representation of the number formatted with a suffix (800,000 -> 800K)

Pop.reload()

Reloads the website

Pop.sort(arr)

Returns a copy of the array sorted ascending without modifying the original one

Pop.antiSort(arr)

Returns a copy of the array sorted descending without modifying the original one

Pop.sum(arr)

Returns the sum of all the numerics in the provided array

Pop.min(arr)

Returns the smallest value in the provided array

Pop.max(arr)

Returns the biggest value in the provided array

Pop.avg(arr)

Returns the average value in the provided array

Pop.notif(notifClass, countClass, btnClass, title, desc)

Creates a notification with the provided title, description. Contains logic for the countdown, mouse hovering, button removing the notification etc.: notifClass - the class for the notification box countClass - the class for the countdown btnClass - the class for the button which removes the notification title - the h3 title header desc - the h4 description header important notice: using the notif, coundown and button classes, only change the cosmetic parts, as changing essential mechanics like the display, position etc. can break the notification

async Pop.wait(time)

Stops further script execution for the provided amount of time

Additional functions:

popNotifInjection()

Injects the notification styles and the popNotifCenter html element. Required for the Pop.notif(...) function to work. Automatically ran at the start of the Pop.notif(...) function. Notice: You generally don't need to run this function at all, the notification function automatically runs it when the styles don't exist