JS DEV

JS DEV

JSDEV is not only just short for JavaScript Developer but also a collection of JavaScript functions created by me and you can use all of this in your projects. Most javascript functions have fewer lines of code and therefore you quickly understand how they work. All javascript functions are for free.

SEE ALL FUNCTIONS

DOM

addComment

AddComment function will add a comment before and after an HTML tag. AddComment function will have three parameters. HTML tag will be the first target, the second parameter will be a string representing the label text before and three parameter will always be a string and it will be added at the end HTML tag. This function is very useful at times when you face an HTML document you want to structure it in such comments and understand them more easily and you can debug easier.

			// → SINTAX ↓
			addComment(target, text before, text after);
			// → EXAMPLE
			addComment('h1','start h1','end h1');
			addComment('.box','start box','end box');
			addComment('#dom','start dom','end dom');
		
addComment

addNodeBefore

As the name suggests, the addNodeBefore function will add a node before an item. The javascript function will take two or three parameters. The first parameter is the target HTML tag. Second parameter is the HTML tag that we add before the target element and can be a string or an array. If parameter is an array then the first value is a string representing the name of HTML tag and the second value is an array that will contain two strings representing HTML tag attribute and value. Three parameter is optional and it should always be a string.

			// → SINTAX ↓
			addNodeBefore(target,string,optionalStringText);
			// → OR
			addNodeBefore(target,[nodeName,[nodeNameAttribute,nodeNameValue]],optionalStringText);
			// → EXAMPLE 1
			addNodeBefore('.box',['code',['id','code']],'/* code here */');
			addNodeBefore('#code',['tt',['class','tt']],'Your code... ');
			addNodeBefore('tt','code','...another code. ');
			// → EXAMPLE 2
			addNodeBefore('.box',['div',['class','before-box']],'Some text here.');
			// → EXAMPLE 3
			addNodeBefore('.box','div','Some text here.');
			// →
			
addNodeBefore

addNodeAfter

AddNodeAfter function is almost identical to addNodeBefore function and the only difference is that you add a node after the target element.

			// → SINTAX ↓
			addNodeAfter(target,string,optionalStringText);
			// → OR
			addNodeAfter(target,[nodeName,[nodeNameAttribute,nodeNameValue]],optionalStringText);
			// → EXAMPLE 1
			addNodeAfter('.box',['code',['id','code']],'/* code here */');
			addNodeAfter('#code',['tt',['class','tt']],'Your code... ');
			addNodeAfter('tt','code','...another code. ');
			// → EXAMPLE 2
			addNodeAfter('.box',['div',['class','before-box']],'Some text here.');
			// → EXAMPLE 3
			addNodeAfter('.box','div','Some text here.');
			// →
		
addNodeAfter

animateLetters

AnimateLetters function is a very useful javascript function if you want to add various text effects. This feature will add a CSS class on the first target element (HTML tag) and then add another CSS class to be removed after a certain time given to us, just as we can see in these two examples.

			// ↓ EXAMPLE 1
			// → CSS
			.s1{ transition: all .2s; }
			.s2{ font-size: 1.4em; }
			// → JS 
			animateLetters('h1', 'mouseenter', 's1', 's2', 200);
		
			// ↓ EXAMPLE 2					
			// → CSS
			.s3{ transition: all 1s; }
			.s4{ background: black; color: white; }
			// → JS 
			animateLetters('p', 'mouseenter', 's3', 's4', 200);
		
animateLetters

addElements

AddElements function will add in to the DOM one element that may have an attribute with a value and this will be the parent element. This parent element will have a child with mostly text, exactly as shown in the following syntax function. Note that the first parameter of the function is the target DOM element where we add our items whether it is selected by an HTML tag an id or a CSS class, as you can see in the examples below.

			// → SINTAX ↓
			// → addElements(targetElement, [elementParentToAdd,[elementParentAttribute, attributeParentValue], elementChildToAdd], elementChildTextToAdd);
		
			addElements('body',['section', ['id','section']],'h1','Title text');
			addElements('article',['p', ['class','p']],'span','span text');
			addElements('.p',['code', ['class','code']],'tt',' tt text');
			addElements('#section',['code', ['class','code']],'tt',' tt text');
		
addElements

alwaysScrollToBottom

