QOOL.js Documentation

QOOL.js is a JavaScript library designed for people who are addicted to their javascript file. QOOL.js provides a better DOM manipulation experience than vanilla HTML/css/js. This documentation provides a comprehensive guide to all the built-in functions available in QOOL.js, categorized by their respective modules. this is a work in progress btw

HTML Module DOM Selection:

query(selector): Selects the first element that matches the specified CSS selector.
queryAll(selector): Selects all elements that match the specified CSS selector.
id(id): Selects the element with the specified ID.
tags(t): Selects all elements with the specified tag name.
htmlclass(f): Selects all elements with the specified class name.

Content Manipulation:

contentW(f, e): Sets the inner HTML content of the specified element.
contentR(f): Retrieves the inner HTML content of the specified element.

Console Output:

print, println: Logs messages to the console.
printerr: Logs error messages to the console.
printtb: Logs tabular data to the console.
printcnt: Logs the number of times a particular message has been logged.

Attribute Manipulation:

addId({to, value}): Adds an ID attribute to the specified element.
addClass({to, value}): Adds a class attribute to the specified element.
addOther({to, attr, value}): Adds a custom attribute to the specified element.
addClassAll({to, value}): Adds a class attribute to all elements matching the specified selector.
addOtherAll({to, attr, value}): Adds a custom attribute to all elements matching the specified selector.

Element Creation:

makeChild({text, child, parent}): Creates a new child element with the specified text content and appends it to the specified parent element.

Event Handling:

hoverStart(element, callback): Attaches a callback function to the mouseover event of the specified element.
hoverEnd(element, callback): Attaches a callback function to the mouseout event of the specified element.
event({to, event, callback}): Attaches a callback function to the specified event of the specified element.

Utility:

loadTime(): Measures the time taken for the page to load

Misc Module Utility Functions:

colorRand(): Generates a random hexadecimal color.
isDivisible(x, y): Checks if a number is divisible by another number.
intRand(start, end): Generates a random integer within a specified range.

CSS module notice:'e','f' in the below function parameters refer to the value query selector. All 'e' and 'to' must have a valid queryselector value. Same in some HTML functions. 'g' and 'h' are the values that are given to the css function. one example :-

filter('h1','blur(2px)')

PS: most of these functions have similiar names to their css property counnterparts, except a few, which will be highlighted below.

bg({to,blend,pos,size,img,attach,color,clip,filter,origin})

clipPath(e,g)

pointerEvents(e,g)

filter(e,g)

quotes(e,g)

clip(e,g)

color({to,color,caretColor})

opacity(e,g)

lineHeight(e,g)

listStyle(e,g)

all(e,g)

imageRender(e,g)

perspective(e,g)

willChange(e,g)

shapeOutside(e,g)

BoxEffect(e,g) -- same as 'box-shadow' in css

bgRepeat(e,g)

display(e,g)

pos(e,g) -- same as 'property' in css

rotate(e,g)

scale(e,g)

boxSize(e,g) -- same as 'box-sizing' in css

translate(e,g)

aspectRatio(e,g)

zIndex(e,g)

visibility(e,g)

transform(e,g)

contain(e,g)

listStyle(e,g)

transition(e,g)

animation(e,g)

float(e,g)

centerFlex(e,h)

overflow({to,x,y,overflow})

positionPositioning({to,top,bottom,right,left}) -- same as 'top,bottom,left,right' in css

pp({to,top,bottom,right,left}) -- same as 'top,bottom,left,right' in css

size({to,height,width,maxHeight,maxWidth}) -- has all the sizing properties (except box sizing which has its own function)

cursor(to,type)

mask({to,maskImage,maskMode})

counter({to,increment,reset,content})

textGradient({to,color1,color2}) -- applies text gradient

userSelect(to,type)

writingMode(to,type)

outline(to,type)

font({to,family,weight,size,style,color})

spacing({to,margin,padding}) -- same as 'margin,padding' in css

border({to,size,style,color,radius})

word({wordBreak,to,wordSpacing,letterSpacing,whiteSpacing}) -- same as 'wordBreak,to,wordSpacing,letterSpacing,whiteSpacing' in css

text({to,align,decoration,shadow,orientation,transform,justify,wrap,tabSize})

flex({to,display='flex',justifyContent,placeContent,alignItems,direction,flex,order,wrap})

grid({to,display='grid',gridTemplate,gap,grid,justifyContent,placeContent,alignContent,placeItems})

scroll({to,behavior,margin,padding,snapAlign,snapStop,snapType,timeline})

table({to,collapse,spacing,captionSide,layout,verticalAlign,emptyCells})

scrollbar({to,color,gutter,width})

appearance(e,g)