├── README.md
├── custom-jquery
├── index.html
├── app.js
└── gardenQuery.js
├── with-jquery
├── index.html
└── app.js
└── LICENSE
/README.md:
--------------------------------------------------------------------------------
1 | # Build a Simple jQuery from scratch
2 |
3 | * Alca - Build jQuery from scratch - https://twitch.tv/alca
4 |
5 | * [x] What is $
6 | * [x] How can a function do different things with different params
7 | * [ ] ~~Use a proxy to implement .css on an NodeList~~
8 | * [x] http://youmightnotneedjquery.com/
--------------------------------------------------------------------------------
/custom-jquery/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 | Hello World!
10 |
11 | - Hi Mom!
12 | - Today is a day.
13 | - I'm on twitch!
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/with-jquery/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 | Hello World!
10 |
11 | - Hi Mom!
12 | - Today is a day.
13 | - I'm on twitch!
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/custom-jquery/app.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 |
3 | $(() => {
4 | console.log('DOCUMENT IS READY!');
5 | $('h1').css('color', 'red');
6 | $('h1').css({
7 | fontFamily: 'sans-serif',
8 | cursor: 'pointer',
9 | });
10 | $('h1').on('click', () => {
11 | alert('WOUW');
12 | });
13 | $('li').css('font-family', 'sans-serif');
14 | $('li').each(function(i) {
15 | if (i % 2 === 0) {
16 | $(this).css('color', 'green');
17 | } else {
18 | $(this).css('color', 'orange');
19 | }
20 | });
21 | });
22 |
--------------------------------------------------------------------------------
/with-jquery/app.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 |
3 | $(() => {
4 | console.log('DOCUMENT IS READY!');
5 | $('h1').css('color', 'red');
6 | $('h1').css({
7 | fontFamily: 'sans-serif',
8 | cursor: 'pointer',
9 | });
10 | $('h1').on('click', () => {
11 | alert('WOUW');
12 | });
13 | $('li').css('font-family', 'sans-serif');
14 | $('li').each(function(i) {
15 | if (i % 2 === 0) {
16 | $(this).css('color', 'green');
17 | } else {
18 | $(this).css('color', 'orange');
19 | }
20 | });
21 | });
22 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2020 Coding Garden with CJ
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/custom-jquery/gardenQuery.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 |
3 | const makeNiceCollection = collection => {
4 | collection.each = (callback) => {
5 | collection.forEach((element, i) => {
6 | const boundFn = callback.bind(element);
7 | boundFn(i, element);
8 | });
9 | };
10 | collection.on = (eventName, handler) => {
11 | collection.forEach((element) => {
12 | element.addEventListener(eventName, handler);
13 | });
14 | };
15 | collection.css = (...cssArgs) => {
16 | if (typeof cssArgs[0] === 'string') {
17 | const [property, value] = cssArgs;
18 | collection.forEach((element) => {
19 | element.style[property] = value;
20 | });
21 | } else if (typeof cssArgs[0] === 'object') {
22 | const cssProps = Object.entries(cssArgs[0]);
23 | collection.forEach((element) => {
24 | cssProps.forEach(([property, value]) => {
25 | element.style[property] = value;
26 | });
27 | });
28 | }
29 | };
30 | };
31 |
32 | const $ = (...args) => {
33 | if (typeof args[0] === 'function') {
34 | // document ready listener
35 | const readyFn = args[0];
36 | document.addEventListener('DOMContentLoaded', readyFn);
37 | } else if (typeof args[0] === 'string') {
38 | // select an element!
39 | const selector = args[0];
40 | const collection = document.querySelectorAll(selector);
41 | makeNiceCollection(collection);
42 | return collection;
43 | } else if (args[0] instanceof HTMLElement) {
44 | // we have an element!
45 | const collection = [args[0]];
46 | makeNiceCollection(collection);
47 | return collection;
48 | }
49 | };
--------------------------------------------------------------------------------