AlwaysScrollToBottom function will force an item to be with the scroll bar at the bottom at the time when this javascript function runs and will be running every time when we add text information or another type of information. I strongly recommend that HTML tag target to have height property declared in pixels and overflow property value to be hidden or scroll.

			// → CSS TO HTML ELEMENT - ALWAYS HEIGHT PIXELS VALUE AND OVERFLOW HIDDEN OR SCROLL
			// → EXAMPLE
			#id-name{ height: 100px; overflow: hidden; }
		
			// → SINTAX ↓
			alwaysScrollToBottom(elementTarget);
			// → EXAMPLE ↓
			alwaysScrollToBottom('#id-name');
			// →
			alwaysScrollToBottom('.class-name');					
			// → ALWAYS IN THIS FORMULA
			// → setInterval(function(){ /* some code */; alwaysScrollToBottom('#id-name'); }, 1000);
		
alwaysScrollToBottom

dragAndDropElement

DragAndDropElement function allows you to move one element to another location and bring him back. The javascript function will have two mandatory parameters in the form of string. The first parameter is the target element to be moved and the second parameter will be the target element that will receive the item. Note that the two parameters represents elements selected by function only after an id and therefore both elements must already contain these attributes.

			// → SINTAX ↓
			// → dragAndDropElement('elementWithIdNameToMove','elementWithIdNameToRecive');
			// → EXAMPLE ↓
			dragAndDropElement('one','two');
		
dragAndDropElement

upperCaseFirstLetter

UpperCaseFirstLetter function will have one parameter and it will be represented by HTML tag which target we want to change the first letter of each word in uppercase lowercase. As parameter we can use and target a specific element after a CSS class as you can see in the following example.

			upperCaseFirstLetter('h1');
			upperCaseFirstLetter('p');
			upperCaseFirstLetter('.numeClasaCSS');
		
upperCaseFirstLetter

openExternalLinksInNewTab

OpenExternalLinksInNewTab function will open any external link in another tab by adding the target attribute with value _blank. To successfully achieve this, the function will need a string, that string is the only parameter that function will have and will be the site domain name host, just as in the examples below.

			// → SINTAX
			openExternalLinksInNewTab(stringWithYourDomain);
			// → EXAMPLES
			openExternalLinksInNewTab('jsdev');
			openExternalLinksInNewTab('jsdev.ro');
			openExternalLinksInNewTab('arta-web');
			openExternalLinksInNewTab('arta-web.ro');
		
openExternalLinksInNewTab

showParagraphLetters

ShowParagraphLetters function will add new content in a paragraph, letter by letter into thinking it is typed by someone who writes very quickly. ShowParagraphLetters function can have zero or maximum three parameters. The first parameter will be linked to color of each letter, the second parameter is linked to an HTML tag, label where we want to add each letter and this label will not have special characters specific HTML, but only letters and eventually last parameter is the event to which the function to be triggered. The basic event is the click event. Note that the function will be executed only one time when the page is loaded.

			showParagraphLetters('#222e43', 'b', 'mouseenter');
			showParagraphLetters('rgb(200,125,36)', 'i');
			showParagraphLetters('green', 'tt');
		
showParagraphLetters

setAttributeByTagName

SetAttributeByTagName function will add an attribute with a value of a child element that is inside a parent element. The javascript function will have four parameters in the form of string. The first is the parent element target, the second parameter is the child element target and it must give him value that in the DOM is after tagName (label name written with a capital letter), parameter three is the attribute and parameter four is the attribute value.

					
			// → SINTAX ↓
			setAttributeByTagName(parentNodeElementTarget, childNodeElementTarget, attribute, value);
			// → EXAMPLE ↓
			setAttributeByTagName('.box','A','target','_blank');
			// → 
			setAttributeByTagName('.box','H2','class','preview');
		
setAttributeByTagName

changeLettrersColor

ChangeLettrersColor function will change color each letter of an HTML tag that contains text. The javascript function will take five parameters. The first three are represented by strings in the form of color, just as in these examples. Four parameter is the target HTML tag and five parameter will be the event to be triggered to function. The basic event is the click event. Note that the function will be executed only one time when the page is loaded.

			changeLettrersColor('#fff', 'aqua', '#109ea1', 'p', 'click');
			changeLettrersColor('#fff', 'aqua', '#109ea1', 'h2', 'mouseenter');
			changeLettrersColor('#fff', 'aqua', '#109ea1', 'h2', 'mouseenter');
		
changeLettrersColor

styleEveryWord

StyleEveryWord function will add a CSS class on each word of an HTML tag. StyleEveryWord function will be executed only one time when the page is loaded. The function will take two or three mandatory parameters. The first parameter will be the target HTML tag. The second parameter will be the CSS class name to use. Parameter three is the event that this function will be triggered. The third parameter is optional and if it is missing, the basic event is the event click. StyleEveryWord function do just a part of the whole thing and the rest is the so called events in CSS language.

			// → CSS EXAMPLE CLASS
			.styleEveryWord:hover{ font-style: italic; font-weight: bold; cursor: pointer; }
		
			// → SINTAX
			styleEveryWord(targetElement, cssClassName, eventToTrigger);
			// → EXAMPLE
			styleEveryWord('p','styleEveryWord','mouseenter');
		
styleEveryWord

detectBrowserLanguageAndGoTo

DetectBrowserLanguageAndGoTo function will detect the language that the user has set in the browser and depending on which language is set we can automatically redirect him to a page where the text is translated into his language. It is indicated that this function only run in the root page of the site. DetectBrowserLanguageAndGoTo function will have two mandatory parameters and they will be represented by two arrays. In these arrays will add strings represented by language and the target page and will be mandatory in the same order, exactly as in the following example.

			// → SINTAX
			detectBrowserLanguageAndGoTo(arrayWithLanguage, arrayWithPageDestination);
			// → EXAMPLE
			detectBrowserLanguageAndGoTo(['en-US', 'ro'],['http://www.jsdev.ro/en/','http://www.jsdev.ro']);
		
detectBrowserLanguageAndGoTo

removeOneByOne

RemoveOneByOne function will remove from page elements one by one and the DOM and all this at an event chosen by us. The javascript function will take two parameters. The first is the all HTML tags target and the second element will be the event that triggered the function.

			removeOneByOne('p', 'click');
			// → 
			//removeOneByOne('.cssClassName', 'click');
			// → 
		
removeOneByOne

hideAllThisTags

As the name suggests, hideAllThisTags function will hide all html tags shown in the only parameter of the function. Although elements should not be see in the browser window and will not occupy space, they will still be present in the DOM. The function will run properly if we had loaded the CSS class below. CSS class that will add to each HTML tag presented as a parameter.

			// → CSS CLASS TO USE
			.dn{ display: none; }
		
			hideAllThisTags('section');
			// →
			hideAllThisTags('article');
			// →
			hideAllThisTags('h1');
			// →
			hideAllThisTags('.cssClassName');
		
hideAllThisTags

showAllThisTags

ShowAllThisTags function is the opposite function of hideAllThisTags and will remove the CSS same class that have hidden HTML tags.

			// → THIS CSS CLASS WILL REMOVE
			.dn{ display: none; }
		
			showAllThisTags('section');
			// →
			showAllThisTags('article');
			// →
			showAllThisTags('h1');
			// →
			showAllThisTags('.cssClassName');
		
showAllThisTags

removeAllThisTags

RemoveAllThisTags function will remove from the browser window and DOM all HTML tags that are presented in the only parameter of the javascript function, just as in these examples.

			removeAllThisTags('p');
			// →
			removeAllThisTags('span');
			// →
			removeAllThisTags('tt');
			// →
			removeAllThisTags('h2');
			// →
		
removeAllThisTags

removeAllThisTagsIf

RemoveAllThisTagsIf function will remove all HTML tags that contain the CSS class name declared as the first parameter of the javascript function (with the point before) and contains one or more HTML tags child who will occupy space in browser through various CSS property. The usefulness of this feature is when you want to hide an HTML tag that contains a certain length of HTML tags that are inside and not contain any information for a user but will continue in the future. The numeric value is used by function in order to find all tags that contain the CSS class target (parent element is recommended) and will remove all tags that have a smaller or equal to the numeric value. So carefully how you use the function.

			// → SINTAX ↓
			removeAllThisTagsIf('.cssClassName', number);
			// → 
			removeAllThisTagsIf('.box', 184);
		
removeAllThisTagsIf

nextSiblingContent

NextSiblingContent function returns a string with the next content element that finds, an element that is found in the element parent and at the same level.

			nextSiblingContent('#box')
			// → string
			nextSiblingContent('.box')
			// → string
			nextSiblingContent('h1')
			// → string
			nextSiblingContent('strong')
		
nextSiblingContent

nextSibling

NextSibling function is almost identical to nextSiblingContent and the difference is that the first will return next whole object, object node in the DOM on the same level.

			nextSibling('#box')
			// → DOM NODE
			nextSibling('.box')
			// → DOM NODE
			nextSibling('h1')
			// → DOM NODE
			nextSibling('strong')
		
nextSibling

removeAllSibling

RemoveAllSibling function will have a single parameter, parameter target and will remove all items that are in the element node (HTML tag). As the name suggests, the javascript function it will keep in the parent element only that element that are declared as parameter.

			removeAllSibling(elementNodeToKeep);
			// →
			removeAllSibling('#id-element-node');
			// →
			removeAllSibling('.first-class-element-node');
			// →
		
