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:
- every task should be in its own folder
- every task should be tested with jasmine. Specs should be in the task folder named spec
- every task should be completed in order. Do not skip ahead, as tasks build upon one another
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 /0.example/src.
Also, specs for this task can be found in /0.example/spec.
Terms:
- Selector - selects which elements in the DOM to work with.
References:
Description:
-
Can select elements based on one of three items:
- the given tag name
- class name
- or ID
-
Should return an array of selected HTML elements
Examples:
domSelector('#some-id');
domSelector('.some-class');
domSelector('some-tag');
Terms:
- CSS (cascading style sheets) is a stylesheet language used to describe the presentation of a document written in HTML or XML
References:
Description:
- Should be able to set/change single or multiple CSS property values for selected elements, and also get the value of any existing CSS property
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:
- CSS class selectors match an element based on the contents of the element's class attribute, one of which must match exactly the class name given
References:
Description:
- Should either add, remove, or toggle a named Class to the matched element(s), or else determine if that element is assigned that named class
Examples:
cssClass.add(htmlElement, className);
cssClass.remove(htmlElement, className);
cssClass.toggle(htmlElement, className);
cssClass.has(htmlElement, className);
Terms:
- "The Document Object Model (DOM) is a programming interface for HTML, XML and SVG documents. It provides a structured representation of the document (a tree) and it defines a way that the structure can be accessed from programs so that they can change the document structure, style and content."
References:
- Mozilla Developer NetworkDocument_Object_Model
Description:
- Should manipulate the DOM in the specified manner:
- remove an element
- append an element to the DOM
- insert an element in the DOM after a specified element
- insert an element in the DOM before a specified element
- get the value of a selected element
Examples:
dom.remove(element);
dom.append(targetElement, element);
dom.after(targetElement, element);
dom.prepend(targetElement, element);
dom.before(targetElement, element);
dom.val(targetElement);
Terms:
- Ajax stands for Asynchronous JavaScript and XML. It is a model, combining multiple technologies so web applications are able to make quick, incremental updates to the user interface without reloading the entire browser page
- All data is sent as JSON
References:
Description:
- should make a successful Ajax request and post
- should call a custom function on either success or failure (with a custom context)
- should call a custom function when a request is completed (with a custom context)
Examples:
ajaxReq(url, options);
ajaxReq(url, {
method: “POST”,
data: {},
context: this,
failure: function() {},
success: function() {},
complete: function() {}
});
Terms:
- Event Listeners attach event handlers to elements and listen for specified events. They specify what to do when specific events register on those elements
References:
Description:
- should register listeners for single or multiple events on the specified element and apply a callback
- should be able to remove listener callbacks from specified elements
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:
- Should trigger a specific event on a selected element
Example:
eventListener.trigger(element, event);
Description:
- Delegate a specific event to an element with the specified class name
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 CHAINNING!
Hint: Pay attention to scope, closures, and context.
Example:
learnQuery('.thisClass').on('click', callback).removeClass('thisClass').addClass('anotherClass');
LearnQuery is released under the MIT license.