Skip to content

Latest commit

 

History

History
560 lines (374 loc) · 10.2 KB

README.md

File metadata and controls

560 lines (374 loc) · 10.2 KB


DolarJS Library Documentation

A simple and lightweight javascript library easy to learn easy to use

Instalation

you can include the javascript file inside the head tag of your page

<head>
...
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/mboussaid/dolar.js/src/dolar.min.js"></script>
...
</head>

Select Elements

you can select on element or more by like this :

index.html

...
<input type="text" placeholder="email" />
<input type="password" placeholder="password" />

...

script.js

$('input')  // select all inputs

if you want to select only one element you can use function at(index)

$('input').at(0) // select input at index 0 (email input)

$('input').at(1) // select  input at index 1 (password input)

Add Events

you can add a custom event to a one or more elements $(element).addEvent(eventName,callbackFunction)

index.html

<button>say welcome </button>
<button>say goodbye </button>

script.js

/// add a click function to the first button 
$('button').at(0).addEvent('click',function(){
	alert('welcome')
})
/// add a click function to the second button 
$('button').at(1).addEvent('click',function(){
	alert('goodbye')
})

/// You can use all code in one line
/// You can switch between selected element  by at function

$('button').at(0).addEvent('click',function(){alert('welcome')}).at(1).addEvent('click',function(){alert('goodbye')})

Switch between elements

you can switch between selected elements using change function see this example

<button>say hello </button>
<input type="checkbox"/>

without change function

/// add a click function to the first button 
$('button').addEvent('click',function(){
	alert('hello')
})
/// add change function to checkbox input
$('input').addEvent('click',function(){
	alert('checkbox changed')
})

with change function

/// add a click function to the first button 
$('button').addEvent('click',function(){
	alert('hello')
}).change('input').addEvent('change',function(){alert('checkbox changed')})

change allows you to switch between selected elements so you can write all your code inline

Hide or show or remove elements

Function Description
hide()hide the element
hideAfter(number)hide the element after delay
show()show the element
showAfter(number)show the element after delay
remove()remove the element from DOM
removeAfter(number)remove the element from DOM after delay

example

<h1>This text will hide directly (after 0s)</h1>
<h1>this text will hide after 1 second</h1>
<p style='opacity:0'>this text will be visible after 2 second and will be removed after 4 second </p>
$('h1').at(0).hide()
$('h1').at(1).hideAfter(1000)
$('p').showAfter(2000).removeAfter(4000)
// or use inline syntax with at and change
$('h1').at(0).hide().at(1).hideAfter(1000).change('p').showAfter(2000).removeAfter(4000)

Dealing with element attributes

Function Description
getAttribute('name')returns the value of an attribute
setAttribute('name','value')set attribute name to value
<input type="text" placeholder="password" />
<button>Hide / Show password</button>
$('button').addEvent('click',()=>{
	let InputType = $('input').getAttribute('type')
	if(InputType == "text"){
		$('input').setAttribute('type','password')
	}else{
		$('input').setAttribute('type','text')
	}
})

Dealing with element value

Function Description
getValue()returns the value of the element
saveValue('name')save the element value as name
setValue('new value') change the value of the element
appendValue('new value') add the value to the old value of the element
clearValue() clear the value of the element

example

<input type="text" placeholder="firstname"/>
<input type="text" placeholder="lastname"/>
<input type="text"/>
<button>click</button>
$('button').addEvent('click',()=>{
	let FirstName = $('input').at(0).getValue();
	let LastName = $('input').at(1).getValue();
	let message = "Welcome " + FirstName +" " + LastName;
	$('input')
	.at(2).setValue(message)
	.at(0).clearValue()
	.at(1).clearValue();

})

using saveValue function

how it works

this function allows you to save the value with a name

lets use the same example with the saveValue function