removeAllSibling

createCircle

CreateCircle function will add an HTML element on the page on the sides of pages. The element is animated in order to enlarge and lose opacity and they reach a scale of 300% or when the the CSS animation was finished. Then createCircle function will remove from the browser and the DOM the item. The effect is only visual and very nice. I recommend you to make small circles with your mouse. Use the next CSS lines of code.

			// → CSS CLASS
			.circle{ width: 50px; height: 50px; border-radius: 50%; border: 1px solid black; position: absolute; z-index: 999999; }
			@keyframes circle{ to{ transform: scale(3); opacity: 0; } }
		
			// → 
			window.addEventListener('mousemove', createCircle);
		
createCircle

stopWatch

StopWatch function will have three parameters. This javascript function will add a timer descending into an HTML tag representing seconds and minutes until an optional callback function or declared elsewhere will be executed. The first parameter is the HTML target element where the function will add the remaining time in form of text. Second parameter is an array of numerical values and if the array contains only one numerical value, stopWatch function will interpret it as just about the number of seconds. If the array contains two numeric values then the first numerical value is interpreted as the value for minutes and the second numerical value is interpreted as the value for number of seconds. StopWatch function parameter three is represented by a callback function or a function declared elsewhere and in this case you just have to write the function name to be executed when the function stopWatch will come to the end.

			// → SINTAX ↓
			stopWatch(target, [numberThatRepresentSeconds], callback });
			// → OR
			stopWatch(target, [numberThatRepresentMinutes, numberThatRepresentSeconds], callback });
			// → EXAMPLE
			stopWatch('#time', [15], function callback(){ alert('Done.') });
			stopWatch('.time', [2,15], function callback(){ alert('Done.') });
			stopWatch('#time', [1,15], function callback(){ alert('Done.') });
			stopWatch('.time', [1,15], function callback(){ alert('Done.') });
		
stopWatch

addIdAttribute

As the name suggests, the addIdAttribute function will add an id attribute to all HTML tags that are the only parameter declared in the function. The function will take the contents of each label text and will use that value for each id. I recommend using this function only to the elements that do not have an id attribute.

			// → SINTAX ↓
			addIdAttribute(elementNode);
			// → EXAMPLE
			addIdAttribute('.box');
			// →
			addIdAttribute('h2');
		
addIdAttribute

addIdAttributeToParent

AddIdAttributeToParent function is almost identical with addIdAttribute and the only difference is that the addIdAttributeToParent function will add the id attribute to the parent element.

			// → SINTAX ↓
			addIdAttributeToParent(elementNode);
			// → EXAMPLE
			addIdAttributeToParent('.box');
			// →
			addIdAttributeToParent('h2');
		
addIdAttributeToParent

getDayName

GetDayName function returns a string with the name of the day we are today.

			getDayName();
			// →
		
getDayName

runCallbackOnAll

RunCallbackOnAll function will execute a function on all the target at the time when an event is triggered and the event is chosen by us. The function will have three parameters. The first will be the HTML tag target, the second parameter is the event at which the function is executed and the last parameter is the function and this function can be in the form of anonymous function or function written elsewhere and in this case we just write only the function name.

			// → SINTAX ↓
			runCallbackOnAll(elementTarget, event, callback)
			// →
			runCallbackOnAll('.box','click',function(){ alert(1) });
			// →
			function callback(){ this.innerHTML = 1 }
			runCallbackOnAll('p','mouseenter', callback);
		
runCallbackOnAll

runAfterPageLoad

RunAfterPageLoad function will run a function at the time when the whole document has been uploaded including external files. This javascript function will have one parameter and this parameter will be the callback function or another function declared elsewhere and in these case you will put only the function name.

			// → SINTAX ↓
			runAfterPageLoad(callback);
			// → EXAMPLE
			runAfterPageLoad(function(){console.log('page loaded')});
			// →
		
runAfterPageLoad

ARRAY

splitInTwo

