Learn JavaScript fundamentals by building your own jQuery equivalent library
Your assignment will be to build your own jQuery library through a series of different steps. This will help you learn JavaScript. All tasks are jQuery equivalent methods.
To be clear, you cannot use jQuery. You must use standard JavaScript methods to create jQuery equivalent methods.
Rules:
You should solve one task at a time. Every task is described by specs and your implementation must pass all of them. It would be good for you to have one or more mentors, but this is not mandatory. They should go through your code and give you feedback on what is good, what is bad, and how you can write it better. Also, a mentor will help keep you on task, minimize your frustrations, and maximize the value of this project.
All tasks should be compatible with the W3C standard. Everything needs to work in all major modern browsers. You do not need to make them backwards compatible with older IE browsers.
Helpful references:
You need to write a function that computes n-th Fibonacci number.
The code can be found in repository /00.example/src.
Also, specs for this task can be found in /00.example/spec.
Terms:
References:
Description:
Can select elements based on one of three items:
Should return an array of selected HTML elements
Examples:
domSelector('#some-id');
domSelector('.some-class');
domSelector('some-tag');
Terms:
References:
Description:
Examples:
// set single property
cssProp(htmlElement, cssProperty, value);
// set multiple properties
cssProp(htmlElement, {cssProperty: value, cssProperty: value});
// get CSS property value
cssProp(htmlElement, cssProperty);
Terms:
References:
Description:
Examples:
cssClass.add(htmlElement, className);
cssClass.remove(htmlElement, className);
cssClass.toggle(htmlElement, className);
cssClass.has(htmlElement, className);
Terms:
References:
Description:
Examples:
dom.remove(element);
dom.append(targetElement, element);
dom.after(targetElement, element);
dom.prepend(targetElement, element);
dom.before(targetElement, element);
dom.val(targetElement);
Terms:
References:
Description:
Examples:
ajaxReq(url, options);
ajaxReq(url, {
method: 'POST',
data: {},
context: this,
failure: function() {},
success: function() {},
complete: function() {}
});
Terms:
References:
Description:
Examples:
eventListener.on(element, event, callback);
// removes a specific callback on an element of the event type
eventListener.off(element, event, callback);
// removes all callbacks on an element of the event type
eventListener.off(element, event);
// removes all callbacks on an element
eventListener.off(element);
Description:
Example:
eventListener.trigger(element, event);
Description:
Example:
eventListener
.delegate(monitoredElement, className, event, callback);
Create your own learnQuery library using the knowledge gained from making the previous functions. It should include all the functions you created in the previous tasks, and it should look and function similar to jQuery.
You have already created the functionality in the previous tasks. Now you simply need to provide a way to implement them.
Your solution must support chaining!
Hint: Pay attention to scope, closures, and context.
Example:
learnQuery('.thisClass')
.on('click', callback)
.removeClass('thisClass')
.addClass('anotherClass');
Affix accepts CSS selectors as arguments and adds those elements to the DOM. Details: https://github.com/searls/jasmine-fixture
LearnQuery is released under the MIT license.
Maintained and sponsored by [Infinum] (http://www.infinum.co).