$('button').addEvent('click',()=>{
 $('input').at(0).saveValue('firstname') /// save the value as firstname
$('input').at(1).saveValue('lastname') /// save the value as lasttname
/// the !!firstname and !!lastname well be replaced with thier values 
	$('input')
	.at(2).setValue('Welcome !!firstname !!lastname') 
	.at(0).clearValue()
	.at(1).clearValue();
	//// the !!firstname will be replaced with the value of the firstname
	//// the !!lastname will be replaced with the value of the lastname
	/// you can save the value with any name you want 
	//and when you need to call it add `!!` befor it to replace it with the value 


})

you can also use the inline code

$('button').addEvent('click',()=>{
 $('input')
 .at(0).saveValue('firstname')
 .at(1).saveValue('lastname')
 .at(2).setValue('Welcome !!firstname !!lastname')
 .at(0).clearValue()
 .at(1).clearValue();

})

Dealing with element content

replace the inside html of the element after a delay
Function Description
innerHTML(html)replace the inside html of the element
innerHTMLAfter(html,number)
outerHTML(html)replace the element by a custom html code
outerHTMLAfter(html,number) replace the element by a custom html code after a delay
replaceText(text)replace the text Content of the element
replaceTextAfter(text,number) replace the text Content of the element after a delay

example

<button>click</button>
$('button').addEvent('click',()=>{
	
	
	 $('button')
	 .replaceText('welcome !!!')
	 .replaceTextAfter('Back !!!',2000)
	 .outerHTMLAfter('<h1>hello world </h1>',4000);

})

Dealing with element classNames

Function Description
addClass(class)add class to element
addClassAfter(class,number)add class to element after a delay
removeClass(class)remove class from the element
removeClassAfter(class,number)remove class from the element after a delay
toggleClass(class)remove class from the element if already exist and add it if not

note you can pass your custom css as an object but you need to use camelcase insteade of kababcase , so you need to use backgroundColor instead of background-color , and borderRadius insead of border-radius .

example

.blue{
	color:blue;
}
<h1>hello world </h1>
<button>add class </button>
<button>remove class </button>
<button>toggle (add/remove)</button>
$('button')
.at(0).addEvent('click',()=>{$('h1').addClass('blue')})
.at(1).addEvent('click',()=>{$('h1').removeClass('blue')})
.at(2).addEvent('click',()=>{$('h1').toggleClass('blue')})

Dealing with elements Styles

Function Description
addCss({prop:'value'})add css to element
addCssAfter({prop:'value'},number)add css to element after a delay
removeCss(prop)remove css from the element
removeCssAfter(prop,number)remove css from the element after a delay
addTransition()add a transition effect to the element

example

note : you can call addTransition function to add a transition effect while adding the css this function will add a transition property with the default value of 'all 0.4s ease 0s' you can change it by passing the transition value as a parameter like this addTransition('color 0.6s ease-in 0s');

<h1>hello world </h1>
<button>add css without addTransition </button>
<button>add css with addTransition </button>
$('button').at(0).addEvent('click',()=>{
	$('h1').addCss(
	{
		backgroundColor: 'blue' ,
		color: 'white'
	})

}).at(1).addEvent('click',()=>{

	/// add a custom ransition
	$('h1').addTransition('background-color 0.6s ease-in-out 0s').addCss(
	{
		backgroundColor: 'green' ,
		color: 'white'
	})

})

addVerify function

this function allows you to add a keyup event handler and each time when you change the value this function checks if the value of the input match the regular expression if true then add your custom success classname else add your custom error classname

syntax

...addVerify(regExp,successClass , errorClass);

example

create a success and error classNames

.success{
	backgroud:green;
	color:#fff;
}
.error{
	backgroud:red;
	color:#fff;
}
<input type="password" placeholder="password" />
/// check if the length of the input is 8 at least
$('input').addVerify(/^\w{8,}$/,'success','error');

/// example for email 
$('input[type="email"]').addVerify(/^\w+@\w+.\w+$/,'success','error');

/// example for phone number
$('input').addVerify(/^(+2126|06)\d{8}$/,'success','error');

/// example for url 
$('input').addVerify(/^(http:\/\/|https:\/\/)\w+.\w+\.\w+/,'success','error');