SplitInTwo function will divide the contents of an array into two smaller arrays that will add inside the array returned. This javascript function will take two parameters. The first will be the name of the array target or a simple array with the values and the second parameter will be represented by a numeric value, a value that will be the place where the function to share the array target in two arrays smaller. If the second parameter has a value greater than the length of the array presented as one parameter, the function will assign the second parameter to value equal with parameter one.

			var x = [1,2,3,4,5,6,7,8,9];
			var y = splitInTwo(x,5);
			// → y = [[1,2,3,4,5], [6,7,8,9]];
			console.log(splitInTwo([1,2,3,4,5,6,7,8,9],1));
			// → [[1],[2,3,4,5,6,7,8,9]];
			console.log(splitInTwo([1,2,3,4,5,6,7,8,9],5));
			// → [[1,2,3,4,5], [6,7,8,9]];
			console.log(splitInTwo(['Inna', 'Andreea', 'Candice', 'Beatrice', 'Lili'],15));
			// → [['Inna', 'Andreea', 'Candice', 'Beatrice', 'Lili'],[]]
		
splitInTwo

onlyNumbers

OnlyNumbers function will test each type of value from an array and deletes any value that is not numerical. This javascript function will returns an array with all the numerical values.

			var x = [1,2,3,',false,4,'cool', null, function a(){}];
			var y = onlyNumbers(x);
			// → y = [1, 2, 3, 4];
			console.log(onlyNumbers([1,2,3,',false,4,'cool', null, function a(){}]));
			// → [1, 2, 3, 4];
		
onlyNumbers

onlyStrings

The onlyStrings function is almost identical to the onlyNumbers function and the difference it makes that the onlyStrings function will returns an array of string values.

			var x = [1,2,3,',false,4,'cool', null, function a(){}];
			var y = onlyStrings(x);
			// → y = ["", "cool"];
			console.log(onlyStrings([1,2,3,'',false,4,'cool', null, function a(){}]));
			// → ["", "cool"];
		
onlyStrings

dropValue

DropValue function will take two parameters. The first will be an array or array variable name and the second will be a numeric value, value that will identify and extract value from the first argument to the function. If the second parameter of function is not defined or is greater than the length of the first argument, the function will return the entire array that is represented as the first argument.

			var x = [1,2,3,4,5,6,7,8,9,10];
			var y = dropValue(x, 10);
			// → y = [10];
			console.log(dropValue([1,2,3,4,5,6,7,8,9,10],10));
			// → [10];
			console.log(dropValue([5,2,53,64,1,6,17,89,90,1000],10));
			// → [1000];
		
dropValue

randomValues

RandomValues function will have two mandatory parameters. The first parameter will be represented by a numeric value that will represent the array length returned and the second parameter will be the maximum value that can have values in the array returned.

			console.log(randomValues(5,100));
			// unul dintre exemple
			// → [69, 85, 46, 41, 18]
		
randomValues

randomValuesMinMax

RandomValuesMinMax function works like randomValues and the difference is that the randomValuesMinMax function will have three parameters. The second and third parameters will be the minimum and maximum values to be returned in the array.

			console.log(randomValuesMinMax(10,50,100));
			// unul din exemple
			// → [91, 98, 60, 83, 76, 92, 66, 51, 96, 78]
		
randomValuesMinMax

flattenArrays

FlattenArrays function will unite values from an array of arrays into one.

			console.log(flattenArrays([['me', 'john'],['you','candice'],['couple','yes']]));
			// → ["me", "john", "you", "candice", "couple", "yes"];
			console.log(flattenArrays([['me', 'john', 'cool man'],['you','candice', 'very hot'], ['couple','yes', 'forever']]));
			// → ["me", "john", "cool man", "you", "candice", "very hot", "couple", "yes", "forever"];
		
flattenArrays

calculate

The calculate function will have two parameters, otherwise the function will returns a value and it will be zero. These two parameters can be represented by two numeric values or two arrays that may contain numerical values in the form of string.

			console.log(calculate(1,2));
			// → 3
			console.log(calculate([1],[2,3]));
			// → 6
			console.log(calculate(['1'],['2',4]));
			// → 7
			console.log(calculate());
			// → 0
		
calculate

extract

The extract function will take three mandatory parameters. The first will be an array or a variable declared elsewhere that is an array. The second and third parameters will be represented by numeric values, values that represent the place where you will extract the data from the array. Three parameter should not be lower than the second parameter of the function and not greater than the length of the array. If parameter three is greater than the length of the array, the parameter value will have the value identical with the array length. If the second parameter is greater than three parameter of function, then the function will returns an empty array.

			console.log(extract([1,2,3,4,5,6,7,8,9,10],5,9));
			// → [6, 7, 8];
			console.log(extract([1,2,3,4,5,6,7,8,9,10],2,8));
			// → [3,4,5,6,7];
			console.log(extract([1,2,3,4,5,6,7,8,9,10],2,11));
			// → [3,4,5,6,7,8,9,10];
			console.log(extract([1,2,3,4,5,6,7,8,9,10],5,2));
			// → [];
		
extract

incrementBy

The incrementBy function will have two mandatory parameters. The first target will be the array containing numeric values regardless of whether they will or not in the form of string and the second parameter will be the amount by which each value of the array will be incremented. The second parameter can be present as a string, the result will be identical because the function will convert the string value to the numerical value.

			console.log(incrementBy([1,2,3,4],5));
			// → [6, 7, 8, 9]
		
incrementBy

decrementBy

Function works almost identical with incrementBy and the difference it makes decrement numeric values.

			console.log(decrementBy([1,2,3,4],5));
			// → [-4, -3, -2, -1]
		
decrementBy

joinWith

JoinWith function will concatenate all the values from an array with a value represented by the second parameter. Three is the last parameter of the function and it will contain the value that we added at the end. I recommend using this function only on arrays of strings and the final result will be a string with all values in the array, just like in the example below.

			console.log(joinWith(['Inna','Candice','are at my home'],' and ','.'));
			// → Inna and Candice are at my home.					
			var arrayOfStrings = ['Inna','Candice','are at my home'];
			var result = joinWith(arrayOfStrings,' and ','.');
			console.log(result);
			// → Inna and Candice are at my home.
		
joinWith

moduloBy

ModuloBy function will have two or three parameters. The first will be an array of numeric values which is expected to be tested every value, the second parameter will be a numeric value that will test for modulo value from each array and the third parameter is optional. If it is missing, its value is zero. If the third parameter is present then modulo operation returns true if and only if the result is modulo with parameter three. The function returns an array with all this value.

			console.log(moduloBy([1,2,3,4,5,6,5,2,3],3,2));
			// → [2, 5, 5, 2];
			console.log(moduloBy([1,2,3,4,5,6,5,2,3],3));
			// → [3, 6, 3];
			console.log(moduloBy([1,2,3,4,5,6,5,2,3],2.5));
			// → [5, 5];
			console.log(moduloBy([1,2,3,4,5,6,5,2,3],2.5,0));
			// → [5, 5];
		
moduloBy

reverse

Use this function if you want to reverse the order of elements in an array. This javascript function will have only one parameter and it will be a target array.

			console.log(reverse([1,2,3]));
			// → [3, 2, 1]
			console.log(reverse(['Anna','Beatrice','Candice']));
			// → ["Candice", "Beatrice", "Anna"]
		
reverse

reverseByModulo

ReverseByModulo function is similar to the reverse function and the difference makes the second parameter. This parameter will test for modulo all values in the array and if the result is zero, the function returns true and it will add that element in the array returned. Otherwise, the function will remove the item.

			console.log(reverseByModulo([1,2,3,4,5,6,7,8,9,10,11,12],1));
			// → [12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1]
			console.log(reverseByModulo([1,2,3,4,5,6,7,8,9,10,11,12],2));
			// → [12, 10, 8, 6, 4, 2]
			console.log(reverseByModulo([1,2,3,4,5,6,7,8,9,10,11,12],3));
			// → [12, 9, 6, 3]
			console.log(reverseByModulo([1,2,3,4,5,6,7,8,9,10,11,12],4));
			// → [12, 8, 4]
			console.log(reverseByModulo([1,2,3,4,5,6,7,8,9,10,11,12],5));
			// → [10, 5]
		
reverseByModulo

sortedByValue

SortedByValue function will sort items in an array according to a value that we give in the second parameter. The values that are lower than the second parameter of the function will not be added in the array returned. Note that the firt parameter must be on array with numeric values.

			console.log(sortedByValue([4,9,5,33,6,455,55,88,11,15,45,81,22,24,35,456,56],5));
			// → [5, 6, 9, 11, 15, 22, 24, 33, 35, 45, 55, 56, 81, 88, 455, 456]
			console.log(sortedByValue([4,9,5,33,6,455,55,88,11,15,45,81,22,24,35,456,56],455));
			// → [455, 456]
		
sortedByValue

getLowerValue

This function will have only one parameter and it will be an array of numerical values. This javascript function returns the lowest value of them.

			console.log(getLowerValue([99,55,44,22,7,6,220]));
			// → 6
			console.log(getLowerValue([99,55,44,22,71,60,220]));
			// → 22
		
getLowerValue

getBiggestValue

This function will have only one parameter and it will be an array of numerical values. This javascript function returns the biggest value of them.

			console.log(getBiggestValue([99,55,44,22,7,6,200]));
			// → 200
			console.log(getBiggestValue([99,55,404,202,71,60]));
			// → 404
		
getBiggestValue

countElement

As name says countElement function counts how many times an item is present in an array, the array representing the first parameter and the second parameter is the element that we want to count. If the second parameter is not present countElement function will return zero number.

			console.log(countElement(['a','b','c','d','a','b','c','d','a','b','c','d',],'a'));
			// → 3
			console.log(countElement(['a','b','c','d','a','b','c','d','a','b','c','d',]));
			// → 0
		
countElement

duplicate

This function will have only one parameter and it will be an array of values. The javascript function will return another array with each value in the array parameter duplicated.

			console.log(duplicate([1,2,3]));
			// → [1, 1, 2, 2, 3, 3]
		
duplicate

multiplyByValue

The function will multiply each value in the array to a value that I give them. The array will be the first parameter and the value that we multiply each value in the array will be the second parameter.

			console.log(multiplyByValue([1,2,3,4,5,6,7,8,9,10],5));
			// → [5, 10, 15, 20, 25, 30, 35, 40, 45, 50]
		
multiplyByValue

size

This function will have only one parameter and returns a numerical value representing its length.

			console.log(size('Google'));
			// → 6
			console.log(size([1,2,3,4,5]));
			// → 5
			console.log(size());
			// → 0
		
size

isArray

This javascript function will test the single parameter that it has the function to see if it is an array and if it is an array, isArray function returns true, otherwise returns false.

			console.log(isArray([]));
			// → true
			console.log(isArray({}));
			// → false
		
isArray

STRING

uniqueValue

The javascript function returns a numerical value or a string value. If we want the function to return a numeric value then you do not have to give any parameter. If we want the function to return a string value, then we have to give it a string parameter. This parameter will attach a numerical value and the result will be a unique string.

			console.log(uniqueValue());
			// → ex. 1464728274563
			console.log(uniqueValue('unique_'));
			// → ex. unique_1937471262
		
uniqueValue

noSpace

As name says noSpace function will replace the space character with another character of our choosing. The javascript function will take two parameters. The first is the string target which we will replace all characters space. Second parameter is represented by another character that we want it. Second parameter can be any character we want, be it letters, numbers or other special character and although we can give more than one character, the function will use only the first character.

			console.log(noSpace('Anna and Candice are at my home.', '_'));
			// → Anna_and_Candice_are_at_my_home.
			console.log(noSpace('Anna and Candice are at my home.', '*'));
			// → Anna*and*Candice*are*at*my*home.
			console.log(noSpace('Anna and Candice are at my home.', '*_'));
			// → Anna*and*Candice*are*at*my*home.
		
noSpace

modifyWord

The function will change a word in a string with another word given by us. This javascript function will have three parameters. The first will be a string or variable name that is a string, the second parameter is the target word that we want to replace in the string and the third parameter will be the word that we will add to place second parameter of function in the string variable. Note that the function will replace that word globally in the string and it will not hold if it is written with lowercase or uppercase.

			console.log(modifyWord('Apple Apple Apple','apple', 'steve jobs'));
			// → steve jobs steve jobs steve jobs
		
modifyWord

EXTRA

hexadecimalToRGBA

As the name suggests function, hexadecimalToRGBA function will convert a hexadecimal color scale into RGBA value. This javascript function will take more than one or two parameters. The first parameter is the value of the hexadecimal colors as mandatory length of six characters and / or letters plus special character hash. Second function parameter is optional and represents the value of alpha. If not present, the alpha value will be set to 1.

			// → SINTAX ↓
			hexadecimalToRGBA(hexadecimalValue, optionalAlphaValue);
			// → EXAMPLE
			console.log(hexadecimalToRGBA('#0f5e58'));
			// → rgba(15,94,88,1)
			console.log(hexadecimalToRGBA('#3e615e','0.7'));
			// → rgba(62,97,94,0.7)
		
hexadecimalToRGBA

squareEffectOnTag

This feature will add an HTML tag div on each side of another HTML tags and then these four divs will unite creating an animated effect that line on target. The function will take two parameters. The first is the target HTML tag and the second parameter to the function will be the event to be triggered. I highly recommend mouseover event or click event. Function will remove from DOM these four div tags that create this effect when you leave the mouse cursor on target element if and only if the function is applied to more than one item. Note that you will need the following CSS classes.

Using line of code * {position: relative; } will help the function to position correctly the four divs the absolute position of that div target and not the absolute position of the body element. Normally will not alter the layout of your pages because this line of code, asterisk character will change the basic position to the relative position of each HTML tags. I recommend you to check again to see if the page layout was changed.

			// → YOU WILL NEED THIS CSS CLASSES ↓
			*{ position: relative; }
			.d1, .d2, .d3, .d4{ width: 1px; height: 1px; transition: all 1s; background: #015b7e; position: absolute; }
			.d1, .d2{ top: 0%; left: 0%; }
			.d3, .d4{ float: right; right: 0%; bottom: 0%; }
			.d1-1, .d3-1{ width: 100%; }
			.d2-1, .d4-1{ height: 100%; }
		
			// → SINTAX ↓
			squareEffectOnTag(target, event);
			// →
			squareEffectOnTag('.box', 'mouseover');
		
squareEffectOnTag

luckyNumber

The function will gather figures from the three mandatory parameters, parameters that will represent a birthday. This javascript function will add up the numbers of each parameter will reach its own and in the end they will gather again until only one remains and that is the figure returned. The minimum time that the function accepts is 01.01.1900 and the maximum until the end of the current year.

			// → SINTAX ↓
			luckyNumber(day, month, year);
			console.log(luckyNumber(28,10,1945));
			// → 3
			console.log(luckyNumber('28','10','1945'));
			// → 3
		
			// → ALGORITM ↓
			// → 2 + 8 = 10; 1 + 0 = 1; day = 1;
			// → 1 + 0 = 1; month = 1;
			// → 1 + 9 + 4 + 5 = 19; 1 + 9 = 10; 1 + 0 = 1; year = 1;
			// → day + month + year = 3; return 3;
		
luckyNumber

virtualKeyboard

This javascript function will display a virtual keyboard in page and will only contain special characters, letters and numbers and does not include the functionality to others' keys. The purpose of the function is to use a virtual keyboard in order to insert different strings in an input field. The function works with CSS language and below you have the minimum you need to that language. Another very important aspect is that the function will position the virtual keyboard automatically below the HTML tag target and in this case there is no need to give your CSS property that will position the keyboard.

The javascript function will take two parameters. The first is the HTML tag that contains a particular target of id or a CSS class. I recommend using id with that special character. Second parameter is the event to trigger the function and show us the virtual keyboard. I recommend click event. The function does not interact with real keyboard and therefore they can be used together, the result is identical.

			// → You will need this CSS classes and id's
			#k{	width: 450px; padding: 2px; box-shadow: 0px 3px 3px -3px black;	border: 3px solid #CCC; background: white; position: absolute; z-index: 999999; }
		   	.r{	width: 100%; height: 30px; margin-top: 2px; display: inline-block; }
		   	.r:first-of-type{ height: 20px; }
		   		.l{ width: 420px; float: left; }
		   		#r{ width: 20px; float: right; cursor: pointer; }
		   			.b{	width: 20px; height: 28px; font-weight: 200; font-size: 1.1em; text-align: center; float: left;	cursor: pointer; color:#FFF; margin:0px 2px; box-shadow:0px 3px 3px -3px black;	border:1px solid #c53421; background: linear-gradient(#f76501, #fa3418); }
		   			.b:hover{ background: linear-gradient(#fa3418, #f76501); box-shadow: none; }
		   			#b1{ width: 98px; }
		
			// → SINTAX ↓
			virtualKeyboard(target, event)
			// → EXAMPLE
			virtualKeyboard('#i', 'click')
		
virtualKeyboard

randomPassword

RandomPassword function returns a string with a maximum length of four characters and can contain letters written in lowercase and / or uppercase, one of the numbers from zero to nine and a special character. This javascript function will have only one parameter and it will be an array of one or a maximum of four key words and these words and syntax you can see below. The role of these words is to tell the function which random characters that string returned will contain.

			// → SINTAX ↓
			randomPassword([optionalLOWERstring,optionalUPPERstring,optionalNUMBERstring,optionalSIMBOLSstring]);
			randomPassword(['lower','upper','number','simbols']);
			// → EXAMPLE 1
			console.log(randomPassword(['lower','upper','number','simbols']));
			// → kX7-
			// → EXAMPLE 2
			console.log(randomPassword(['lower','upper','number']));
			// → nU1
			// → EXAMPLE 3
			console.log(randomPassword(['upper','number','simbols']) + randomPassword(['lower','upper','number','simbols']));
			// → W0|iY1%
			// → EXAMPLE 4
			console.log(randomPassword(['lower','upper','number','simbols']) + randomPassword(['lower','upper','number','simbols']));
			// → uH5*nV1?
		
randomPassword
Total page view 14126. Yesterday 196. Page visit today 14.
Trimite un mesaj
Salut
Anuleaza