VanillaJS Helpers
JavaScript functions set to aid in your development process.
How to use
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="dist/js/vanillajs-helpers.min.js"></script>
<script>
// VanillaJS Helpers function
</script>
</body>
</html>Ajax
vanillaAjax
/**
* @param {object} obj
* {
* url: 'string', required
* method: '', required
* data: 'string', required
* success: function(){}, required
* before: function(){}, [optional]
* complete: function(){}, [optional]
* error: function(){} [optional]
* }
*/
vanillaAjax(obj)Example
GET
vanillaAjax({
url: 'example.php',
method: 'GET',
success: function(){
var request = this;
if (request.status >= 200 && request.status < 400) {
// success
var data = JSON.parse(request.responseText);
console.log(data);
} else {
// the server received the request, but returned error
}
},
before: function(){
console.log('before send');
},
complete: function(){
console.log('complete');
},
error: function(){
console.log('error');
}
});POST
var user = {
name: 'John Smith',
email: 'johnsmith@github.com'
};
vanillaAjax({
url: 'example.php',
method: 'POST',
data: 'data=' + encodeURIComponent(JSON.stringify(user)),
success: function(){
var request = this;
if (request.status >= 200 && request.status < 400) {
// success
var data = JSON.parse(request.responseText);
console.log(data);
} else {
// the server received the request, but returned error
}
},
before: function(){
console.log('before send');
},
complete: function(){
console.log('complete');
},
error: function(){
console.log('error');
}
});vanillaAjaxGet
/**
* @param {object} obj
* {
* url: 'string', required
* success: function(){}, required
* before: function(){}, [optional]
* complete: function(){}, [optional]
* error: function(){} [optional]
* }
*/
vanillaAjaxGet(obj)Example
vanillaAjaxGet({
url: 'example.php',
success: function(){
var request = this;
if (request.status >= 200 && request.status < 400) {
// success
var data = JSON.parse(request.responseText);
console.log(data);
} else {
// the server received the request, but returned error
}
},
before: function(){
console.log('before send');
},
complete: function(){
console.log('complete');
},
error: function(){
console.log('error');
}
});vanillaAjaxPost
/**
* @param {object} obj
* {
* url: 'string', required
* data: 'string', required
* success: function(){}, required
* before: function(){}, [optional]
* complete: function(){}, [optional]
* error: function(){} [optional]
* }
*/
vanillaAjaxPost(obj)Example
var user = {
name: 'John Smith',
email: 'johnsmith@github.com'
};
vanillaAjaxPost({
url: 'example.php',
data: 'data=' + encodeURIComponent(JSON.stringify(user)),
success: function(){
var request = this;
if (request.status >= 200 && request.status < 400) {
// success
var data = JSON.parse(request.responseText);
console.log(data);
} else {
// the server received the request, but returned error
}
},
before: function(){
console.log('before send');
},
complete: function(){
console.log('complete');
},
error: function(){
console.log('error');
}
});vanillaSerialize
/**
* @param {object} elem - form selector
*/
vanillaSerialize(form)Example
<form>
<input type="text" name="name" value="John Smith">
<input type="email" name="email" value="johnsmith@github.com">
<button type="submit">Send</button>
</form>
<script src="dist/js/vanillajs-helpers.min.js"></script>
<script>
var form = document.querySelector('form');
form.addEventListener('submit', function(e){
e.preventDefault();
console.log(vanillaSerialize(this));
});
</script>Manipulation
vanillaRemoveClass
/**
* @param {object} elem - selector
* @param {string} elemClass - class name
*/
vanillaRemoveClass(elem, elemClass)Example
<style>
.bg { background-color: #ccc; }
</style>
<div id="wrapper" class="bg">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos cum, explicabo voluptatibus, ducimus quasi facere maiores sed totam autem sint ipsa illo natus consequatur ullam iure iusto nemo aliquid a.</p>
</div>
<button id="button">Action</button>
<script src="dist/js/vanillajs-helpers.min.js"></script>
<script>
var button = document.getElementById('button');
var elem = document.getElementById('wrapper');
button.addEventListener('click', function(){
vanillaRemoveClass(elem, 'bg');
});
</script>vanillaAddClass
/**
* @param {object} elem - selector
* @param {string} elemClass - class name
*/
vanillaAddClass(elem, elemClass)Example
<style>
.bg { background-color: #ccc; }
</style>
<div id="wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos cum, explicabo voluptatibus, ducimus quasi facere maiores sed totam autem sint ipsa illo natus consequatur ullam iure iusto nemo aliquid a.</p>
</div>
<button id="button">Action</button>
<script src="dist/js/vanillajs-helpers.min.js"></script>
<script>
var button = document.getElementById('button');
var elem = document.getElementById('wrapper');
button.addEventListener('click', function(){
vanillaAddClass(elem, 'bg');
});
</script>vanillaHasClass
/**
* @param {object} elem - selector
* @param {string} elemClass - class name
*/
vanillaHasClass(elem, elemClass)Example
<style>
.bg { background-color: #ccc; }
</style>
<div id="wrapper" class="bg">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos cum, explicabo voluptatibus, ducimus quasi facere maiores sed totam autem sint ipsa illo natus consequatur ullam iure iusto nemo aliquid a.</p>
</div>
<button id="button">Action</button>
<script src="dist/js/vanillajs-helpers.min.js"></script>
<script>
var button = document.getElementById('button');
var elem = document.getElementById('wrapper');
button.addEventListener('click', function(){
if(vanillaHasClass(elem, 'bg')) {
console.log(true);
} else {
console.log(false);
}
});
</script>vanillaToggleClass
/**
* @param {object} elem - selector
* @param {string} elemClass - class name
*/
vanillaToggleClass(elem, elemClass)Example
<style>
.bg { background-color: #ccc; }
</style>
<div id="wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos cum, explicabo voluptatibus, ducimus quasi facere maiores sed totam autem sint ipsa illo natus consequatur ullam iure iusto nemo aliquid a.</p>
</div>
<button id="button">Action</button>
<script src="dist/js/vanillajs-helpers.min.js"></script>
<script>
var button = document.getElementById('button');
var elem = document.getElementById('wrapper');
button.addEventListener('click', function(){
vanillaToggleClass(elem, 'bg');
});
</script>Traversing
vanillaClosest
/**
* @param {object} elem - selector
* @param {number} target - element target
*/
vanillaClosest(elem, target)Example
<div class="container">
<div id="wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos cum, explicabo voluptatibus, ducimus quasi facere maiores sed totam autem sint ipsa illo natus consequatur ullam iure iusto nemo aliquid a.</p>
</div>
<button id="button">Action</button>
</div>
<script src="dist/js/vanillajs-helpers.min.js"></script>
<script>
var button = document.getElementById('button');
var elem = document.getElementById('wrapper');
button.addEventListener('click', function(){
console.log(vanillaClosest(this, 2)); // return body
});
</script>Effects
vanillaFadeOut
/**
* @param {object} elem - selector
*/
vanillaFadeOut(elem)Example
<div id="wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos cum, explicabo voluptatibus, ducimus quasi facere maiores sed totam autem sint ipsa illo natus consequatur ullam iure iusto nemo aliquid a.</p>
</div>
<button id="button">Action</button>
<script src="dist/js/vanillajs-helpers.min.js"></script>
<script>
var button = document.getElementById('button');
var elem = document.getElementById('wrapper');
button.addEventListener('click', function(){
vanillaFadeOut(elem);
});
</script>vanillaFadeIn
/**
* @param {object} elem - selector
* @param {string} display - inline-block or block (default)
*/
vanillaFadeIn(elem, display)Example
<div id="wrapper" style="display: none;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos cum, explicabo voluptatibus, ducimus quasi facere maiores sed totam autem sint ipsa illo natus consequatur ullam iure iusto nemo aliquid a.</p>
</div>
<button id="button">Action</button>
<script src="dist/js/vanillajs-helpers.min.js"></script>
<script>
var button = document.getElementById('button');
var elem = document.getElementById('wrapper');
button.addEventListener('click', function(){
vanillaFadeIn(elem);
});
</script>Visibility filter
vanillaIsHidden
/**
* @param {object} elem - selector
*/
vanillaIsHidden(elem)Example
<div id="wrapper" style="display: none;"></div>
<script src="dist/js/vanillajs-helpers.min.js"></script>
<script>
var elem = document.getElementById('wrapper');
console.log(vanillaIsHidden(elem));
</script>vanillaIsVisible
/**
* @param {object} elem - selector
*/
vanillaIsVisible(elem)Example
<div id="wrapper"></div>
<script src="dist/js/vanillajs-helpers.min.js"></script>
<script>
var elem = document.getElementById('wrapper');
console.log(vanillaIsVisible(elem));
</script>Browser Support
 |
 |
 |
 |
 |
|---|---|---|---|---|
| IE 10+ ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |