├── style.css ├── 03-functions-scope ├── 08-iife │ ├── otherscript.js │ ├── script.js │ └── index.html ├── 10-execution-context-in-action │ ├── script.js │ └── index.html ├── 05-nested-scope │ ├── script.js │ └── index.html ├── 11-call-stack │ ├── index.html │ └── script.js ├── 04-block-scope │ ├── index.html │ └── script.js ├── 01-function-basics │ ├── index.html │ └── script.js ├── 07-arrow-functions │ ├── index.html │ └── script.js ├── 06-declaration-vs-expression │ ├── script.js │ └── index.html ├── 09-function-challenges │ ├── index.html │ └── script.js ├── 02-params-arguments │ ├── index.html │ └── script.js └── 03-global-function-scope │ ├── index.html │ └── script.js ├── 09-fetch-and-async-await ├── 01-fetch-basics │ ├── test.txt │ ├── movies.json │ ├── index.html │ └── script.js ├── 09-multiple-promises-async-await │ ├── actors.json │ ├── directors.json │ ├── movies.json │ ├── index.html │ └── script.js ├── 07-try-catch │ ├── index.html │ └── script.js ├── 06-async-await │ ├── index.html │ └── script.js ├── 03-fetch-options │ ├── index.html │ └── script.js ├── 05-fetch-error-handling │ ├── index.html │ ├── random-user-generator │ │ ├── index.html │ │ ├── spinner.css │ │ └── script.js │ └── script.js ├── 08-async-await-error-handling │ ├── index.html │ └── script.js ├── 04-typicode-todos-mini-project │ └── typicode-todos │ │ ├── index.html │ │ ├── style.css │ │ └── script.js └── 02-random-user-project │ └── random-user-generator │ ├── index.html │ ├── spinner.css │ └── script.js ├── 02-arrays-and-objects ├── 08-json-intro │ ├── todo.json │ ├── index.html │ └── script.js ├── 01-array-basics │ ├── index.html │ └── script.js ├── 02-array-methods │ ├── index.html │ └── script.js ├── 04-array-challenge │ ├── index.html │ ├── script.js │ └── 04-array-challenges.md ├── 05-object-literals │ ├── index.html │ └── script.js ├── 09-object-challenge │ ├── index.html │ ├── script.js │ └── 09-object-challenge.md ├── 07-destructuring-naming │ ├── index.html │ └── script.js ├── 03-array-nesting-concat-spread │ ├── index.html │ └── script.js └── 06-object-spread-methods │ ├── index.html │ └── script.js ├── Introduction to JavaScript-2022.pdf ├── 07-events ├── 02-mouse-events │ └── shopping-list │ │ ├── images │ │ └── note.png │ │ └── script.js ├── 03-event-object │ ├── shopping-list │ │ ├── images │ │ │ └── note.png │ │ └── script.js │ └── APP.JS ├── 06-input-events │ └── shopping-list │ │ ├── images │ │ └── note.png │ │ └── script.js ├── 01-event-listeners │ └── shopping-list │ │ ├── images │ │ └── note.png │ │ ├── script.js │ │ └── index.html ├── 04-keyboard-events │ └── shopping-list │ │ ├── images │ │ └── note.png │ │ └── script.js ├── 07-form-submission │ └── shopping-list │ │ ├── images │ │ └── note.png │ │ └── script.js ├── 08-event-bubbling │ └── shopping-list │ │ ├── images │ │ └── note.png │ │ └── script.js ├── 09-event-delegation │ └── shopping-list │ │ ├── images │ │ └── note.png │ │ ├── script.js │ │ └── index.html ├── 05-event-keycode-project │ └── event-keycodes │ │ ├── index.html │ │ ├── style.css │ │ └── script.js └── 10-window-events │ └── script.js ├── 04-logic-control-flow ├── 01-if-statements │ ├── comparison-operators.png │ ├── index.html │ └── script.js ├── 03-switches │ ├── index.html │ └── script.js ├── 08-ternary-operator │ ├── index.html │ └── script.js ├── 02-else-if-nesting │ ├── index.html │ └── script.js ├── 06-logical-operators │ ├── index.html │ └── script.js ├── 05-truthy-falsy │ ├── index.html │ └── script.js ├── 07-logical-assignment │ ├── index.html │ └── script.js └── 04-calculator-challenge │ ├── index.html │ ├── script.js │ └── 04-calculator-challenge.md ├── 06-document-object-model ├── 07-create-elements │ └── shopping-list │ │ ├── images │ │ └── note.png │ │ ├── script.js │ │ └── index.html ├── 10-insert-elements │ └── shopping-list │ │ ├── images │ │ └── note.png │ │ ├── script.js │ │ └── index.html ├── 13-remove-elements │ └── shopping-list │ │ ├── images │ │ └── note.png │ │ ├── script.js │ │ └── index.html ├── 12-replacing-elements │ └── shopping-list │ │ ├── images │ │ └── note.png │ │ └── script.js ├── 03-dom-selectors-single-element │ └── shopping-list │ │ ├── images │ │ └── note.png │ │ └── script.js ├── 09-refactor-to-multiple-functions │ └── shopping-list │ │ ├── images │ │ └── note.png │ │ └── script1.js ├── 11-custom-insertafter-challenge │ ├── shopping-list │ │ ├── images │ │ │ └── note.png │ │ └── script.js │ └── 11-custom-insertafter.md ├── 04-dom-selectors-multiple-elements │ └── shopping-list │ │ ├── images │ │ └── note.png │ │ └── script.js ├── 02-examining-document-object-properties │ └── shopping-list │ │ ├── images │ │ └── note.png │ │ ├── script.js │ │ └── index.html ├── 08-create-item-innerHTML-vs-createElement │ └── shopping-list │ │ ├── images │ │ └── note.png │ │ └── script.js ├── 14-styles-classes │ ├── style.css │ ├── index.html │ └── script.js ├── 01-dom-intro │ ├── index.html │ └── script.js ├── 05-traversing-the-dom-elements │ └── shoppinglist │ │ ├── index.html │ │ ├── style.css │ │ └── script.js └── 06-traversing-the-dom-nodes │ └── shoppinglist │ ├── index.html │ ├── style.css │ └── script.js ├── 01-variables-data-types ├── 02-comments-shortcuts │ ├── script.js │ └── index.html ├── 01-console │ ├── index.html │ └── script.js ├── 03-variables │ ├── index.html │ └── script.js ├── 04-data-types │ ├── index.html │ └── script.js ├── 07-operators │ ├── index.html │ └── script.js ├── 05-stack-heap │ ├── index.html │ └── script.js ├── 12-math-object │ ├── index.html │ └── script.js ├── 08-type-coercion │ ├── index.html │ └── script.js ├── 14-dates-and-times │ ├── index.html │ └── script.js ├── 06-type-conversion │ ├── index.html │ └── script.js ├── 09-strings │ ├── index.html │ └── script.js ├── 11-numbers │ ├── index.html │ └── script.js ├── 13-number-challenge │ ├── index.html │ ├── script.js │ └── 13-number-challenge.md ├── 10-capitalize-challenge │ ├── index.html │ ├── script.js │ └── 10-capitalize-challenge.md └── 15-date-object-methods │ ├── index.html │ └── script.js ├── 08-asynchronous-javascript ├── 04-ajax-xhr │ ├── movies.json │ ├── index.html │ ├── style.css │ └── script.js ├── 06-callback-hell │ ├── actors.json │ ├── directors.json │ ├── movies.json │ ├── index.html │ └── script.js ├── 11-promise-all │ ├── actors.json │ ├── directors.json │ ├── movies.json │ ├── index.html │ └── script.js ├── 10-promises-vs-callback-hell │ ├── actors.json │ ├── directors.json │ ├── movies.json │ ├── index.html │ └── script.js ├── 07-promises │ ├── index.html │ └── script.js ├── 09-promise-chaining │ ├── index.html │ └── script.js ├── 01-settimeout-cleartimeout │ ├── index.html │ └── script.js ├── 03-callbacks │ ├── index.html │ ├── style.css │ └── script.js ├── 08-callback-to-promise │ ├── index.html │ ├── style.css │ └── script.js ├── 02-setinterval-clearinterval │ ├── index.html │ └── script.js └── 05-joke-generator-challenge │ └── chuck-joke-generator │ ├── index.html │ ├── script.js │ └── style.css ├── 05-iteration-array-methods ├── 02-break-and-continue │ ├── script.js │ └── index.html ├── 09-map │ ├── index.html │ └── script.js ├── 08-filter │ ├── index.html │ └── script.js ├── 10-reduce │ ├── index.html │ └── script.js ├── 07-forEach │ ├── index.html │ └── script.js ├── 01-for-loop │ ├── index.html │ └── script.js ├── 05-for-of-loop │ ├── index.html │ └── script.js ├── 06-for-in-loop │ ├── index.html │ └── script.js ├── 03-while-do-while │ ├── index.html │ └── script.js ├── 04-fizzbuzz-challenge │ ├── index.html │ ├── script.js │ └── 04-fizzbuzz-challenge.md └── 11-array-method-challenges │ ├── index.html │ └── script.js ├── index.html ├── sol.js ├── math.js └── array.js /style.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /03-functions-scope/08-iife/otherscript.js: -------------------------------------------------------------------------------- 1 | const user = 'Brad'; 2 | console.log(user); 3 | -------------------------------------------------------------------------------- /09-fetch-and-async-await/01-fetch-basics/test.txt: -------------------------------------------------------------------------------- 1 | This is a text file to test out with the Fetch API -------------------------------------------------------------------------------- /02-arrays-and-objects/08-json-intro/todo.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": "1", 4 | "title": "Take out trash" 5 | } 6 | ] 7 | -------------------------------------------------------------------------------- /Introduction to JavaScript-2022.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeroprojecthub/4tosixjavascript/HEAD/Introduction to JavaScript-2022.pdf -------------------------------------------------------------------------------- /07-events/02-mouse-events/shopping-list/images/note.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeroprojecthub/4tosixjavascript/HEAD/07-events/02-mouse-events/shopping-list/images/note.png -------------------------------------------------------------------------------- /07-events/03-event-object/shopping-list/images/note.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeroprojecthub/4tosixjavascript/HEAD/07-events/03-event-object/shopping-list/images/note.png -------------------------------------------------------------------------------- /07-events/06-input-events/shopping-list/images/note.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeroprojecthub/4tosixjavascript/HEAD/07-events/06-input-events/shopping-list/images/note.png -------------------------------------------------------------------------------- /07-events/01-event-listeners/shopping-list/images/note.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeroprojecthub/4tosixjavascript/HEAD/07-events/01-event-listeners/shopping-list/images/note.png -------------------------------------------------------------------------------- /07-events/04-keyboard-events/shopping-list/images/note.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeroprojecthub/4tosixjavascript/HEAD/07-events/04-keyboard-events/shopping-list/images/note.png -------------------------------------------------------------------------------- /07-events/07-form-submission/shopping-list/images/note.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeroprojecthub/4tosixjavascript/HEAD/07-events/07-form-submission/shopping-list/images/note.png -------------------------------------------------------------------------------- /07-events/08-event-bubbling/shopping-list/images/note.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeroprojecthub/4tosixjavascript/HEAD/07-events/08-event-bubbling/shopping-list/images/note.png -------------------------------------------------------------------------------- /07-events/09-event-delegation/shopping-list/images/note.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeroprojecthub/4tosixjavascript/HEAD/07-events/09-event-delegation/shopping-list/images/note.png -------------------------------------------------------------------------------- /04-logic-control-flow/01-if-statements/comparison-operators.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeroprojecthub/4tosixjavascript/HEAD/04-logic-control-flow/01-if-statements/comparison-operators.png -------------------------------------------------------------------------------- /06-document-object-model/07-create-elements/shopping-list/images/note.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeroprojecthub/4tosixjavascript/HEAD/06-document-object-model/07-create-elements/shopping-list/images/note.png -------------------------------------------------------------------------------- /06-document-object-model/10-insert-elements/shopping-list/images/note.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeroprojecthub/4tosixjavascript/HEAD/06-document-object-model/10-insert-elements/shopping-list/images/note.png -------------------------------------------------------------------------------- /06-document-object-model/13-remove-elements/shopping-list/images/note.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeroprojecthub/4tosixjavascript/HEAD/06-document-object-model/13-remove-elements/shopping-list/images/note.png -------------------------------------------------------------------------------- /06-document-object-model/12-replacing-elements/shopping-list/images/note.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeroprojecthub/4tosixjavascript/HEAD/06-document-object-model/12-replacing-elements/shopping-list/images/note.png -------------------------------------------------------------------------------- /06-document-object-model/03-dom-selectors-single-element/shopping-list/images/note.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeroprojecthub/4tosixjavascript/HEAD/06-document-object-model/03-dom-selectors-single-element/shopping-list/images/note.png -------------------------------------------------------------------------------- /06-document-object-model/09-refactor-to-multiple-functions/shopping-list/images/note.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeroprojecthub/4tosixjavascript/HEAD/06-document-object-model/09-refactor-to-multiple-functions/shopping-list/images/note.png -------------------------------------------------------------------------------- /06-document-object-model/11-custom-insertafter-challenge/shopping-list/images/note.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeroprojecthub/4tosixjavascript/HEAD/06-document-object-model/11-custom-insertafter-challenge/shopping-list/images/note.png -------------------------------------------------------------------------------- /01-variables-data-types/02-comments-shortcuts/script.js: -------------------------------------------------------------------------------- 1 | // This is a single line of code 2 | 3 | /* 4 | Multi-line comment 5 | console.log(100); 6 | 7 | console.log('Hello World'); 8 | 9 | console.log(20, 'Hello', true); 10 | */ 11 | -------------------------------------------------------------------------------- /06-document-object-model/04-dom-selectors-multiple-elements/shopping-list/images/note.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeroprojecthub/4tosixjavascript/HEAD/06-document-object-model/04-dom-selectors-multiple-elements/shopping-list/images/note.png -------------------------------------------------------------------------------- /06-document-object-model/02-examining-document-object-properties/shopping-list/images/note.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeroprojecthub/4tosixjavascript/HEAD/06-document-object-model/02-examining-document-object-properties/shopping-list/images/note.png -------------------------------------------------------------------------------- /06-document-object-model/08-create-item-innerHTML-vs-createElement/shopping-list/images/note.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zeroprojecthub/4tosixjavascript/HEAD/06-document-object-model/08-create-item-innerHTML-vs-createElement/shopping-list/images/note.png -------------------------------------------------------------------------------- /07-events/03-event-object/APP.JS: -------------------------------------------------------------------------------- 1 | async function getUser() { 2 | const response = await fetch('https://api.github.com/users/zeroprojecthub'); 3 | const data = await response.json(); 4 | console.log(data); 5 | } 6 | 7 | getUser(); 8 | -------------------------------------------------------------------------------- /08-asynchronous-javascript/04-ajax-xhr/movies.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "title": "The Godfather", 4 | "year": "1972" 5 | }, 6 | { 7 | "title": "Goodfellas", 8 | "year": 1990 9 | }, 10 | { 11 | "title": "A Bronx Tale", 12 | "year": 1993 13 | }, 14 | { 15 | "title": "Casino", 16 | "year": 1994 17 | } 18 | ] 19 | -------------------------------------------------------------------------------- /08-asynchronous-javascript/06-callback-hell/actors.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "Al Pacino", 4 | "age": "78" 5 | }, 6 | { 7 | "name": "Robert De Niro", 8 | "age": "76" 9 | }, 10 | { 11 | "name": "Joe Pesci", 12 | "age": "77" 13 | }, 14 | { 15 | "name": "Chazz Palminteri", 16 | "age": "62" 17 | } 18 | ] 19 | -------------------------------------------------------------------------------- /08-asynchronous-javascript/11-promise-all/actors.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "Al Pacino", 4 | "age": "78" 5 | }, 6 | { 7 | "name": "Robert De Niro", 8 | "age": "76" 9 | }, 10 | { 11 | "name": "Joe Pesci", 12 | "age": "77" 13 | }, 14 | { 15 | "name": "Chazz Palminteri", 16 | "age": "62" 17 | } 18 | ] 19 | -------------------------------------------------------------------------------- /08-asynchronous-javascript/10-promises-vs-callback-hell/actors.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "Al Pacino", 4 | "age": "78" 5 | }, 6 | { 7 | "name": "Robert De Niro", 8 | "age": "76" 9 | }, 10 | { 11 | "name": "Joe Pesci", 12 | "age": "77" 13 | }, 14 | { 15 | "name": "Chazz Palminteri", 16 | "age": "62" 17 | } 18 | ] 19 | -------------------------------------------------------------------------------- /08-asynchronous-javascript/11-promise-all/directors.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "Brian De Palma", 4 | "age": "78" 5 | }, 6 | { 7 | "name": "Francis Ford Coppola", 8 | "age": "82" 9 | }, 10 | { 11 | "name": "Martin Scorsese", 12 | "age": "76" 13 | }, 14 | { 15 | "name": "Robert De Niro", 16 | "age": "76" 17 | } 18 | ] 19 | -------------------------------------------------------------------------------- /09-fetch-and-async-await/09-multiple-promises-async-await/actors.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "Al Pacino", 4 | "age": "78" 5 | }, 6 | { 7 | "name": "Robert De Niro", 8 | "age": "76" 9 | }, 10 | { 11 | "name": "Joe Pesci", 12 | "age": "77" 13 | }, 14 | { 15 | "name": "Chazz Palminteri", 16 | "age": "62" 17 | } 18 | ] 19 | -------------------------------------------------------------------------------- /08-asynchronous-javascript/06-callback-hell/directors.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "Brian De Palma", 4 | "age": "78" 5 | }, 6 | { 7 | "name": "Francis Ford Coppola", 8 | "age": "82" 9 | }, 10 | { 11 | "name": "Martin Scorsese", 12 | "age": "76" 13 | }, 14 | { 15 | "name": "Robert De Niro", 16 | "age": "76" 17 | } 18 | ] 19 | -------------------------------------------------------------------------------- /06-document-object-model/14-styles-classes/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Arial', sans-serif; 3 | line-height: 1.3; 4 | } 5 | 6 | 7 | .hidden { 8 | display: none; 9 | } 10 | 11 | 12 | .card { 13 | background: #f4f4f4; 14 | border: 1px #ccc solid; 15 | padding: 15px; 16 | } 17 | 18 | 19 | .dark { 20 | background: #333; 21 | color: #fff; 22 | } 23 | -------------------------------------------------------------------------------- /08-asynchronous-javascript/10-promises-vs-callback-hell/directors.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "Brian De Palma", 4 | "age": "78" 5 | }, 6 | { 7 | "name": "Francis Ford Coppola", 8 | "age": "82" 9 | }, 10 | { 11 | "name": "Martin Scorsese", 12 | "age": "76" 13 | }, 14 | { 15 | "name": "Robert De Niro", 16 | "age": "76" 17 | } 18 | ] 19 | -------------------------------------------------------------------------------- /09-fetch-and-async-await/09-multiple-promises-async-await/directors.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "Brian De Palma", 4 | "age": "78" 5 | }, 6 | { 7 | "name": "Francis Ford Coppola", 8 | "age": "82" 9 | }, 10 | { 11 | "name": "Martin Scorsese", 12 | "age": "76" 13 | }, 14 | { 15 | "name": "Robert De Niro", 16 | "age": "76" 17 | } 18 | ] 19 | -------------------------------------------------------------------------------- /08-asynchronous-javascript/11-promise-all/movies.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "title": "Scarface", 4 | "release_year": "1983" 5 | }, 6 | { 7 | "title": "The Godfather", 8 | "release_year": "1972" 9 | }, 10 | { 11 | "title": "Goodfellas", 12 | "release_year": "1990" 13 | }, 14 | { 15 | "title": "A Bronx Tale", 16 | "release_year": "1993" 17 | } 18 | ] 19 | -------------------------------------------------------------------------------- /09-fetch-and-async-await/01-fetch-basics/movies.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "title": "Scarface", 4 | "release_year": "1983" 5 | }, 6 | { 7 | "title": "The Godfather", 8 | "release_year": "1972" 9 | }, 10 | { 11 | "title": "Goodfellas", 12 | "release_year": "1990" 13 | }, 14 | { 15 | "title": "A Bronx Tale", 16 | "release_year": "1993" 17 | } 18 | ] 19 | -------------------------------------------------------------------------------- /05-iteration-array-methods/02-break-and-continue/script.js: -------------------------------------------------------------------------------- 1 | // Break 2 | for (let i = 0; i <= 20; i++) { 3 | if (i === 15) { 4 | console.log('Breaking...'); 5 | break; 6 | } 7 | console.log(i); 8 | } 9 | 10 | // Continue 11 | for (let i = 0; i <= 20; i++) { 12 | if (i === 13) { 13 | console.log('Skipping 13...'); 14 | continue; 15 | } 16 | console.log(i); 17 | } 18 | -------------------------------------------------------------------------------- /08-asynchronous-javascript/06-callback-hell/movies.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "title": "Scarface", 4 | "release_year": "1983" 5 | }, 6 | { 7 | "title": "The Godfather", 8 | "release_year": "1972" 9 | }, 10 | { 11 | "title": "Goodfellas", 12 | "release_year": "1990" 13 | }, 14 | { 15 | "title": "A Bronx Tale", 16 | "release_year": "1993" 17 | } 18 | ] 19 | -------------------------------------------------------------------------------- /08-asynchronous-javascript/10-promises-vs-callback-hell/movies.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "title": "Scarface", 4 | "release_year": "1983" 5 | }, 6 | { 7 | "title": "The Godfather", 8 | "release_year": "1972" 9 | }, 10 | { 11 | "title": "Goodfellas", 12 | "release_year": "1990" 13 | }, 14 | { 15 | "title": "A Bronx Tale", 16 | "release_year": "1993" 17 | } 18 | ] 19 | -------------------------------------------------------------------------------- /09-fetch-and-async-await/09-multiple-promises-async-await/movies.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "title": "Scarface", 4 | "release_year": "1983" 5 | }, 6 | { 7 | "title": "The Godfather", 8 | "release_year": "1972" 9 | }, 10 | { 11 | "title": "Goodfellas", 12 | "release_year": "1990" 13 | }, 14 | { 15 | "title": "A Bronx Tale", 16 | "release_year": "1993" 17 | } 18 | ] 19 | -------------------------------------------------------------------------------- /03-functions-scope/10-execution-context-in-action/script.js: -------------------------------------------------------------------------------- 1 | // Go to 'sources' tab and add a breakpoint at the first line and step through to see the execution phase in action 2 | const x = 100; 3 | const y = 50; 4 | 5 | function getSum(n1, n2) { 6 | const sum = n1 + n2; 7 | return sum; 8 | } 9 | 10 | const sum1 = getSum(x, y); 11 | const sum2 = getSum(10, 5); 12 | 13 | console.log(sum1, sum2); 14 | -------------------------------------------------------------------------------- /03-functions-scope/05-nested-scope/script.js: -------------------------------------------------------------------------------- 1 | function first() { 2 | const x = 100; 3 | 4 | function second() { 5 | const y = 200; 6 | console.log(x + y); 7 | } 8 | 9 | // console.log(y); 10 | 11 | second(); 12 | } 13 | 14 | first(); 15 | 16 | if (true) { 17 | const x = 100; 18 | 19 | if (x === 100) { 20 | const y = 200; 21 | console.log(x + y); 22 | } 23 | 24 | console.log(y); 25 | } 26 | -------------------------------------------------------------------------------- /05-iteration-array-methods/09-map/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | map 8 | 9 | 10 |

map

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /01-variables-data-types/01-console/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Console 8 | 9 | 10 |

Console

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /05-iteration-array-methods/08-filter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Filter 8 | 9 | 10 |

Filter

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /05-iteration-array-methods/10-reduce/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Reduce 8 | 9 | 10 |

Reduce

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /03-functions-scope/11-call-stack/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Call Stack 8 | 9 | 10 |

Call Stack

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /04-logic-control-flow/03-switches/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Switches 8 | 9 | 10 |

Switches

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /05-iteration-array-methods/07-forEach/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | ForEach 8 | 9 | 10 |

ForEach

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /01-variables-data-types/03-variables/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Variables 8 | 9 | 10 |

Variables

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /01-variables-data-types/04-data-types/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Data Types 8 | 9 | 10 |

Data Types

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /01-variables-data-types/07-operators/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Operators 8 | 9 | 10 |

Operators

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /02-arrays-and-objects/08-json-intro/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JSON Intro 8 | 9 | 10 |

JSON Intro

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /03-functions-scope/04-block-scope/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Block Scope 8 | 9 | 10 |

Block Scope

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /03-functions-scope/05-nested-scope/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Nested Scope 8 | 9 | 10 |

Nested Scope

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /05-iteration-array-methods/01-for-loop/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | For Loop 8 | 9 | 10 |

For Loop

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /08-asynchronous-javascript/07-promises/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Promises 8 | 9 | 10 |

Promises

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /01-variables-data-types/05-stack-heap/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Stack vs Heap 8 | 9 | 10 |

Stack vs Heap

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /01-variables-data-types/12-math-object/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Math Object 8 | 9 | 10 |

Math Object

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /02-arrays-and-objects/01-array-basics/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Array Basics 8 | 9 | 10 |

Array Basics

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /05-iteration-array-methods/05-for-of-loop/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | For Of Loop 8 | 9 | 10 |

For Of Loop

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /05-iteration-array-methods/06-for-in-loop/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | For In Loop 8 | 9 | 10 |

For In Loop

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /09-fetch-and-async-await/01-fetch-basics/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Fetch API 8 | 9 | 10 |

Fetch API

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /09-fetch-and-async-await/07-try-catch/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Try... Catch 8 | 9 | 10 |

Try... Catch

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /01-variables-data-types/08-type-coercion/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Type Coercion 8 | 9 | 10 |

Type Coercion

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /01-variables-data-types/14-dates-and-times/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Dates & Times 8 | 9 | 10 |

Dates & Times

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /02-arrays-and-objects/02-array-methods/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Array Methods 8 | 9 | 10 |

Array Methods

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /03-functions-scope/01-function-basics/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Function Basics 8 | 9 | 10 |

Function Basics

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /03-functions-scope/07-arrow-functions/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Arrow Functions 8 | 9 | 10 |

Arrow Functions

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /04-logic-control-flow/01-if-statements/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | If Statements 8 | 9 | 10 |

If Statements

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /09-fetch-and-async-await/06-async-await/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Async & Await 8 | 9 | 10 |

Async & Await

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /09-fetch-and-async-await/07-try-catch/script.js: -------------------------------------------------------------------------------- 1 | // try { 2 | // console.log(x); 3 | // } catch (error) { 4 | // console.log('Error: ' + error); 5 | // } 6 | 7 | function double(number) { 8 | if (isNaN(number)) { 9 | throw new Error(number + ' is not a number'); 10 | } 11 | 12 | return number * 2; 13 | } 14 | 15 | try { 16 | const y = double('hello'); 17 | console.log(y); 18 | } catch (error) { 19 | console.log(error); 20 | } 21 | -------------------------------------------------------------------------------- /01-variables-data-types/06-type-conversion/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Type Conversion 8 | 9 | 10 |

Type Conversion

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /02-arrays-and-objects/04-array-challenge/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Array Challenge 8 | 9 | 10 |

Array Challenge

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /02-arrays-and-objects/05-object-literals/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Object Literals 8 | 9 | 10 |

Object Literals

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /02-arrays-and-objects/09-object-challenge/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Object Challenge 8 | 9 | 10 |

Object Challenge

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /03-functions-scope/06-declaration-vs-expression/script.js: -------------------------------------------------------------------------------- 1 | // Function Declaration 2 | function addDollarSign(value) { 3 | return '$' + value; 4 | } 5 | 6 | // When using declarations, you can invoke the function before the declaration. With expressions, you can not 7 | console.log(addDollarSign(100)); 8 | 9 | // Function Expression 10 | const addPlusSign = function (value) { 11 | return '+' + value; 12 | }; 13 | 14 | console.log(addPlusSign(200)); 15 | -------------------------------------------------------------------------------- /04-logic-control-flow/08-ternary-operator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Ternary Operator 8 | 9 | 10 |

Ternary Operator

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /05-iteration-array-methods/06-for-in-loop/script.js: -------------------------------------------------------------------------------- 1 | // Loop through objects 2 | const colorObj = { 3 | color1: 'red', 4 | color2: 'blue', 5 | color3: 'orange', 6 | color4: 'green', 7 | }; 8 | 9 | for (const key in colorObj) { 10 | console.log(key, colorObj[key]); 11 | } 12 | 13 | // Loop through arrays 14 | const colorArr = ['red', 'green', 'blue', 'yellow']; 15 | 16 | for (const key in colorArr) { 17 | console.log(colorArr[key]); 18 | } 19 | -------------------------------------------------------------------------------- /08-asynchronous-javascript/06-callback-hell/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Callback Hell 8 | 9 | 10 |

Callback Hell

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /08-asynchronous-javascript/11-promise-all/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Promise.all() 8 | 9 | 10 |

Promise.all()

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /09-fetch-and-async-await/03-fetch-options/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Fetch Options 8 | 9 | 10 |

Fetch Options

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /01-variables-data-types/09-strings/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Working With Strings 8 | 9 | 10 |

Working With Strings

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /01-variables-data-types/11-numbers/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Working With Numbers 8 | 9 | 10 |

Working With Numbers

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /01-variables-data-types/13-number-challenge/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Number Challenge 8 | 9 | 10 |

Number Challenge

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /04-logic-control-flow/02-else-if-nesting/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Else-If & Nesting 8 | 9 | 10 |

Else-If & Nesting

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /04-logic-control-flow/06-logical-operators/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Logical Operators 8 | 9 | 10 |

Logical Operators

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /03-functions-scope/09-function-challenges/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Function Challenges 8 | 9 | 10 |

Function Challenges

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /03-functions-scope/10-execution-context-in-action/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Execution Context 8 | 9 | 10 |

Execution Context

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /04-logic-control-flow/05-truthy-falsy/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Truthy & Falsy Values 8 | 9 | 10 |

Truthy & Falsy Values

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /04-logic-control-flow/07-logical-assignment/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Logical Assignment 8 | 9 | 10 |

Logical Assignment

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /05-iteration-array-methods/02-break-and-continue/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Break & Continue 8 | 9 | 10 |

Break & Continue

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /06-document-object-model/07-create-elements/shopping-list/script.js: -------------------------------------------------------------------------------- 1 | const div = document.createElement('div'); 2 | div.className = 'my-element'; 3 | div.id = 'my-element'; 4 | div.setAttribute('title', 'My Element'); 5 | 6 | // div.innerText = 'Hello World'; 7 | 8 | const text = document.createTextNode('Hello World'); 9 | div.appendChild(text); 10 | 11 | // document.body.appendChild(div); 12 | 13 | document.querySelector('ul').appendChild(div); 14 | -------------------------------------------------------------------------------- /08-asynchronous-javascript/09-promise-chaining/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Promise Chaining 8 | 9 | 10 |

Promise Chaining

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 13 | 14 | 15 |

Hello js

16 | 17 | 18 | -------------------------------------------------------------------------------- /01-variables-data-types/02-comments-shortcuts/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Comments & Shortcuts 8 | 9 | 10 |

Comments & Shortcuts

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /01-variables-data-types/10-capitalize-challenge/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Capitalize Challenge 8 | 9 | 10 |

Capitalize Challenge

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /01-variables-data-types/15-date-object-methods/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Date Object Methods 8 | 9 | 10 |

Date Object Methods

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /03-functions-scope/08-iife/script.js: -------------------------------------------------------------------------------- 1 | // IFFE Syntax (Has it's own scope and runs right away) 2 | (function () { 3 | const user = 'John'; 4 | console.log(user); 5 | const hello = () => console.log('Hello from the IIFE'); 6 | hello(); 7 | })(); 8 | 9 | // Params 10 | (function (name) { 11 | console.log('Hello ' + name); 12 | })('Shawn'); 13 | 14 | // Named IIFE (Can only be called recursively) 15 | (function hello() { 16 | console.log('Hello'); 17 | })(); 18 | -------------------------------------------------------------------------------- /04-logic-control-flow/04-calculator-challenge/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Calculator Challenge 8 | 9 | 10 |

Calculator Challenge

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /05-iteration-array-methods/03-while-do-while/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | While & Do While Loop 8 | 9 | 10 |

While & Do While Loop

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /05-iteration-array-methods/04-fizzbuzz-challenge/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | FizzBuzz Challenge 8 | 9 | 10 |

FizzBuzz Challenge

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /02-arrays-and-objects/07-destructuring-naming/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Destructuring & Naming 8 | 9 | 10 |

Destructuring & Naming

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /03-functions-scope/02-params-arguments/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | More on Params & Arguments 8 | 9 | 10 |

More on Params & Arguments

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /03-functions-scope/03-global-function-scope/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Global & Function Scope 8 | 9 | 10 |

Global & Function Scope

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /07-events/05-event-keycode-project/event-keycodes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Event KeyCodes 8 | 9 | 10 |
Press and key to get the keycode
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /09-fetch-and-async-await/05-fetch-error-handling/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Fetch API Error Handling 8 | 9 | 10 |

Fetch API Error Handling

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /05-iteration-array-methods/11-array-method-challenges/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Array Method Challenges 8 | 9 | 10 |

Array Method Challenges

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /08-asynchronous-javascript/10-promises-vs-callback-hell/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Promises vs Callback Hell 8 | 9 | 10 |

Promises vs Callback Hell

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /02-arrays-and-objects/03-array-nesting-concat-spread/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Array Nesting, Concat & Spread 8 | 9 | 10 |

Array Nesting Concat & Spread

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /02-arrays-and-objects/06-object-spread-methods/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Object Spread Operator & Methods 8 | 9 | 10 |

Object Spread Operator & Methods

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /03-functions-scope/06-declaration-vs-expression/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Function Declaration vs Expression 8 | 9 | 10 |

Function Declaration vs Expression

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /09-fetch-and-async-await/09-multiple-promises-async-await/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Async/Await Multiple Promises 9 | 10 | 11 |

Async/Await Multiple Promises

12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /01-variables-data-types/05-stack-heap/script.js: -------------------------------------------------------------------------------- 1 | // Value is stored in the stack 2 | const name = 'John'; 3 | const age = 30; 4 | 5 | // Reference is stored in the heap 6 | const person = { 7 | name: 'Brad', 8 | age: 40, 9 | }; 10 | 11 | let newName = name; 12 | newName = 'Jonathan'; 13 | 14 | let newPerson = person; 15 | newPerson.name = 'Bradley'; 16 | 17 | console.log(name, newName); // John, Jonathan 18 | console.log(person, newPerson); // { name: 'Bradley', age: 40 }, { name: 'Bradley', age: 40 } 19 | -------------------------------------------------------------------------------- /06-document-object-model/11-custom-insertafter-challenge/shopping-list/script.js: -------------------------------------------------------------------------------- 1 | function insertAfter(newEl, existingEl) { 2 | existingEl.parentElement.insertBefore(newEl, existingEl.nextSibling); 3 | } 4 | 5 | // New element to insert 6 | const li = document.createElement('li'); 7 | li.textContent = 'Insert Me After!'; 8 | 9 | // Existing element to insert after 10 | const firstItem = document.querySelector('li:first-child'); 11 | 12 | // Our custom function 13 | insertAfter(li, firstItem); 14 | -------------------------------------------------------------------------------- /09-fetch-and-async-await/08-async-await-error-handling/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Async & Await Error Handling 8 | 9 | 10 |

Async & Await Error Handling

11 | 12 |
13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /08-asynchronous-javascript/04-ajax-xhr/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | AJAX & XHR Object 9 | 10 | 11 |

AJAX & XHR Object

12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /03-functions-scope/08-iife/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | IIFE (Immediately Invoked Function Expressions) 8 | 9 | 10 |

IIFE (Immediately Invoked Function Expressions)

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /06-document-object-model/01-dom-intro/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | DOM Intro 8 | 9 | 10 |
11 |

DOM Intro

12 | Desai Media 13 |
14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /09-fetch-and-async-await/01-fetch-basics/script.js: -------------------------------------------------------------------------------- 1 | // Fetching a JSON file 2 | fetch('./movies.json') 3 | .then((response) => response.json()) 4 | .then((data) => console.log(data)); 5 | 6 | // Fetching a text file 7 | fetch('./test.txt') 8 | .then((response) => response.text()) 9 | .then((data) => console.log(data)); 10 | 11 | // Fetching from an API 12 | fetch('https://api.github.com/users/zeroprojecthub') 13 | .then((response) => response.json()) 14 | .then((data) => (document.querySelector('h1').textContent = data.login)); 15 | -------------------------------------------------------------------------------- /08-asynchronous-javascript/01-settimeout-cleartimeout/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | setTimeout & clearTimeout 8 | 9 | 10 |

setTimeout & clearTimeout

11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /01-variables-data-types/10-capitalize-challenge/script.js: -------------------------------------------------------------------------------- 1 | // Create a new string called "myNewString" that holds the value of "Developer", using the lowercase value from "myString" 2 | const myString = 'developer'; 3 | 4 | let myNewString; 5 | 6 | // Solution 1: 7 | myNewString = myString.charAt(0).toUpperCase() + myString.substring(1); 8 | // Solution 2: 9 | myNewString = myString[0].toUpperCase() + myString.substring(1); 10 | // Solution 3: 11 | myNewString = `${myString[0].toUpperCase()}${myString.slice(1)}`; 12 | 13 | console.log(myNewString); 14 | -------------------------------------------------------------------------------- /01-variables-data-types/08-type-coercion/script.js: -------------------------------------------------------------------------------- 1 | let x; 2 | 3 | // Coerced to a string 4 | x = 5 + '5'; 5 | 6 | x = 5 + Number('5'); 7 | 8 | // Coerced to a number 9 | x = 5 * '5'; 10 | 11 | // null is coerced to 0 as it is a `falsy` value 12 | x = 5 + null; 13 | 14 | x = Number(null); 15 | 16 | x = Number(true); 17 | x = Number(false); 18 | 19 | // true is coerced to a 1 20 | x = 5 + true; 21 | 22 | // false is coerced to 0 (falsy) 23 | x = 5 + false; 24 | 25 | // Undefined is coerced to 0 (falsy) 26 | x = 5 + undefined; 27 | 28 | console.log(x, typeof x); 29 | -------------------------------------------------------------------------------- /08-asynchronous-javascript/03-callbacks/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Callbacks 9 | 10 | 11 |

Callbacks

12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /08-asynchronous-javascript/08-callback-to-promise/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Callback to Promise Refactor 9 | 10 | 11 |

Callback to Promise Refactor

12 | 13 |
14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /04-logic-control-flow/04-calculator-challenge/script.js: -------------------------------------------------------------------------------- 1 | function calculator(num1, num2, operator) { 2 | let result; 3 | 4 | switch (operator) { 5 | case '+': 6 | result = num1 + num2; 7 | break; 8 | case '-': 9 | result = num1 - num2; 10 | break; 11 | case '*': 12 | result = num1 * num2; 13 | break; 14 | case '/': 15 | result = num1 / num2; 16 | break; 17 | default: 18 | result = 'Invalid Operator'; 19 | } 20 | 21 | console.log(result); 22 | return result; 23 | } 24 | 25 | calculator(5, 2, '&'); 26 | -------------------------------------------------------------------------------- /02-arrays-and-objects/04-array-challenge/script.js: -------------------------------------------------------------------------------- 1 | // Challenge 1 2 | 3 | const arr = [1, 2, 3, 4, 5]; 4 | 5 | // arr.reverse(); 6 | // arr.push(0); 7 | // arr.unshift(6); 8 | 9 | // Same result as above 10 | arr.push(6); 11 | arr.unshift(0); 12 | arr.reverse(); 13 | 14 | console.log(arr); 15 | 16 | // Challenge 2 17 | 18 | const arr1 = [1, 2, 3, 4, 5]; 19 | const arr2 = [5, 6, 7, 8, 9, 10]; 20 | 21 | // Solution 1 22 | const arr3 = arr1.slice(0, 4).concat(arr2); 23 | 24 | // Solution 2 25 | const arr4 = [...arr1, ...arr2]; 26 | arr4.splice(4, 1); 27 | 28 | console.log(arr4); 29 | -------------------------------------------------------------------------------- /08-asynchronous-javascript/02-setinterval-clearinterval/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | setInterval & clearInterval 8 | 9 | 10 |

setInterval & clearInterval

11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /01-variables-data-types/06-type-conversion/script.js: -------------------------------------------------------------------------------- 1 | let amount = 'hello'; 2 | 3 | // Convert string to number 4 | amount = parseInt(amount); 5 | amount = +amount; 6 | amount = Number(amount); 7 | 8 | // Convert number to string 9 | amount = amount.toString(); 10 | amount = String(amount); 11 | 12 | // Convert string to decimal 13 | amount = parseFloat(amount); 14 | 15 | // Convert number to boolean 16 | amount = Boolean(amount); 17 | 18 | // Ways to get NaN 19 | console.log(Math.sqrt(-1)); 20 | console.log(1 + NaN); 21 | console.log(undefined + undefined); 22 | console.log('foo' / 3); 23 | 24 | console.log(amount, typeof amount); 25 | -------------------------------------------------------------------------------- /08-asynchronous-javascript/05-joke-generator-challenge/chuck-joke-generator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chuck Jokes 8 | 9 | 10 |
11 |

Chuck Norris Jokes

12 |
Loading...
13 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /05-iteration-array-methods/03-while-do-while/script.js: -------------------------------------------------------------------------------- 1 | let i = 0; 2 | 3 | while (i <= 20) { 4 | console.log('Number ' + i); 5 | i++; 6 | } 7 | 8 | // Loop over arrays 9 | const arr = [10, 20, 30, 40, 50]; 10 | 11 | while (i < arr.length) { 12 | console.log(arr[i]); 13 | i++; 14 | } 15 | 16 | // Nesting while loops 17 | while (i <= 5) { 18 | console.log('Number ' + i); 19 | 20 | let j = 1; 21 | while (j <= 5) { 22 | console.log(`${i} * ${j} = ${i * j}`); 23 | j++; 24 | } 25 | 26 | i++; 27 | } 28 | 29 | // Do While Loop - Always runs once 30 | do { 31 | console.log('Number ' + i); 32 | i++; 33 | } while (i <= 20); 34 | -------------------------------------------------------------------------------- /01-variables-data-types/12-math-object/script.js: -------------------------------------------------------------------------------- 1 | let x; 2 | 3 | // Square root 4 | x = Math.sqrt(9); 5 | 6 | // Absolute value 7 | x = Math.abs(-5); 8 | 9 | // Round 10 | x = Math.round(4.2); 11 | 12 | // Round up 13 | x = Math.ceil(4.2); 14 | 15 | // Round down 16 | x = Math.floor(4.9); 17 | 18 | // Exponent 19 | x = Math.pow(2, 3); 20 | 21 | // Minimum number 22 | x = Math.min(4, 5, 3); 23 | 24 | // Maximum number 25 | x = Math.max(4, 5, 3); 26 | 27 | // Get a random number/decimal between 0 and 1 28 | x = Math.random(); 29 | 30 | // Get a random number between 1 and 100 31 | x = Math.floor(Math.random() * 100 + 1); 32 | 33 | console.log(x); 34 | -------------------------------------------------------------------------------- /02-arrays-and-objects/08-json-intro/script.js: -------------------------------------------------------------------------------- 1 | const post = { 2 | id: 1, 3 | title: 'Post One', 4 | body: 'This is the body', 5 | }; 6 | 7 | // Convert to JSON string 8 | const str = JSON.stringify(post); 9 | 10 | console.log(str.id); 11 | 12 | // Parse JSON 13 | const obj = JSON.parse(str); 14 | 15 | console.log(obj.id); 16 | 17 | // JSON & arrays 18 | const posts = [ 19 | { 20 | id: 1, 21 | title: 'Post One', 22 | body: 'This is the body', 23 | }, 24 | { 25 | id: 2, 26 | title: 'Post Two', 27 | body: 'This is the body', 28 | }, 29 | ]; 30 | 31 | const str2 = JSON.stringify(posts); 32 | 33 | console.log(str2); 34 | -------------------------------------------------------------------------------- /05-iteration-array-methods/05-for-of-loop/script.js: -------------------------------------------------------------------------------- 1 | // Loop through arrays 2 | const items = ['book', 'table', 'chair', 'kite']; 3 | const users = [{ name: 'Brad' }, { name: 'Kate' }, { name: 'Steve' }]; 4 | 5 | // for (const item of items) { 6 | // console.log(item); 7 | // } 8 | 9 | for (const user of users) { 10 | console.log(user.name); 11 | } 12 | 13 | // Loop over strings 14 | const str = 'Hello World'; 15 | 16 | for (const letter of str) { 17 | console.log(letter); 18 | } 19 | 20 | // Loop over Maps 21 | const map = new Map(); 22 | map.set('name', 'John'); 23 | map.set('age', 30); 24 | 25 | for (const [key, value] of map) { 26 | console.log(key, value); 27 | } 28 | -------------------------------------------------------------------------------- /08-asynchronous-javascript/01-settimeout-cleartimeout/script.js: -------------------------------------------------------------------------------- 1 | // setTimeout - takes in a callback and a time to wait until that callback is executed 2 | 3 | setTimeout(function () { 4 | console.log('Hello from callback'); 5 | }, 2000); 6 | 7 | // Named function 8 | setTimeout(changeText, 3000); 9 | 10 | function changeText() { 11 | document.querySelector('h1').textContent = 'Hello from callback'; 12 | } 13 | 14 | // clearTimeout() will clear a timer 15 | const timerId = setTimeout(changeText, 3000); 16 | 17 | document.querySelector('#cancel').addEventListener('click', () => { 18 | console.log(timerId); 19 | clearTimeout(timerId); 20 | console.log('Timer Cancelled'); 21 | }); 22 | -------------------------------------------------------------------------------- /07-events/08-event-bubbling/shopping-list/script.js: -------------------------------------------------------------------------------- 1 | const button = document.querySelector('form button'); 2 | const div = document.querySelector('form div:nth-child(2)'); 3 | const form = document.querySelector('form'); 4 | 5 | // console.log(button); 6 | // console.log(div); 7 | 8 | button.addEventListener('click', (e) => { 9 | alert('Button was clicked'); 10 | e.stopPropagation(); 11 | }); 12 | 13 | div.addEventListener('click', () => { 14 | alert('Div was clicked'); 15 | }); 16 | 17 | form.addEventListener('click', () => { 18 | alert('Form was clicked'); 19 | }); 20 | 21 | document.body.addEventListener('click', () => { 22 | alert('Body was clicked'); 23 | }); 24 | -------------------------------------------------------------------------------- /03-functions-scope/11-call-stack/script.js: -------------------------------------------------------------------------------- 1 | // Open 'sources' tab and put a breakpoint at the first() function 2 | 3 | // First Example 4 | 5 | function first() { 6 | console.log('first...'); 7 | } 8 | 9 | function second() { 10 | console.log('second...'); 11 | } 12 | 13 | function third() { 14 | console.log('third...'); 15 | } 16 | 17 | first(); 18 | second(); 19 | third(); 20 | 21 | // Second Example 22 | 23 | // function first() { 24 | // console.log('first...'); 25 | // second(); 26 | // } 27 | 28 | // function second() { 29 | // console.log('second...'); 30 | // third(); 31 | // } 32 | 33 | // function third() { 34 | // console.log('third...'); 35 | // } 36 | 37 | // first(); 38 | -------------------------------------------------------------------------------- /05-iteration-array-methods/04-fizzbuzz-challenge/script.js: -------------------------------------------------------------------------------- 1 | // For Loop 2 | // for (let i = 1; i <= 100; i++) { 3 | // if (i % 15 === 0) { 4 | // console.log('FizzBuzz'); 5 | // } else if (i % 3 === 0) { 6 | // console.log('Fizz'); 7 | // } else if (i % 5 === 0) { 8 | // console.log('Buzz'); 9 | // } else { 10 | // console.log(i); 11 | // } 12 | // } 13 | 14 | // While Loop 15 | let j = 1; 16 | 17 | while (j <= 100) { 18 | if (j % 15 === 0) { 19 | console.log('FizzBuzz'); 20 | } else if (j % 3 === 0) { 21 | console.log('Fizz'); 22 | } else if (j % 5 === 0) { 23 | console.log('Buzz'); 24 | } else { 25 | console.log(j); 26 | } 27 | 28 | j++; 29 | } 30 | -------------------------------------------------------------------------------- /08-asynchronous-javascript/06-callback-hell/script.js: -------------------------------------------------------------------------------- 1 | function getData(endpoint, cb) { 2 | const xhr = new XMLHttpRequest(); 3 | 4 | xhr.open('GET', endpoint); 5 | 6 | xhr.onreadystatechange = function () { 7 | if ((this.readyState === 4) & (this.status === 200)) { 8 | cb(JSON.parse(this.responseText)); 9 | } 10 | }; 11 | 12 | setTimeout(() => { 13 | xhr.send(); 14 | }, Math.floor(Math.random() * 3000) + 1000); 15 | } 16 | 17 | getData('./movies.json', (data) => { 18 | console.log(data); 19 | getData('./actors.json', (data) => { 20 | console.log(data); 21 | getData('./directors.json', (data) => { 22 | console.log(data); 23 | }); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /07-events/09-event-delegation/shopping-list/script.js: -------------------------------------------------------------------------------- 1 | const listItems = document.querySelectorAll('li'); 2 | const list = document.querySelector('ul'); 3 | 4 | //Add an event listener on all items 5 | // listItems.forEach((item) => { 6 | // item.addEventListener('click', (e) => { 7 | // e.target.remove(); 8 | // }); 9 | // }); 10 | 11 | // Add a single event listener on the parent (Event Delegation) 12 | // list.addEventListener('click', (e) => { 13 | // if (e.target.tagName === 'LI') { 14 | // e.target.remove(); 15 | // } 16 | // }); 17 | 18 | // list.addEventListener('mouseover', (e) => { 19 | // if (e.target.tagName === 'LI') { 20 | // e.target.style.color = 'red'; 21 | // } 22 | // }); 23 | -------------------------------------------------------------------------------- /08-asynchronous-javascript/08-callback-to-promise/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap'); 2 | 3 | *, 4 | *:before, 5 | *:after { 6 | box-sizing: border-box; 7 | padding: 0; 8 | margin: 0; 9 | } 10 | 11 | body { 12 | font-family: 'Poppins'; 13 | line-height: 1.6; 14 | padding: 0 40px; 15 | } 16 | 17 | h1 { 18 | text-align: center; 19 | line-height: 1.3; 20 | margin-top: 20px; 21 | } 22 | 23 | h3 { 24 | text-align: center; 25 | font-size: 20px; 26 | } 27 | 28 | #posts { 29 | margin-top: 20px; 30 | } 31 | 32 | #posts div { 33 | list-style: none; 34 | background: #f4f4f4; 35 | margin-bottom: 5px; 36 | padding: 5px; 37 | } 38 | -------------------------------------------------------------------------------- /09-fetch-and-async-await/03-fetch-options/script.js: -------------------------------------------------------------------------------- 1 | /* 2 | COMMON FETCH OPTIONS 3 | method: HTTP method you want to use 4 | body: Data you want to send. Usually to be put in a database, etc 5 | headers: Any HTTP headers you want to send 6 | */ 7 | 8 | function createPost({ title, body }) { 9 | fetch('https://jsonplaceholder.typicode.com/posts', { 10 | method: 'POST', 11 | body: JSON.stringify({ 12 | title, 13 | body, 14 | }), 15 | headers: { 16 | 'Content-Type': 'application/json', 17 | token: 'abc123', 18 | }, 19 | }) 20 | .then((res) => res.json()) 21 | .then((data) => console.log(data)); 22 | } 23 | 24 | createPost({ title: 'My Post', body: 'This is my Post' }); 25 | -------------------------------------------------------------------------------- /04-logic-control-flow/07-logical-assignment/script.js: -------------------------------------------------------------------------------- 1 | // ||= assigns the right side value only if the left is a falsy value. 2 | 3 | let a = null; 4 | 5 | // if (!a) { 6 | // a = 10; 7 | // } 8 | 9 | // a = a || 10; 10 | 11 | a ||= 10; 12 | 13 | console.log(a); 14 | 15 | // &&= assigns the right side value only if the left is a truthy value. 16 | 17 | let b = 10; 18 | 19 | if (b) { 20 | b = 20; 21 | } 22 | 23 | b = b && 20; 24 | 25 | b &&= 20; 26 | 27 | console.log(b); 28 | 29 | // ??= assigns the right side value only if the left is null or undefined. 30 | 31 | let c = null; 32 | 33 | if (c === null || c === undefined) { 34 | c = 20; 35 | } 36 | 37 | c = c ?? 20; 38 | 39 | c ??= 20; 40 | 41 | console.log(c); 42 | -------------------------------------------------------------------------------- /04-logic-control-flow/03-switches/script.js: -------------------------------------------------------------------------------- 1 | const d = new Date(2022, 1, 10, 19, 0, 0); 2 | const month = d.getMonth(); 3 | const hour = d.getHours(); 4 | 5 | // Immediate value evaluation 6 | switch (month) { 7 | case 1: 8 | console.log('It is January'); 9 | break; 10 | case 2: 11 | console.log('It is February'); 12 | break; 13 | case 3: 14 | console.log('It is March'); 15 | break; 16 | default: 17 | console.log('It is not Jan, Feb or March'); 18 | } 19 | 20 | // Range evaluation 21 | switch (true) { 22 | case hour < 12: 23 | console.log('Good Morning'); 24 | break; 25 | case hour < 18: 26 | console.log('Good Afternoon'); 27 | break; 28 | default: 29 | console.log('Good Night'); 30 | } 31 | -------------------------------------------------------------------------------- /08-asynchronous-javascript/03-callbacks/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap'); 2 | 3 | *, 4 | *:before, 5 | *:after { 6 | box-sizing: border-box; 7 | padding: 0; 8 | margin: 0; 9 | } 10 | 11 | body { 12 | font-family: 'Poppins'; 13 | line-height: 1.6; 14 | padding: 0 40px; 15 | } 16 | 17 | h1 { 18 | text-align: center; 19 | line-height: 1.3; 20 | margin-top: 20px; 21 | } 22 | 23 | button { 24 | display: inline-block; 25 | background: #333; 26 | border: 0; 27 | color: #fff; 28 | padding: 15px 20px; 29 | text-decoration: none; 30 | margin: 20px 0; 31 | cursor: pointer; 32 | border-radius: 10px; 33 | } 34 | 35 | .danger { 36 | background: red; 37 | } 38 | -------------------------------------------------------------------------------- /08-asynchronous-javascript/09-promise-chaining/script.js: -------------------------------------------------------------------------------- 1 | const promise = new Promise((resolve, reject) => { 2 | setTimeout(() => { 3 | let error = true; 4 | 5 | if (!error) { 6 | resolve({ name: 'John', age: 30 }); 7 | } else { 8 | reject('Error: Something went wrong'); 9 | } 10 | }, 1000); 11 | }); 12 | 13 | promise 14 | .then((user) => { 15 | console.log(user); 16 | return user.name; 17 | }) 18 | .then((name) => { 19 | console.log(name); 20 | return name.length; 21 | }) 22 | .then((nameLength) => { 23 | console.log(nameLength); 24 | }) 25 | .catch((error) => { 26 | console.log(error); 27 | return 123; 28 | }) 29 | .then((x) => console.log('This will run no matter what', x)); 30 | -------------------------------------------------------------------------------- /03-functions-scope/03-global-function-scope/script.js: -------------------------------------------------------------------------------- 1 | // 'window' is globally scoped 2 | // alert('Hello'); 3 | // console.log(innerWidth); 4 | 5 | // Global scope variable 6 | const x = 100; 7 | 8 | console.log(x, 'in global'); 9 | 10 | function run() { 11 | // Access global vars in functions 12 | console.log(window.innerHeight); 13 | console.log(x, 'in function'); 14 | } 15 | 16 | run(); 17 | 18 | // Access global vars in blocks 19 | if (true) { 20 | console.log(x, 'in block'); 21 | } 22 | 23 | function add() { 24 | // Overwriting global x (variable shadowing) 25 | const x = 1; 26 | const y = 50; 27 | console.log(x + y); 28 | } 29 | 30 | // Can not access a function scoped variable in global scope 31 | console.log(y); 32 | 33 | add(); 34 | -------------------------------------------------------------------------------- /02-arrays-and-objects/01-array-basics/script.js: -------------------------------------------------------------------------------- 1 | let x; 2 | 3 | // Array Literal 4 | const numbers = [12, 45, 33, 29, 39, 102]; 5 | const mixed = [12, 'Hello', true, null]; 6 | 7 | // Array Constructor 8 | const fruits = new Array('apple', 'grape', 'orange'); 9 | 10 | // Get value by index 11 | x = numbers[0]; 12 | 13 | x = numbers[0] + numbers[3]; 14 | 15 | x = `My favorite fruit is an ${fruits[2]}`; 16 | 17 | x = numbers.length; 18 | 19 | fruits[2] = 'pear'; 20 | 21 | // length is not read-only 22 | // fruits.length = 2; 23 | 24 | fruits[3] = 'strawberry'; 25 | 26 | // Using the length as the index will always add on the the end 27 | fruits[fruits.length] = 'blueberry'; 28 | fruits[fruits.length] = 'peach'; 29 | 30 | x = fruits; 31 | 32 | console.log(x); 33 | -------------------------------------------------------------------------------- /01-variables-data-types/01-console/script.js: -------------------------------------------------------------------------------- 1 | // Log number 2 | console.log(100); 3 | 4 | // Log string 5 | console.log('Hello World'); 6 | 7 | // Log multiple values 8 | console.log(20, 'Hello', true); 9 | 10 | // Log a variable 11 | const x = 100; 12 | console.log(x); 13 | 14 | // Console error & warning 15 | console.error('Alert'); 16 | console.warn('Warning'); 17 | 18 | // Log object as table 19 | console.table({ name: 'Brad', email: 'brad@gmail.com' }); 20 | 21 | // Group console commands 22 | console.group('simple'); 23 | 24 | console.log(x); 25 | console.error('Alert'); 26 | console.warn('Warning'); 27 | console.groupEnd(); 28 | 29 | // Add CSS to logs 30 | const styles = 'padding: 10px; background-color: white; color: green'; 31 | console.log('%cHello World', styles); 32 | -------------------------------------------------------------------------------- /03-functions-scope/04-block-scope/script.js: -------------------------------------------------------------------------------- 1 | const x = 100; 2 | 3 | // An If statement is a block 4 | if (true) { 5 | console.log(x); 6 | const y = 200; 7 | console.log(x + y); 8 | } 9 | 10 | // console.log(y); // ReferenceError: y is not defined 11 | 12 | // A loop is a block 13 | for (let i = 0; i <= 10; i++) { 14 | console.log(i); 15 | } 16 | 17 | // console.log(i); // ReferenceError: i is not defined 18 | 19 | // Using var 20 | if (true) { 21 | const a = 500; 22 | let b = 600; 23 | var c = 700; 24 | } 25 | 26 | console.log(c); 27 | 28 | // var IS function scoped 29 | function run() { 30 | var d = 100; 31 | console.log(d); 32 | } 33 | 34 | run(); 35 | 36 | // console.log(d); 37 | 38 | 39 | const foo = 1; 40 | var bar = 2; // Put on the window object 41 | -------------------------------------------------------------------------------- /03-functions-scope/09-function-challenges/script.js: -------------------------------------------------------------------------------- 1 | // Challenge 1 2 | // function getCelsius(f) { 3 | // const celsius = ((f - 32) * 5) / 9; 4 | // return celsius; 5 | // } 6 | 7 | const getCelsius = (f) => ((f - 32) * 5) / 9; 8 | 9 | console.log(`The temp is ${getCelsius(35)} \xB0C `); 10 | 11 | // Challenge 2 12 | function minMax(arr) { 13 | const min = Math.min(...arr); 14 | const max = Math.max(...arr); 15 | 16 | return { 17 | min, 18 | max, 19 | }; 20 | } 21 | 22 | console.log(minMax([2, 31, 4, 5, 6])); 23 | 24 | // Challenge 3 25 | ((length, width) => { 26 | const area = length * width; 27 | 28 | const output = `The area of a rectangle with a length of ${length} and a width of ${width} is ${area}.`; 29 | 30 | console.log(output); 31 | })(20, 10); 32 | -------------------------------------------------------------------------------- /01-variables-data-types/13-number-challenge/script.js: -------------------------------------------------------------------------------- 1 | const x = Math.floor(Math.random() * 100 + 1); 2 | const y = Math.floor(Math.random() * 50 + 1); 3 | 4 | // Get the sum 5 | const sum = x + y; 6 | const sumOutput = `${x} + ${y} = ${sum}`; 7 | console.log(sumOutput); 8 | 9 | // Get the difference 10 | const diff = x - y; 11 | const diffOutput = `${x} - ${y} = ${diff}`; 12 | console.log(diffOutput); 13 | 14 | // Get the product 15 | const prod = x * y; 16 | const prodOutput = `${x} * ${y} = ${prod}`; 17 | console.log(prodOutput); 18 | 19 | // Get the quotient 20 | const quot = x / y; 21 | const quotOutput = `${x} / ${y} = ${quot}`; 22 | console.log(quotOutput); 23 | 24 | // Get the remainder 25 | const rm = x % y; 26 | const rmOutput = `${x} % ${y} = ${rm}`; 27 | console.log(rmOutput); 28 | -------------------------------------------------------------------------------- /06-document-object-model/05-traversing-the-dom-elements/shoppinglist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Traversing The DOM 9 | 10 | 11 |
12 |

Traversing The DOM

13 |
14 |
Child 1
15 |
Child 2
16 |
Child 3
17 |
18 |
19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /06-document-object-model/01-dom-intro/script.js: -------------------------------------------------------------------------------- 1 | // Global window object 2 | console.log(window); 3 | 4 | // The document object is part of the window object 5 | console.dir(window.document); 6 | 7 | // We can access DOM elements directly with properties 8 | console.log(document.body); 9 | console.log(document.links[0]); 10 | 11 | // We can set properties of elements 12 | // document.body.innerHTML = '

Hello from body

'; 13 | 14 | // The document object has a ton of methods. One is `document.write()`, which will write something to the document 15 | document.write('Hello from JS'); 16 | 17 | // We also have methods to select elements more directly 18 | document.getElementById('main').innerHTML = '

Hello from main

'; 19 | 20 | document.querySelector('#main h1').innerText = 'Hello'; 21 | -------------------------------------------------------------------------------- /06-document-object-model/06-traversing-the-dom-nodes/shoppinglist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Traversing The DOM 10 | 11 | 12 | 13 |
14 |

Traversing The DOM

15 |
16 | 17 |
Child 1
18 |
Child 2
19 |
Child 3
20 |
21 |
22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /03-functions-scope/07-arrow-functions/script.js: -------------------------------------------------------------------------------- 1 | // Normal function declaration 2 | // function add(a, b) { 3 | // return a + b; 4 | // } 5 | 6 | // Arrow function syntax 7 | const add = (a, b) => { 8 | return a + b; 9 | }; 10 | 11 | // Implicit Return 12 | const subtract = (a, b) => a - b; 13 | 14 | // Can leave off () with a single param 15 | const double = (a) => a * 2; 16 | 17 | // Returning an object 18 | const createObj = () => ({ 19 | name: 'Brad', 20 | }); 21 | 22 | const numbers = [1, 2, 3, 4, 5]; 23 | 24 | numbers.forEach(function (n) { 25 | console.log(n); 26 | }); 27 | 28 | // Arrow function in a callback 29 | numbers.forEach((n) => console.log(n)); 30 | 31 | console.log(add(1, 2)); 32 | console.log(subtract(10, 5)); 33 | console.log(double(10)); 34 | console.log(createObj()); 35 | -------------------------------------------------------------------------------- /04-logic-control-flow/02-else-if-nesting/script.js: -------------------------------------------------------------------------------- 1 | const d = new Date(10, 30, 2022, 6, 0, 0); 2 | const hour = d.getHours(); 3 | 4 | if (hour < 12) { 5 | console.log('Good Morning'); 6 | } else if (hour < 18) { 7 | console.log('Good Afternoon'); 8 | } else { 9 | console.log('Good Night'); 10 | } 11 | 12 | // Nested If 13 | if (hour < 12) { 14 | console.log('Good Morning'); 15 | 16 | if (hour === 6) { 17 | console.log('Wake Up!'); 18 | } 19 | } else if (hour < 18) { 20 | console.log('Good Afternoon'); 21 | } else { 22 | console.log('Good Night'); 23 | 24 | if (hour >= 20) { 25 | console.log('zzzzzzzz'); 26 | } 27 | } 28 | 29 | if (hour >= 7 && hour < 15) { 30 | console.log('It is work time!'); 31 | } 32 | 33 | if (hour === 6 || hour === 20) { 34 | console.log('Brush your teeth!'); 35 | } 36 | -------------------------------------------------------------------------------- /04-logic-control-flow/01-if-statements/script.js: -------------------------------------------------------------------------------- 1 | // If Statement Syntax 2 | if (true) { 3 | console.log('This is true'); 4 | } 5 | 6 | if (false) { 7 | console.log('This is NOT true'); 8 | } 9 | 10 | // Evaluation expressions 11 | const x = 10; 12 | const y = 5; 13 | 14 | if (x >= y) { 15 | console.log(`${x} is greater than or equal to ${y}`); 16 | } 17 | 18 | if (x === y) { 19 | console.log(`${x} is equal to ${y}`); 20 | } else { 21 | console.log(`${x} is NOT equal to ${y}`); 22 | } 23 | 24 | // Block scope 25 | if (x !== y) { 26 | const z = 20; 27 | console.log(`${z} is 20`); 28 | } 29 | 30 | console.log(z); // Throw error 31 | 32 | // Shorthand If/Else 33 | if (x >= y) 34 | console.log(`${x} is greater than or equal to ${y}`), 35 | console.log('This is true'); 36 | else console.log('This is false'); 37 | -------------------------------------------------------------------------------- /05-iteration-array-methods/10-reduce/script.js: -------------------------------------------------------------------------------- 1 | const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 2 | 3 | // Add all numbers together 4 | const sum = numbers.reduce(function (accumulator, currentValue) { 5 | return accumulator + currentValue; 6 | }, 0); 7 | 8 | const sum2 = numbers.reduce((acc, cur) => acc + cur, 0); 9 | 10 | // Using a for loop 11 | const sum3 = () => { 12 | let acc = 0; 13 | for (const cur of numbers) { 14 | acc += cur; 15 | } 16 | return acc; 17 | }; 18 | 19 | // Shopping cart example (objects) 20 | const cart = [ 21 | { id: 1, name: 'Product 1', price: 130 }, 22 | { id: 2, name: 'Product 2', price: 150 }, 23 | { id: 3, name: 'Product 3', price: 200 }, 24 | ]; 25 | 26 | const total = cart.reduce(function (acc, product) { 27 | return acc + product.price; 28 | }, 0); 29 | 30 | console.log(total); 31 | -------------------------------------------------------------------------------- /03-functions-scope/01-function-basics/script.js: -------------------------------------------------------------------------------- 1 | // Define a function 2 | function sayHello() { 3 | console.log('Hello World'); 4 | } 5 | 6 | // Invoke, execute or call a function 7 | sayHello(); 8 | 9 | // Define a function with parameters 10 | function add(num1, num2) { 11 | console.log(num1 + num2); 12 | } 13 | 14 | // Invoke function with arguments 15 | add(5, 10); 16 | 17 | // Parameters vs. Arguments 18 | // Parameters are the names of the variables that are used to pass data into a function. 19 | // Arguments are the values that are passed into the function 20 | 21 | // Returning a value 22 | function subtract(num1, num2) { 23 | return num1 - num2; 24 | 25 | console.log('After the return'); 26 | } 27 | 28 | // Assign the returned value to a variable 29 | const result = subtract(10, 2); 30 | 31 | console.log(result, subtract(20, 5)); 32 | -------------------------------------------------------------------------------- /02-arrays-and-objects/07-destructuring-naming/script.js: -------------------------------------------------------------------------------- 1 | // Setting object properties with the same name as a variable 2 | const firstName = 'John'; 3 | const lastName = 'Doe'; 4 | const age = 30; 5 | 6 | const person = { 7 | firstName, 8 | lastName, 9 | age, 10 | }; 11 | 12 | console.log(person.age); 13 | 14 | // Destructuring object properties 15 | 16 | const todo = { 17 | id: 1, 18 | title: 'Take out trash', 19 | user: { 20 | name: 'John', 21 | }, 22 | }; 23 | 24 | const { 25 | id: todoId, // rename id to todoId 26 | title, 27 | user: { name }, // destructuring multiple levels 28 | } = todo; 29 | 30 | console.log(todoId); 31 | 32 | // Destructuring arrays & using the rest/spread operator 33 | const numbers = [23, 67, 33, 49, 52]; 34 | 35 | const [first, second, ...rest] = numbers; 36 | 37 | console.log(first, second, rest); 38 | -------------------------------------------------------------------------------- /08-asynchronous-javascript/05-joke-generator-challenge/chuck-joke-generator/script.js: -------------------------------------------------------------------------------- 1 | const jokeEl = document.getElementById('joke'); 2 | const jokeBtn = document.getElementById('joke-btn'); 3 | 4 | const generateJoke = () => { 5 | const xhr = new XMLHttpRequest(); 6 | 7 | xhr.open('GET', 'https://api.chucknorris.io/jokes/random'); 8 | 9 | xhr.onreadystatechange = function () { 10 | if (this.readyState === 4) { 11 | if (this.status === 200) { 12 | // console.log(JSON.parse(this.responseText).value); 13 | jokeEl.innerHTML = JSON.parse(this.responseText).value; 14 | } else { 15 | jokeEl.innerHTML = 'Something Went Wrong (Not Funny)'; 16 | } 17 | } 18 | }; 19 | 20 | xhr.send(); 21 | }; 22 | 23 | jokeBtn.addEventListener('click', generateJoke); 24 | document.addEventListener('DOMContentLoaded', generateJoke); 25 | -------------------------------------------------------------------------------- /08-asynchronous-javascript/07-promises/script.js: -------------------------------------------------------------------------------- 1 | // Create a promise 2 | const promise = new Promise((resolve, reject) => { 3 | // Do some async task 4 | setTimeout(() => { 5 | console.log('Async task complete'); 6 | resolve(); 7 | }, 1000); 8 | }); 9 | 10 | // promise.then(() => { 11 | // console.log('Promise consumed..'); 12 | // }); 13 | 14 | const getUser = new Promise((resolve, reject) => { 15 | setTimeout(() => { 16 | let error = true; 17 | 18 | if (!error) { 19 | resolve({ name: 'John', age: 30 }); 20 | } else { 21 | reject('Error: Something went wrong'); 22 | } 23 | }, 1000); 24 | }); 25 | 26 | getUser 27 | .then((user) => console.log(user)) 28 | .catch((error) => console.log(error)) 29 | .finally(() => console.log('The promise has been resolved or rejected')); 30 | 31 | console.log('Hello from global scope'); 32 | -------------------------------------------------------------------------------- /08-asynchronous-javascript/03-callbacks/script.js: -------------------------------------------------------------------------------- 1 | // function toggle(e) { 2 | // e.target.classList.toggle('danger'); 3 | // } 4 | 5 | // document.querySelector('button').addEventListener('click', toggle); 6 | 7 | const posts = [ 8 | { title: 'Post One', body: 'This is post one' }, 9 | { title: 'Post Two', body: 'This is post two' }, 10 | ]; 11 | 12 | function createPost(post, cb) { 13 | setTimeout(() => { 14 | posts.push(post); 15 | cb(); 16 | }, 2000); 17 | } 18 | 19 | function getPosts() { 20 | setTimeout(() => { 21 | posts.forEach(function (post) { 22 | const div = document.createElement('div'); 23 | div.innerHTML = `${post.title} - ${post.body}`; 24 | document.querySelector('#posts').appendChild(div); 25 | }); 26 | }, 1000); 27 | } 28 | 29 | createPost({ title: 'Post Three', body: 'This is post' }, getPosts); 30 | -------------------------------------------------------------------------------- /09-fetch-and-async-await/04-typicode-todos-mini-project/typicode-todos/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Typicode Todos 9 | 10 | 11 |
12 |
13 |

Typicode Todos

14 |
15 |
16 |
17 | 18 | 19 |
20 | 21 |
22 |
23 |
24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /06-document-object-model/05-traversing-the-dom-elements/shoppinglist/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap'); 2 | 3 | *, 4 | *::before, 5 | *::after { 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | } 10 | 11 | body { 12 | font-family: 'Poppins', sans-serif; 13 | font-size: 18px; 14 | line-height: 1.5; 15 | color: #333; 16 | background-color: #f5f5f5; 17 | } 18 | 19 | header { 20 | display: flex; 21 | justify-content: flex-start; 22 | align-items: center; 23 | margin-bottom: 20px; 24 | } 25 | 26 | h1 { 27 | font-weight: 300; 28 | margin-bottom: 20px; 29 | } 30 | 31 | .container { 32 | max-width: 500px; 33 | margin: 30px auto; 34 | padding: 20px; 35 | } 36 | 37 | .parent div { 38 | list-style: none; 39 | margin-bottom: 10px; 40 | } 41 | -------------------------------------------------------------------------------- /06-document-object-model/06-traversing-the-dom-nodes/shoppinglist/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap'); 2 | 3 | *, 4 | *::before, 5 | *::after { 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | } 10 | 11 | body { 12 | font-family: 'Poppins', sans-serif; 13 | font-size: 18px; 14 | line-height: 1.5; 15 | color: #333; 16 | background-color: #f5f5f5; 17 | } 18 | 19 | header { 20 | display: flex; 21 | justify-content: flex-start; 22 | align-items: center; 23 | margin-bottom: 20px; 24 | } 25 | 26 | h1 { 27 | font-weight: 300; 28 | margin-bottom: 20px; 29 | } 30 | 31 | .container { 32 | max-width: 500px; 33 | margin: 30px auto; 34 | padding: 20px; 35 | } 36 | 37 | .parent div { 38 | list-style: none; 39 | margin-bottom: 10px; 40 | } 41 | -------------------------------------------------------------------------------- /08-asynchronous-javascript/04-ajax-xhr/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap'); 2 | 3 | // add reset 4 | *, 5 | *:before, 6 | *:after { 7 | box-sizing: border-box; 8 | padding: 0; 9 | margin: 0; 10 | } 11 | 12 | body { 13 | font-family: 'Poppins'; 14 | line-height: 1.6; 15 | padding: 0 40px; 16 | } 17 | 18 | h1 { 19 | text-align: center; 20 | line-height: 1.3; 21 | } 22 | 23 | button { 24 | display: inline-block; 25 | background: #333; 26 | border: 0; 27 | color: #fff; 28 | padding: 15px 20px; 29 | text-decoration: none; 30 | margin: 20px 0; 31 | cursor: pointer; 32 | } 33 | 34 | button:hover { 35 | background: #555; 36 | } 37 | 38 | ul { 39 | padding: 0; 40 | } 41 | 42 | li { 43 | list-style: none; 44 | background: #f4f4f4; 45 | margin-bottom: 5px; 46 | padding: 5px; 47 | } 48 | -------------------------------------------------------------------------------- /09-fetch-and-async-await/06-async-await/script.js: -------------------------------------------------------------------------------- 1 | const promise = new Promise((resolve, reject) => { 2 | setTimeout(() => { 3 | resolve({ name: 'John', age: 20 }); 4 | }, 1000); 5 | }); 6 | 7 | // promise.then((data) => console.log(data)); 8 | 9 | async function getPromise() { 10 | const response = await promise; 11 | console.log(response); 12 | } 13 | 14 | // getPromise(); 15 | 16 | async function getUsers() { 17 | const res = await fetch('https://jsonplaceholder.typicode.com/users'); 18 | const data = await res.json(); 19 | 20 | console.log(data); 21 | } 22 | 23 | // getUsers(); 24 | 25 | const getPosts = async () => { 26 | const res = await fetch('https://jsonplaceholder.typicode.com/posts'); 27 | const data = await res.json(); 28 | 29 | throw new Error('Hello'); 30 | 31 | console.log(data); 32 | }; 33 | 34 | getPosts().catch((error) => console.log(error)); 35 | -------------------------------------------------------------------------------- /07-events/01-event-listeners/shopping-list/script.js: -------------------------------------------------------------------------------- 1 | const clearBtn = document.querySelector('#clear'); 2 | 3 | function onClear() { 4 | const itemList = document.querySelector('ul'); 5 | const items = itemList.querySelectorAll('li'); 6 | 7 | // itemList.innerHTML = ''; 8 | items.forEach((item) => item.remove()); 9 | 10 | // while (itemList.firstChild) { 11 | // itemList.removeChild(itemList.firstChild); 12 | // } 13 | 14 | } 15 | 16 | // JavaScript Event Listener 17 | // clearBtn.onclick = function () { 18 | // alert('Clear Items'); 19 | // }; 20 | 21 | // clearBtn.onclick = function () { 22 | // console.log('Clear Items'); 23 | // }; 24 | 25 | // addEventListener() 26 | // clearBtn.addEventListener('click', () => alert('Clear Items')); 27 | // Use named function 28 | // clearBtn.addEventListener('click', onClear); 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /04-logic-control-flow/06-logical-operators/script.js: -------------------------------------------------------------------------------- 1 | console.log(10 < 20 && 30 > 15 && 40 > 30); // Must all be true 2 | console.log(10 > 20 || 30 < 15); // Only one has to be true 3 | 4 | // && - Will return first falsy value or the last value 5 | let a; 6 | 7 | a = 10 && 20; 8 | a = 10 && 20 && 30; 9 | a = 10 && 0 && 30; 10 | a = 10 && '' && 0 && 30; 11 | 12 | console.log(a); 13 | 14 | const posts = ['Post One', 'Post Two']; 15 | posts.length > 0 && console.log(posts[0]); 16 | 17 | // || - Will return the first truthy value or the last value 18 | 19 | let b; 20 | 21 | b = 10 || 20; 22 | b = 0 || 20; 23 | b = 0 || null || '' || undefined; 24 | 25 | console.log(b); 26 | 27 | // ?? - Returns the right side operand when the left is null or undefined 28 | 29 | let c; 30 | 31 | c = 10 ?? 20; 32 | c = null ?? 20; 33 | c = undefined ?? 30; 34 | c = 0 ?? 30; 35 | c = '' ?? 30; 36 | 37 | console.log(c); 38 | -------------------------------------------------------------------------------- /09-fetch-and-async-await/08-async-await-error-handling/script.js: -------------------------------------------------------------------------------- 1 | const getUsers = async () => { 2 | try { 3 | // const response = await fetch('https://jsonplaceholder.typicode.com/users'); 4 | const response = await fetch('http://httpstat.us/500'); 5 | 6 | if (!response.ok) { 7 | throw new Error('Request Failed'); 8 | } 9 | 10 | const data = await response.text(); 11 | 12 | console.log(data); 13 | } catch (error) { 14 | console.log(error); 15 | } 16 | }; 17 | 18 | const getPosts = async () => { 19 | // const response = await fetch('https://jsonplaceholder.typicode.com/posts'); 20 | const response = await fetch('http://httpstat.us/500'); 21 | 22 | if (!response.ok) { 23 | throw new Error('Request Failed'); 24 | } 25 | 26 | const data = await response.text(); 27 | 28 | console.log(data); 29 | }; 30 | 31 | // getUsers(); 32 | getPosts().catch((error) => console.log(error)); 33 | -------------------------------------------------------------------------------- /06-document-object-model/09-refactor-to-multiple-functions/shopping-list/script1.js: -------------------------------------------------------------------------------- 1 | function createNewItem(item) { 2 | const li = document.createElement('li'); 3 | li.appendChild(document.createTextNode(item)); 4 | 5 | const button = createButton('remove-item btn-link text-red'); 6 | li.appendChild(button); 7 | 8 | document.querySelector('.items').appendChild(li); 9 | 10 | } 11 | 12 | function createButton(classes) { 13 | 14 | const button = document.createElement('button'); 15 | button.className = classes; 16 | 17 | const icon = createIcon('fa-solid fa-xmark'); 18 | 19 | button.appendChild(icon); 20 | 21 | return button; 22 | } 23 | 24 | function createIcon(classes) { 25 | const icon = document.createElement('i'); 26 | icon.className = classes; 27 | 28 | return icon; 29 | } 30 | 31 | 32 | createNewItem('Rose Berrey'); 33 | createNewItem('Mango'); 34 | -------------------------------------------------------------------------------- /01-variables-data-types/04-data-types/script.js: -------------------------------------------------------------------------------- 1 | // String 2 | const firstName = 'Sara'; 3 | 4 | // Number 5 | const age = 30; 6 | const temp = 98.9; 7 | 8 | // Boolean 9 | const hasKids = true; 10 | 11 | // Null 12 | const aptNumber = null; 13 | 14 | // Undefined 15 | // let score; 16 | const score = undefined; 17 | 18 | // Symbol 19 | const id = Symbol('id'); 20 | 21 | // BigInt 22 | const n = 9007199254740991n; 23 | 24 | // Reference Types 25 | 26 | const numbers = [1, 2, 3, 4]; 27 | 28 | const person = { 29 | name: 'Brad', 30 | }; 31 | 32 | function sayHello() { 33 | console.log('Hello'); 34 | } 35 | 36 | const output = sayHello; 37 | 38 | console.log(output, typeof output); 39 | 40 | // More info on why typeof null == object 41 | // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof#typeof_null 42 | 43 | // More info on the "function object" type 44 | // https://262.ecma-international.org/5.1/#sec-11.4.3 45 | -------------------------------------------------------------------------------- /01-variables-data-types/07-operators/script.js: -------------------------------------------------------------------------------- 1 | // 1. Arithmetic Operators 2 | 3 | let x; 4 | 5 | x = 5 + 5; 6 | x = 5 - 5; 7 | x = 5 * 5; 8 | x = 5 / 5; 9 | x = 7 % 5; 10 | 11 | // Concatenation 12 | x = 'Hello' + ' ' + 'World'; 13 | 14 | // Exponent 15 | x = 2 ** 3; 16 | 17 | // Increment 18 | x = 1; 19 | // x = x + 1; 20 | x++; 21 | 22 | // Decrement 23 | // x = x - 1; 24 | x--; 25 | 26 | // 2. Assignment Operators 27 | 28 | x = 10; 29 | 30 | x += 5; 31 | x -= 5; 32 | x *= 5; 33 | x /= 5; 34 | x %= 5; 35 | x **= 5; 36 | 37 | // 3. Comparison Operators 38 | 39 | // Equal to (Just the value, not the type) 40 | x = 2 == '2'; 41 | 42 | // Equal to (Type and value) 43 | x = 2 === '2'; 44 | 45 | // Not equal to (Just the value, not the type) 46 | x = 2 != '2'; 47 | 48 | // Not equal to (Type and value) 49 | x = 2 !== 2; 50 | 51 | // Greater than and less than 52 | x = 10 > 5; 53 | x = 10 < 5; 54 | x = 10 <= 5; 55 | x = 10 >= 5; 56 | 57 | console.log(x); 58 | -------------------------------------------------------------------------------- /01-variables-data-types/14-dates-and-times/script.js: -------------------------------------------------------------------------------- 1 | let d; 2 | 3 | // Get today's date and time 4 | d = new Date(); 5 | 6 | // Set to a string 7 | d = d.toString(); 8 | 9 | // Get a specific date 10 | // Important: the month is 0-based, so 0 is January and 11 is December 11 | d = new Date(2021, 0, 10, 12, 30, 0); 12 | 13 | // Pass in a string 14 | d = new Date('2021-07-10T12:30:00'); 15 | d = new Date('07/10/2021 12:30:00'); 16 | d = new Date('2022-07-10'); 17 | d = new Date('07-10-2022'); 18 | 19 | // https://stackoverflow.com/questions/7556591/is-the-javascript-date-object-always-one-day-off 20 | 21 | // Get current timestamp 22 | d = Date.now(); 23 | 24 | // Get the timestamp of a specific date 25 | d = new Date(); 26 | d = d.getTime(); 27 | d = d.valueOf(); 28 | 29 | // Create a date from a timestamp 30 | d = new Date(1666962049745); 31 | 32 | // Convert from milliseconds to seconds 33 | d = Math.floor(Date.now() / 1000); 34 | 35 | console.log(d); 36 | -------------------------------------------------------------------------------- /02-arrays-and-objects/09-object-challenge/script.js: -------------------------------------------------------------------------------- 1 | // Step 1 2 | const library = [ 3 | { 4 | title: 'The Road Ahead', 5 | author: 'Bill Gates', 6 | status: { 7 | own: true, 8 | reading: false, 9 | read: false, 10 | }, 11 | }, 12 | { 13 | title: 'Steve Jobs', 14 | author: 'Walter Isaacson', 15 | status: { 16 | own: true, 17 | reading: false, 18 | read: false, 19 | }, 20 | }, 21 | { 22 | title: 'Mockingjay', 23 | author: 'Suzanne Collins', 24 | status: { 25 | own: true, 26 | reading: false, 27 | read: false, 28 | }, 29 | }, 30 | ]; 31 | 32 | // Step 2 33 | library[0].status.read = true; 34 | library[1].status.read = true; 35 | library[2].status.read = true; 36 | 37 | // Step 3 38 | const { title: firstBook } = library[0]; 39 | 40 | console.log(firstBook); 41 | 42 | // Step 4 43 | const libraryJSON = JSON.stringify(library); 44 | 45 | console.log(libraryJSON); 46 | -------------------------------------------------------------------------------- /08-asynchronous-javascript/04-ajax-xhr/script.js: -------------------------------------------------------------------------------- 1 | const xhr = new XMLHttpRequest(); 2 | 3 | // Sepcify method and endpoint/URL 4 | // xhr.open('GET', './movies.json'); 5 | xhr.open('GET', 'https://api.github.com/users/bradtraversy/repos'); 6 | 7 | // readyState has 5 possible values 8 | // - 0: request not initialized 9 | // - 1: server connection established 10 | // - 2: request received 11 | // - 3: processing request 12 | // - 4: request finished and response is ready 13 | xhr.onreadystatechange = function () { 14 | if (this.readyState === 4 && this.status === 200) { 15 | // console.log(JSON.parse(this.responseText)); 16 | const data = JSON.parse(this.responseText); 17 | 18 | data.forEach((repo) => { 19 | const li = document.createElement('li'); 20 | li.innerHTML = `${repo.name} - ${repo.description}`; 21 | document.querySelector('#results').appendChild(li); 22 | }); 23 | } 24 | }; 25 | 26 | // Send request 27 | xhr.send(); 28 | -------------------------------------------------------------------------------- /05-iteration-array-methods/07-forEach/script.js: -------------------------------------------------------------------------------- 1 | const socials = ['Twitter', 'LinkedIn', 'Facebook', 'Instagram']; 2 | 3 | // View prototype chain 4 | console.log(socials.__proto__); 5 | 6 | // Long form 7 | socials.forEach(function (item) { 8 | console.log(item); 9 | }); 10 | 11 | // Short form 12 | socials.forEach((item) => console.log(item)); 13 | 14 | // We can also pass in the index and original array 15 | socials.forEach((item, index, arr) => console.log(`${index} - ${item}`, arr)); 16 | 17 | // Using a named function 18 | function logSocials(social) { 19 | console.log(social); 20 | } 21 | 22 | socials.forEach(logSocials); 23 | 24 | // Array of objects 25 | const socialObjs = [ 26 | { name: 'Twitter', url: 'https://twitter.com' }, 27 | { name: 'Facebook', url: 'https://facebook.com' }, 28 | { name: 'Linkedin', url: 'https://linkedin.com' }, 29 | { name: 'Instagram', url: 'https://instagram.com' }, 30 | ]; 31 | 32 | socialObjs.forEach((item) => console.log(item.url)); 33 | -------------------------------------------------------------------------------- /07-events/05-event-keycode-project/event-keycodes/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: #e1e1e1; 9 | font-family: 'Muli', sans-serif; 10 | display: flex; 11 | align-items: center; 12 | justify-content: center; 13 | text-align: center; 14 | height: 100vh; 15 | overflow: hidden; 16 | margin: 0; 17 | } 18 | 19 | .key { 20 | border: 1px solid #999; 21 | background-color: #eee; 22 | box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); 23 | display: inline-flex; 24 | align-items: center; 25 | font-size: 20px; 26 | font-weight: bold; 27 | padding: 20px; 28 | flex-direction: column; 29 | margin: 10px; 30 | min-width: 150px; 31 | position: relative; 32 | } 33 | 34 | .key small { 35 | position: absolute; 36 | top: -24px; 37 | left: 0; 38 | text-align: center; 39 | width: 100%; 40 | color: #555; 41 | font-size: 14px; 42 | } 43 | -------------------------------------------------------------------------------- /01-variables-data-types/11-numbers/script.js: -------------------------------------------------------------------------------- 1 | let x; 2 | 3 | const num = new Number(5); 4 | 5 | // toString() - returns a string representation of the number 6 | 7 | x = num.toString(); 8 | 9 | // To get the length 10 | 11 | x = num.toString().length; 12 | 13 | // toFixed() - returns a string representation of the number with a specified number of decimals 14 | x = num.toFixed(2); 15 | 16 | // toPrecision() - returns a number with the specified length 17 | x = num.toPrecision(3); 18 | 19 | // toExponential() - convert a number to exponential notation and return its value as a string 20 | x = num.toExponential(2); 21 | 22 | // toLocaleString() - returns a string representation of the number, using the current locale 23 | x = num.toLocaleString('en-US'); 24 | 25 | // valueOf - Get value 26 | x = num.valueOf(); 27 | 28 | // The Number object itself has some properties and methods 29 | 30 | // Largest and smallest possible number 31 | x = Number.MAX_VALUE; 32 | x = Number.MIN_VALUE; 33 | 34 | console.log(x); 35 | -------------------------------------------------------------------------------- /06-document-object-model/08-create-item-innerHTML-vs-createElement/shopping-list/script.js: -------------------------------------------------------------------------------- 1 | // Quick & Dirty 2 | function createListItem(item) { 3 | const li = document.createElement('li'); 4 | 5 | li.innerHTML = `${item} 6 | `; 9 | 10 | document.querySelector('.items').appendChild(li); 11 | } 12 | 13 | // Clean & Performant 14 | function createNewItem(item) { 15 | const li = document.createElement('li'); 16 | li.appendChild(document.createTextNode(item)); 17 | 18 | const button = document.createElement('button'); 19 | button.className = 'remove-item btn-link text-red'; 20 | 21 | const icon = document.createElement('i'); 22 | icon.className = 'fa-solid fa-xmark'; 23 | 24 | button.appendChild(icon); 25 | li.appendChild(button); 26 | 27 | document.querySelector('.items').appendChild(li); 28 | } 29 | 30 | createListItem('Eggs'); 31 | createNewItem('Cheese'); 32 | -------------------------------------------------------------------------------- /02-arrays-and-objects/05-object-literals/script.js: -------------------------------------------------------------------------------- 1 | let x; 2 | 3 | // Creating an object 4 | const person = { 5 | name: 'John Doe', 6 | age: 30, 7 | isAdmin: true, 8 | address: { 9 | street: '123 Main st', 10 | city: 'Boston', 11 | state: 'MA', 12 | }, 13 | hobbies: ['music', 'sports'], 14 | }; 15 | 16 | // Accessing object properties 17 | x = person.name; // Dot notation 18 | x = person['age']; // Bracket notation 19 | x = person.address.state; 20 | x = person.hobbies[0]; 21 | 22 | // Updating properties 23 | person.name = 'Jane Doe'; 24 | person['isAdmin'] = false; 25 | 26 | // Deleting properties 27 | delete person.age; 28 | 29 | // Create new properties 30 | person.hasChildren = true; 31 | 32 | // Add functions 33 | person.greet = function () { 34 | console.log(`Hello, my name is ${this.name}`); 35 | }; 36 | 37 | person.greet(); 38 | 39 | // Keys with multiple words 40 | const person2 = { 41 | 'first name': 'Brad', 42 | 'last name': 'Designy', 43 | }; 44 | 45 | x = person2['first name']; 46 | 47 | console.log(x); 48 | -------------------------------------------------------------------------------- /09-fetch-and-async-await/04-typicode-todos-mini-project/typicode-todos/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap'); 2 | 3 | *, 4 | *:before, 5 | *:after { 6 | box-sizing: border-box; 7 | padding: 0; 8 | margin: 0; 9 | } 10 | 11 | body { 12 | font-family: 'Poppins'; 13 | line-height: 1.6; 14 | padding: 0 40px; 15 | } 16 | 17 | header { 18 | margin-bottom: 20px; 19 | } 20 | 21 | button { 22 | padding: 10px; 23 | background: salmon; 24 | color: white; 25 | border-radius: 5px; 26 | width: 100px; 27 | border: none; 28 | } 29 | 30 | input[type='text'] { 31 | padding: 5px; 32 | border-radius: 5px; 33 | width: 300px; 34 | height: 35px; 35 | border: 1px #ccc solid; 36 | margin-right: 5px; 37 | } 38 | 39 | #todo-list { 40 | display: flex; 41 | flex-wrap: wrap; 42 | margin-top: 20px; 43 | } 44 | 45 | #todo-list > div { 46 | border: 1px #666 solid; 47 | padding: 10px; 48 | margin: 5px; 49 | cursor: pointer; 50 | } 51 | 52 | .done { 53 | background: #ccc; 54 | } 55 | -------------------------------------------------------------------------------- /06-document-object-model/14-styles-classes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Adding & Removing Styles & Classes 9 | 10 | 11 |

Adding & Removing Styles & Classes

12 | 13 |

14 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dignissimos 15 | quasi odio dicta nisi voluptate tempora corporis reprehenderit optio qui 16 | eos officiis nostrum cupiditate delectus, accusamus adipisci non, amet 17 | quis provident. 18 |

19 | 20 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /sol.js: -------------------------------------------------------------------------------- 1 | // let mystr="developer"; 2 | // let newstr = mystr.charAt(0).toUpperCase()+mystr.substring(1); 3 | // const myNewString = myString[0].toUpperCase() + myString.substring(1); 4 | // const myNewString1 = `${myString[0].toUpperCase()}${myString.slice(1)}`; 5 | 6 | let x; 7 | const num = new Number(523454); 8 | 9 | // toString() - returns a string representation of the number 10 | 11 | x=num.toString(); 12 | // To get the length 13 | 14 | x = num.toString().length; 15 | // toFixed() - returns a string representation of the number with a specified number of decimals 16 | x = num.toFixed(2); 17 | // toPrecision() - returns a number with the specified length 18 | x = num.toPrecision(5); 19 | // toExponential() - convert a number to exponential notation and return its value as a string 20 | x = num.toExponential(3); 21 | // toLocaleString() - returns a string representation of the number, using the current locale 22 | x = num.toLocaleString('en-IN'); 23 | 24 | // valueOf - Get value 25 | x = num.valueOf(); 26 | x = Number.MAX_VALUE; 27 | x= Number.MIN_VALUE; 28 | 29 | console.log(x," ",typeof x); 30 | -------------------------------------------------------------------------------- /08-asynchronous-javascript/10-promises-vs-callback-hell/script.js: -------------------------------------------------------------------------------- 1 | function getData(endpoint) { 2 | return new Promise((resolve, reject) => { 3 | const xhr = new XMLHttpRequest(); 4 | 5 | xhr.open('GET', endpoint); 6 | 7 | xhr.onreadystatechange = function () { 8 | if (this.readyState === 4) { 9 | if (this.status === 200) { 10 | resolve(JSON.parse(this.responseText)); 11 | } else { 12 | reject('Something went wrong'); 13 | } 14 | } 15 | }; 16 | 17 | setTimeout(() => { 18 | xhr.send(); 19 | }, Math.floor(Math.random() * 3000) + 1000); 20 | }); 21 | } 22 | 23 | // Whatever we return from a .then() is passed into the next .then() callback function args 24 | getData('./movies.json') 25 | .then((movies) => { 26 | console.log(movies); 27 | return getData('./actors.json'); 28 | }) 29 | .then((actors) => { 30 | console.log(actors); 31 | return getData('./directors.json'); 32 | }) 33 | .then((directors) => { 34 | console.log(directors); 35 | }) 36 | .catch((error) => console.log(error)); 37 | -------------------------------------------------------------------------------- /03-functions-scope/02-params-arguments/script.js: -------------------------------------------------------------------------------- 1 | // Default Params 2 | function registerUser(user = 'Bot') { 3 | // Old way - before using `=` 4 | // if (!user) { 5 | // user = 'Bot'; 6 | // } 7 | 8 | return user + ' is registered'; 9 | } 10 | 11 | console.log(registerUser()); 12 | 13 | // Rest Params 14 | function sum(...numbers) { 15 | let total = 0; 16 | 17 | for (const num of numbers) { 18 | total += num; 19 | } 20 | 21 | return total; 22 | } 23 | 24 | console.log(sum(1, 2, 3, 4, 5, 6, 100)); 25 | 26 | // Objects as params 27 | function loginUser(user) { 28 | return `The user ${user.name} with the id of ${user.id} is logged in`; 29 | } 30 | 31 | const user = { 32 | id: 1, 33 | name: 'John', 34 | }; 35 | 36 | console.log(loginUser(user)); 37 | console.log( 38 | loginUser({ 39 | id: 2, 40 | name: 'Sara', 41 | }) 42 | ); 43 | 44 | // Arrays as params 45 | function getRandom(arr) { 46 | const randomIndex = Math.floor(Math.random() * arr.length); 47 | 48 | const item = arr[randomIndex]; 49 | 50 | console.log(item); 51 | } 52 | 53 | getRandom([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]); 54 | -------------------------------------------------------------------------------- /08-asynchronous-javascript/02-setinterval-clearinterval/script.js: -------------------------------------------------------------------------------- 1 | // const intervalID = setInterval(myCallback, 1000, 'Hello'); 2 | 3 | // function myCallback(a) { 4 | // console.log(a, Date.now()); 5 | // } 6 | 7 | let intervalID; 8 | 9 | function startChange() { 10 | if (!intervalID) { 11 | intervalID = setInterval(changeRandomColor, 1000); 12 | } 13 | } 14 | 15 | // function changeColor() { 16 | // if (document.body.style.backgroundColor !== 'black') { 17 | // document.body.style.backgroundColor = 'black'; 18 | // document.body.style.color = 'white'; 19 | // } else { 20 | // document.body.style.backgroundColor = 'white'; 21 | // document.body.style.color = 'black'; 22 | // } 23 | // } 24 | 25 | function changeRandomColor() { 26 | const randomColor = Math.floor(Math.random() * 16777215).toString(16); 27 | document.body.style.backgroundColor = `#${randomColor}`; 28 | } 29 | 30 | function stopChange() { 31 | clearInterval(intervalID); 32 | } 33 | 34 | document.getElementById('start').addEventListener('click', startChange); 35 | document.getElementById('stop').addEventListener('click', stopChange); 36 | -------------------------------------------------------------------------------- /01-variables-data-types/15-date-object-methods/script.js: -------------------------------------------------------------------------------- 1 | let x; 2 | let d = new Date(); 3 | 4 | // Date methods 5 | 6 | x = d.toString(); 7 | 8 | x = d.getTime(); 9 | x = d.valueOf(); 10 | 11 | x = d.getFullYear(); 12 | 13 | x = d.getMonth(); 14 | x = d.getMonth() + 1; 15 | 16 | x = d.getDate(); 17 | 18 | x = d.getDay(); 19 | 20 | x = d.getHours(); 21 | 22 | x = d.getMinutes(); 23 | 24 | x = d.getSeconds(); 25 | 26 | x = d.getMilliseconds(); 27 | 28 | x = `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`; 29 | 30 | // Intl.DateTimeFormat API (locale specific) 31 | x = Intl.DateTimeFormat('en-US').format(d); 32 | x = Intl.DateTimeFormat('en-GB').format(d); 33 | x = Intl.DateTimeFormat('default').format(d); 34 | 35 | x = Intl.DateTimeFormat('default', { month: 'long' }).format(d); 36 | 37 | x = d.toLocaleString('default', { month: 'short' }); 38 | 39 | x = d.toLocaleString('default', { 40 | weekday: 'long', 41 | year: 'numeric', 42 | month: 'long', 43 | day: 'numeric', 44 | hour: 'numeric', 45 | minute: 'numeric', 46 | second: 'numeric', 47 | timeZone: 'America/New_York', 48 | }); 49 | 50 | console.log(x); 51 | -------------------------------------------------------------------------------- /02-arrays-and-objects/03-array-nesting-concat-spread/script.js: -------------------------------------------------------------------------------- 1 | let x; 2 | 3 | const fruits = ['apple', 'pear', 'orange']; 4 | const berries = ['strawberry', 'blueberry', 'rasberry']; 5 | 6 | // Nesting arrays 7 | 8 | // Nesting berries inside of fruits 9 | fruits.push(berries); 10 | 11 | // Now we can access 'blueberry' with the following 12 | x = fruits[3][1]; 13 | 14 | // Create a new variable and nest both arrays 15 | const allFruits = [fruits, berries]; 16 | 17 | x = allFruits[1][2]; 18 | 19 | // concat() - Concatenate arrays 20 | x = fruits.concat(berries); 21 | 22 | // spread operator (...) - Concatenate with 23 | x = [...fruits, ...berries]; 24 | 25 | // flat() - Flatten an array 26 | const arr = [1, 2, [3, 4, 5], 6, [7, 8]]; 27 | x = arr.flat(); 28 | 29 | // Static methods of Array object 30 | 31 | // isArray() - Check is is an array 32 | x = Array.isArray(fruits); 33 | 34 | // from() - Create an array from an array like value 35 | x = Array.from('12345'); 36 | 37 | // of() - Create an array from a set of values 38 | const a = 1; 39 | const b = 2; 40 | const c = 3; 41 | 42 | x = Array.of(a, b, c); 43 | 44 | console.log(x); 45 | -------------------------------------------------------------------------------- /09-fetch-and-async-await/02-random-user-project/random-user-generator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Random User Generator 10 | 11 | 12 |
15 |
16 |

Random User Generator

17 | 24 |
25 | 26 |
27 |
28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /06-document-object-model/06-traversing-the-dom-nodes/shoppinglist/script.js: -------------------------------------------------------------------------------- 1 | let output; 2 | 3 | // Get child nodes 4 | 5 | const parent = document.querySelector('.parent'); 6 | 7 | output = parent.childNodes; 8 | output = parent.childNodes[0].textContent; 9 | output = parent.childNodes[0].nodeName; 10 | output = parent.childNodes[3].textContent; 11 | output = parent.childNodes[3].outerHTML; 12 | 13 | output = parent.childNodes[3].innerText = 'Child One'; 14 | output = parent.childNodes[5].style.color = 'red'; 15 | 16 | output = parent.firstChild; 17 | output = parent.lastChild; 18 | 19 | parent.lastChild.textContent = 'Hello'; 20 | 21 | // Get parent node 22 | 23 | const child = document.querySelector('.child'); 24 | 25 | output = child.parentNode; 26 | output = child.parentElement; 27 | 28 | child.parentNode.style.backgroundColor = '#ccc'; 29 | child.parentNode.style.padding = '10px'; 30 | 31 | // Get sibling nodes 32 | const secondItem = document.querySelector('.child:nth-child(2)'); 33 | 34 | output = secondItem.nextSibling; 35 | output = secondItem.previousSibling; 36 | 37 | console.log(output); 38 | -------------------------------------------------------------------------------- /09-fetch-and-async-await/05-fetch-error-handling/random-user-generator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Random User Generator 10 | 11 | 12 |
15 |
16 |

Random User Generator

17 | 24 |
25 | 26 |
27 |
28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /06-document-object-model/05-traversing-the-dom-elements/shoppinglist/script.js: -------------------------------------------------------------------------------- 1 | let output; 2 | 3 | // Get child elements from a parent 4 | 5 | const parent = document.querySelector('.parent'); 6 | 7 | output = parent.children; 8 | 9 | output = parent.children[1].innerText; 10 | output = parent.children[1].className; 11 | output = parent.children[1].nodeName; 12 | 13 | 14 | parent.children[1].innerText = 'Child Two'; 15 | parent.children[1].style.color = 'red'; 16 | 17 | parent.firstElementChild.innerText = 'Child One'; 18 | parent.lastElementChild.innerText = 'Child Three'; 19 | 20 | // Get parent elements from a child 21 | 22 | const child = document.querySelector('.child'); 23 | 24 | output = child.parentElement; 25 | child.parentElement.style.border = '1px solid #ccc'; 26 | child.parentElement.style.padding = '10px'; 27 | 28 | // Get sibling elements 29 | const secondItem = document.querySelector('.child:nth-child(2)'); 30 | 31 | output = secondItem; 32 | output = secondItem.nextElementSibling; 33 | 34 | secondItem.nextElementSibling.style.color = 'green'; 35 | secondItem.previousElementSibling.style.color = 'orange'; 36 | 37 | console.log(output); 38 | -------------------------------------------------------------------------------- /08-asynchronous-javascript/08-callback-to-promise/script.js: -------------------------------------------------------------------------------- 1 | const posts = [ 2 | { title: 'Post One', body: 'This is post one' }, 3 | { title: 'Post Two', body: 'This is post two' }, 4 | ]; 5 | 6 | function createPost(post) { 7 | return new Promise((resolve, reject) => { 8 | setTimeout(() => { 9 | let error = false; 10 | 11 | if (!error) { 12 | posts.push(post); 13 | resolve(); 14 | } else { 15 | reject('Something went wrong'); 16 | } 17 | }, 2000); 18 | }); 19 | } 20 | 21 | function getPosts() { 22 | setTimeout(() => { 23 | posts.forEach(function (post) { 24 | const div = document.createElement('div'); 25 | div.innerHTML = `${post.title} - ${post.body}`; 26 | document.querySelector('#posts').appendChild(div); 27 | }); 28 | }, 1000); 29 | } 30 | 31 | function showError(error) { 32 | const h3 = document.createElement('h3'); 33 | h3.innerHTML = `${error}`; 34 | document.getElementById('posts').appendChild(h3); 35 | } 36 | 37 | createPost({ title: 'Post Three', body: 'This is post' }) 38 | .then(getPosts) 39 | .catch(showError); 40 | -------------------------------------------------------------------------------- /08-asynchronous-javascript/11-promise-all/script.js: -------------------------------------------------------------------------------- 1 | function getData(endpoint) { 2 | return new Promise((resolve, reject) => { 3 | const xhr = new XMLHttpRequest(); 4 | 5 | xhr.open('GET', endpoint); 6 | 7 | xhr.onreadystatechange = function () { 8 | if (this.readyState === 4) { 9 | if (this.status === 200) { 10 | resolve(JSON.parse(this.responseText)); 11 | } else { 12 | reject('Something went wrong'); 13 | } 14 | } 15 | }; 16 | 17 | setTimeout(() => { 18 | xhr.send(); 19 | }, Math.floor(Math.random() * 3000) + 1000); 20 | }); 21 | } 22 | 23 | const moviesPromise = getData('./movies.json'); 24 | const actorsPromise = getData('./actors.json'); 25 | const directorsPromise = getData('./directors.json'); 26 | 27 | const dummyPromise = new Promise((resolve, reject) => { 28 | resolve('Hello World'); 29 | }); 30 | 31 | // Takes in promises 32 | Promise.all([moviesPromise, actorsPromise, directorsPromise, dummyPromise]) 33 | .then((data) => { 34 | // Returns an array of promise results 35 | console.log(data); 36 | }) 37 | .catch((error) => console.log(error)); 38 | -------------------------------------------------------------------------------- /07-events/06-input-events/shopping-list/script.js: -------------------------------------------------------------------------------- 1 | const itemInput = document.getElementById('item-input'); 2 | const priorityInput = document.getElementById('priority-input'); 3 | const checkbox = document.getElementById('checkbox'); 4 | const heading = document.querySelector('h1'); 5 | 6 | function onInput(e) { 7 | heading.textContent = e.target.value; 8 | } 9 | 10 | function onChecked(e) { 11 | const isChecked = e.target.checked; 12 | heading.textContent = isChecked ? 'Checked' : 'Not Checked'; 13 | } 14 | 15 | function onFocus() { 16 | console.log('Input is focused'); 17 | itemInput.style.outlineStyle = 'solid'; 18 | itemInput.style.outlineWidth = '1px'; 19 | itemInput.style.outlineColor = 'red'; 20 | } 21 | 22 | function onBlur() { 23 | console.log('Input is not focused'); 24 | itemInput.style.outlineStyle = 'none'; 25 | } 26 | 27 | // input, change, focus and blur events 28 | itemInput.addEventListener('input', onInput); 29 | priorityInput.addEventListener('change', onInput); 30 | checkbox.addEventListener('input', onChecked); 31 | itemInput.addEventListener('focus', onFocus); 32 | itemInput.addEventListener('blur', onBlur); 33 | -------------------------------------------------------------------------------- /07-events/07-form-submission/shopping-list/script.js: -------------------------------------------------------------------------------- 1 | const form = document.getElementById('item-form'); 2 | 3 | function onSubmit(e) { 4 | e.preventDefault(); 5 | 6 | // Get value with .value 7 | const item = document.getElementById('item-input').value; 8 | 9 | const priority = document.getElementById('priority-input').value; 10 | 11 | if (item === '' || priority === '0') { 12 | alert('Please fill in all fields'); 13 | return; 14 | } 15 | 16 | console.log(item, priority); 17 | } 18 | 19 | // Using the FormData Object 20 | function onSubmit2(e) { 21 | e.preventDefault(); 22 | 23 | const formData = new FormData(form); 24 | 25 | // Get individual items 26 | const item = formData.get('item'); 27 | const priority = formData.get('priority'); 28 | 29 | console.log(item, priority); 30 | 31 | // Get al entried as an Iterator 32 | const entries = formData.entries(); 33 | console.log(entries); 34 | 35 | // Loop through entries 36 | for (let entry of entries) { 37 | console.log(entry[1]); 38 | } 39 | } 40 | 41 | form.addEventListener('submit', onSubmit2); 42 | // form.addEventListener('submit',onSubmit); -------------------------------------------------------------------------------- /06-document-object-model/14-styles-classes/script.js: -------------------------------------------------------------------------------- 1 | const text = document.querySelector('p'); 2 | const itemList = document.querySelector('.item-list'); 3 | const items = itemList.querySelectorAll('li'); 4 | 5 | function run() { 6 | 7 | // className - Gets a string of all classes 8 | console.log(itemList.className); 9 | // Changing the classes with className 10 | text.className = 'card dark'; 11 | 12 | // classList - Array of classes, which also has methods to add, remove, toggle and replace 13 | console.log(itemList.classList); 14 | 15 | // We can loop through the classes 16 | itemList.classList.forEach((c) => console.log(c)); 17 | 18 | // Add, remove, toggle, replace 19 | text.classList.add('dark'); 20 | 21 | text.classList.remove('card'); 22 | text.classList.toggle('hidden'); 23 | text.classList.replace('card', 'dark'); 24 | 25 | // style property - Add styles to elements 26 | itemList.style.lineHeight = '3'; 27 | 28 | items.forEach((item, index) => { 29 | item.style.color = 'red'; 30 | 31 | if (index === 2) { 32 | item.style.color = 'blue'; 33 | } 34 | }); 35 | } 36 | 37 | 38 | document.querySelector('button').onclick = run; 39 | -------------------------------------------------------------------------------- /06-document-object-model/13-remove-elements/shopping-list/script.js: -------------------------------------------------------------------------------- 1 | // remove() Method 2 | function removeClearButton() { 3 | const clearBtn = document.querySelector('#clear'); 4 | clearBtn.remove(); 5 | } 6 | 7 | // removeChild() Method 8 | function removeFirstItem() { 9 | const ul = document.querySelector('ul'); 10 | const li = document.querySelector('li:first-child'); 11 | 12 | ul.removeChild(li); 13 | } 14 | 15 | // Other examples 16 | 17 | function removeItem(itemNumber) { 18 | const ul = document.querySelector('ul'); 19 | const li = document.querySelector(`li:nth-child(${itemNumber})`); 20 | 21 | ul.removeChild(li); 22 | } 23 | 24 | function removeItem2(itemNumber) { 25 | 26 | const ul = document.querySelector('ul'); 27 | const li = document.querySelectorAll('li')[itemNumber - 1]; 28 | 29 | ul.removeChild(li); 30 | } 31 | 32 | function removeItem3(itemNumber) { 33 | const li = document.querySelectorAll('li'); 34 | li[itemNumber - 1].remove(); 35 | } 36 | 37 | const removeItem4 = (itemNumber) => 38 | document.querySelectorAll('li')[itemNumber - 1].remove(); 39 | 40 | removeClearButton(); 41 | removeFirstItem(); 42 | removeItem(2); 43 | removeItem4(2); 44 | -------------------------------------------------------------------------------- /04-logic-control-flow/08-ternary-operator/script.js: -------------------------------------------------------------------------------- 1 | const age = 17; 2 | 3 | // Using an if statement 4 | if (age >= 18) { 5 | console.log('You can vote!'); 6 | } else { 7 | console.log('You can not vote'); 8 | } 9 | 10 | // Using a ternary operator 11 | age >= 18 ? console.log('You can vote!') : console.log('You can not vote'); 12 | 13 | // Assigning a conditional value to a variable 14 | const canVote = age >= 18 ? true : false; 15 | const canVote2 = age >= 18 ? 'You can vote!' : 'You can not vote'; 16 | 17 | console.log(canVote); 18 | console.log(canVote2); 19 | 20 | // Multiple statements 21 | 22 | const auth = true; 23 | 24 | // Long version 25 | // let redirect; 26 | 27 | // if (auth) { 28 | // alert('Welcome to the dashboard'); 29 | // redirect = '/dashboard'; 30 | // } else { 31 | // alert('Access Denied'); 32 | // redirect = '/login'; 33 | // } 34 | 35 | // Shorter ternary version 36 | const redirect = auth 37 | ? (alert('Welcome to the dashbaord'), '/dashboard') 38 | : (alert('Access Denied'), '/login'); 39 | 40 | console.log(redirect); 41 | 42 | // Ternary with no else 43 | auth ? console.log('Welcome to the dashboard') : null; 44 | // Shorthand for ternary with no else 45 | auth && console.log('Welcome to the dashoard'); 46 | -------------------------------------------------------------------------------- /06-document-object-model/04-dom-selectors-multiple-elements/shopping-list/script.js: -------------------------------------------------------------------------------- 1 | // querySelectorAll() 2 | // Returns a NodeList 3 | 4 | const listItems = document.querySelectorAll('.item'); 5 | // Access elements by index 6 | console.log(listItems[1].innerText); 7 | // Setting a color for specific element 8 | listItems[1].style.color = 'red'; 9 | 10 | // We can use forEach() on a NodeList 11 | listItems.forEach((item, index) => { 12 | item.style.color = 'red'; 13 | 14 | if (index === 1) { 15 | item.remove(); 16 | } 17 | 18 | if (index === 0) { 19 | item.innerHTML = ` Oranges 20 | `; 23 | } 24 | }); 25 | 26 | // getElementsByClassName() 27 | // Returns an HTMLCollection 28 | 29 | const listItems2 = document.getElementsByClassName('item'); 30 | 31 | console.log(listItems2[2].innerText); 32 | 33 | const listItemsArray = Array.from(listItems2); 34 | 35 | listItemsArray.forEach((item) => { 36 | console.log(item.innerText); 37 | }); 38 | 39 | // getElementsByTagName() 40 | 41 | const listItems3 = document.getElementsByTagName('li'); 42 | console.log(listItems3[0].innerText); 43 | -------------------------------------------------------------------------------- /02-arrays-and-objects/06-object-spread-methods/script.js: -------------------------------------------------------------------------------- 1 | let x; 2 | 3 | // Create object using the object constructor 4 | const todo = new Object(); 5 | 6 | todo.id = 1; 7 | todo.name = 'Buy Milk'; 8 | todo.completed = false; 9 | 10 | x = todo; 11 | 12 | // Object Nesting 13 | const person = { 14 | address: { 15 | coords: { 16 | lat: 42.9384, 17 | lng: -71.3232, 18 | }, 19 | }, 20 | }; 21 | 22 | x = person.address.coords.lat; 23 | 24 | const obj1 = { a: 1, b: 2 }; 25 | const obj2 = { c: 3, d: 4 }; 26 | 27 | // Spread operator 28 | const obj3 = { ...obj1, ...obj2 }; 29 | // Same as using ... 30 | const obj4 = Object.assign({}, obj1, obj2); 31 | 32 | // Array of objects 33 | const todos = [ 34 | { id: 1, name: 'Buy Milk' }, 35 | { id: 2, name: 'Pickup kids from school' }, 36 | { id: 3, name: 'Take out trash' }, 37 | ]; 38 | 39 | x = todos[0].name; 40 | 41 | // Get array of object keys 42 | x = Object.keys(todo); 43 | 44 | // Get length of an object 45 | x = Object.keys(todo).length; 46 | 47 | // Get array of object values 48 | x = Object.values(todo); 49 | 50 | // Get array of object key/value pairs 51 | x = Object.entries(todo); 52 | 53 | // Check if object has a property 54 | x = todo.hasOwnProperty('age'); 55 | 56 | console.log(x); 57 | -------------------------------------------------------------------------------- /07-events/04-keyboard-events/shopping-list/script.js: -------------------------------------------------------------------------------- 1 | const itemInput = document.getElementById('item-input'); 2 | 3 | const onKeyPress = (e) => { 4 | console.log('keypress'); 5 | }; 6 | 7 | const onKeyUp = (e) => { 8 | console.log('keyup'); 9 | }; 10 | 11 | const onKeyDown = (e) => { 12 | // key 13 | // if (e.key === 'Enter') { 14 | // alert('You pressed enter'); 15 | // } 16 | 17 | // keyCode 18 | // https://www.toptal.com/developers/keycode/table-of-all-keycodes 19 | if (e.keyCode === 13) { 20 | alert('You pressed enter'); 21 | } 22 | 23 | // code 24 | if (e.code === 'Digit1') { 25 | console.log('You pressed 1'); 26 | } 27 | 28 | // repeat 29 | if (e.repeat) { 30 | console.log('You are holding down ' + e.key); 31 | } 32 | 33 | // shiftKey, ctrlKey & altKey 34 | console.log('Shift: ' + e.shiftKey); 35 | console.log('Control: ' + e.ctrlKey); 36 | console.log('Alt: ' + e.altKey); 37 | 38 | if (e.shiftKey && e.key === 'K') { 39 | console.log('You hit shift + K'); 40 | } 41 | }; 42 | 43 | // Event Listeners 44 | itemInput.addEventListener('keypress', onKeyPress); 45 | itemInput.addEventListener('keyup', onKeyUp); 46 | itemInput.addEventListener('keydown', onKeyDown); 47 | -------------------------------------------------------------------------------- /05-iteration-array-methods/01-for-loop/script.js: -------------------------------------------------------------------------------- 1 | // for ([initialExpression]; [conditionExpression]; [incrementExpression]) 2 | // statement; 3 | 4 | // INITITAL EXPRESSION - Initializes a variable/counter 5 | // CONDITION EXPRESSION - Condition that the loop will continue to run as long as it is met or until the condition is false 6 | // INCREMENT EXPRESSION - Expression that will be executed after each iteration of the loop. Usually increments the variable 7 | // STATEMENT - Code that will be executed each time the loop is run. To execute a `block` of code, use the `{}` syntax 8 | 9 | // for (let i = 0; i <= 10; i++) { 10 | // if (i === 7) { 11 | // console.log('7 is my lucky number'); 12 | // } else { 13 | // console.log('Number ' + i); 14 | // } 15 | // } 16 | 17 | // Nested loops 18 | // for (let i = 1; i <= 10; i++) { 19 | // console.log('Number ' + i); 20 | 21 | // for (let j = 1; j <= 5; j++) { 22 | // console.log(`${i} * ${j} = ${i * j}`); 23 | // } 24 | // } 25 | 26 | // Loop through an array 27 | const names = ['Brad', 'Sam', 'Sara', 'John', 'Tim']; 28 | 29 | for (let i = 0; i < names.length; i++) { 30 | if (names[i] === 'John') { 31 | console.log(names[i] + ' is the best'); 32 | } else { 33 | console.log(names[i]); 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /06-document-object-model/10-insert-elements/shopping-list/script.js: -------------------------------------------------------------------------------- 1 | // insertAdjacentElement Example 2 | 3 | function insertElement() { 4 | const filter = document.querySelector('.filter'); 5 | 6 | const h1 = document.createElement('h1'); 7 | h1.textContent = 'insertAdjacentElement'; 8 | 9 | filter.insertAdjacentElement('beforebegin', h1); 10 | } 11 | 12 | // insertAdjacentText Example 13 | function insertText() { 14 | const item = document.querySelector('li:first-child'); 15 | 16 | item.insertAdjacentText('beforebegin', 'insertAdjacentText'); 17 | } 18 | 19 | // insertAdjacentHTML example 20 | function insertHTML() { 21 | const clearBtn = document.querySelector('#clear'); 22 | 23 | clearBtn.insertAdjacentHTML('afterend', '

insertAdjacentHTML

'); 24 | } 25 | 26 | // insertBefore Example 27 | function insertBeforeItem() { 28 | const ul = document.querySelector('ul'); 29 | 30 | const li = document.createElement('li'); 31 | li.textContent = 'insertBefore'; 32 | 33 | const thirdItem = document.querySelector('li:nth-child(3)'); 34 | 35 | ul.insertBefore(li, thirdItem); 36 | } 37 | 38 | insertElement(); 39 | 40 | /* 41 | 42 |

43 | 44 | foo 45 | 46 |

47 | 48 | */ 49 | -------------------------------------------------------------------------------- /08-asynchronous-javascript/05-joke-generator-challenge/chuck-joke-generator/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: #686de0; 9 | font-family: 'Roboto', sans-serif; 10 | display: flex; 11 | flex-direction: column; 12 | align-items: center; 13 | justify-content: center; 14 | height: 100vh; 15 | overflow: hidden; 16 | margin: 0; 17 | padding: 20px; 18 | } 19 | 20 | .container { 21 | background-color: #fff; 22 | border-radius: 10px; 23 | box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1); 24 | padding: 50px 20px; 25 | text-align: center; 26 | max-width: 100%; 27 | width: 800px; 28 | } 29 | 30 | h3 { 31 | margin: 0; 32 | opacity: 0.5; 33 | letter-spacing: 2px; 34 | } 35 | 36 | .joke { 37 | font-size: 30px; 38 | letter-spacing: 1px; 39 | line-height: 40px; 40 | margin: 50px auto; 41 | max-width: 600px; 42 | } 43 | 44 | .btn { 45 | background-color: #9f68e0; 46 | color: #fff; 47 | border: 0; 48 | border-radius: 10px; 49 | box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1); 50 | padding: 14px 40px; 51 | font-size: 16px; 52 | cursor: pointer; 53 | } 54 | 55 | .btn:active { 56 | transform: scale(0.98); 57 | } 58 | 59 | .btn:focus { 60 | outline: 0; 61 | } 62 | -------------------------------------------------------------------------------- /01-variables-data-types/03-variables/script.js: -------------------------------------------------------------------------------- 1 | // Ways to declare a variable 2 | // `var`, `let`, & `const` 3 | 4 | let firstName = 'John'; 5 | const lastName = 'Doe'; 6 | let age = 30; 7 | 8 | console.log(age); 9 | 10 | // Naming Conventions 11 | // - Only letters, numbers, underscores and dollar signs 12 | // - Can't start with a number 13 | 14 | // Multi-Word Formatting 15 | // firstName = camelCase 16 | // first_name = underscore 17 | // FirstName = PascalCase 18 | // firstname = lowercase 19 | 20 | // We can re-assign `let` variables. If you change `age` to use `const`, you will get an error 21 | age = 31; 22 | console.log(age); 23 | 24 | // With let, we can declare a value without assigning a value 25 | let score; 26 | score = 1; 27 | console.log(score); 28 | 29 | if (true) { 30 | score = score + 1; 31 | } 32 | 33 | console.log(score); 34 | 35 | const x = 100; 36 | 37 | // We can not re-assign a const variable 38 | // x = 200 // Will result in an error 39 | 40 | // We can still manipulate arrays and objects using const 41 | const arr = [1, 2, 3, 4]; 42 | arr.push(5); 43 | console.log(arr); 44 | 45 | const person = { 46 | name: 'Brad', 47 | }; 48 | person.name = 'John'; 49 | person.email = 'brad@gmail.com'; 50 | console.log(person); 51 | 52 | // Declare multiple values at once 53 | let a, b, c; 54 | 55 | const d = 10, 56 | e = 20, 57 | f = 30; 58 | 59 | console.log(d); 60 | console.log(a); 61 | -------------------------------------------------------------------------------- /07-events/10-window-events/script.js: -------------------------------------------------------------------------------- 1 | // On Page Load 2 | window.onload = function () { 3 | document.querySelector('h1').textContent = 'Hello World'; 4 | }; 5 | 6 | window.addEventListener('load', () => console.log('Page Loaded')); 7 | 8 | // On DOM Load 9 | window.addEventListener('DOMContentLoaded', () => console.log('DOM Loaded')); 10 | 11 | console.log('Run me'); 12 | 13 | // Resize Event 14 | // window.addEventListener('resize', () => { 15 | // document.querySelector('h1').innerText = `Resized to ${window.innerWidth} x ${window.innerHeight}`; 16 | // }); 17 | 18 | // // Scroll Event 19 | // window.addEventListener('scroll', () => { 20 | // console.log(`Scrolled: ${window.scrollX} x ${window.scrollY}`); 21 | 22 | // if (window.scrollY > 70) { 23 | // document.body.style.backgroundColor = 'black'; 24 | // document.body.style.color = 'white'; 25 | // } else { 26 | // document.body.style.backgroundColor = 'white'; 27 | // document.body.style.color = 'black'; 28 | // } 29 | // }); 30 | 31 | // // Focus & Blur Events 32 | // window.addEventListener('focus', () => { 33 | // document.querySelectorAll('p').forEach((p) => { 34 | // p.style.color = 'blue'; 35 | // }); 36 | // }); 37 | 38 | // window.addEventListener('blur', () => { 39 | // document.querySelectorAll('p').forEach((p) => { 40 | // p.style.color = 'black'; 41 | // }); 42 | // }); 43 | -------------------------------------------------------------------------------- /07-events/05-event-keycode-project/event-keycodes/script.js: -------------------------------------------------------------------------------- 1 | // Method 1 2 | 3 | window.addEventListener('keydown', (e) => { 4 | const insert = document.getElementById('insert'); 5 | 6 | insert.innerHTML = ` 7 |
8 | ${e.key === ' ' ? 'Space' : e.key} 9 | e.key 10 |
11 | 12 |
13 | ${e.keyCode} 14 | e.keyCode 15 |
16 | 17 |
18 | ${e.code} 19 | e.code 20 |
21 | `; 22 | }); 23 | 24 | // Method 2 25 | // function showKeyCodes(e) { 26 | // const insert = document.getElementById('insert'); 27 | // insert.innerHTML = ''; 28 | 29 | // const keyCodes = { 30 | // 'e.key': e.key === ' ' ? 'Space' : e.key, 31 | // 'e.keyCode': e.keyCode, 32 | // 'e.code': e.code, 33 | // }; 34 | 35 | // for (let key in keyCodes) { 36 | // const div = document.createElement('div'); 37 | // div.className = 'key'; 38 | // const small = document.createElement('small'); 39 | 40 | // const keyText = document.createTextNode(key); 41 | // const valueText = document.createTextNode(keyCodes[key]); 42 | 43 | // small.appendChild(keyText); 44 | // div.appendChild(valueText); 45 | // div.appendChild(small); 46 | 47 | // insert.appendChild(div); 48 | // } 49 | // } 50 | 51 | window.addEventListener('keydown', showKeyCodes); 52 | -------------------------------------------------------------------------------- /09-fetch-and-async-await/02-random-user-project/random-user-generator/spinner.css: -------------------------------------------------------------------------------- 1 | .spinner { 2 | --frame: 1s; 3 | } 4 | .spinner, 5 | .spinner::before, 6 | .spinner::after { 7 | border: 5px solid white; 8 | border-top-color: transparent; 9 | border-bottom-color: transparent; 10 | border-radius: 50%; 11 | } 12 | .spinner { 13 | margin: auto; 14 | font-size: 4em; 15 | position: absolute; 16 | top: 4px; 17 | left: 140px; 18 | 19 | width: 0.5em; 20 | height: 0.5em; 21 | -webkit-animation: anim-spinner var(--frame) ease infinite; 22 | animation: anim-spinner var(--frame) ease infinite; 23 | } 24 | .spinner::before, 25 | .spinner::after { 26 | content: ''; 27 | position: absolute; 28 | } 29 | .spinner::before { 30 | inset: 1px; 31 | -webkit-animation: anim-spinner calc(var(--frame) * 4.3) ease-in infinite; 32 | animation: anim-spinner calc(var(--frame) * 4.3) ease-in infinite; 33 | } 34 | .spinner::after { 35 | inset: 7px; 36 | -webkit-animation: anim-spinner calc(var(--frame) * 1.51) ease-out infinite; 37 | animation: anim-spinner calc(var(--frame) * 1.51) ease-out infinite; 38 | } 39 | 40 | @-webkit-keyframes anim-spinner { 41 | from { 42 | transform: rotate(0deg); 43 | } 44 | to { 45 | transform: rotate(359deg); 46 | } 47 | } 48 | @keyframes anim-spinner { 49 | from { 50 | transform: rotate(0deg); 51 | } 52 | to { 53 | transform: rotate(359deg); 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /09-fetch-and-async-await/05-fetch-error-handling/random-user-generator/spinner.css: -------------------------------------------------------------------------------- 1 | .spinner { 2 | --frame: 1s; 3 | } 4 | .spinner, 5 | .spinner::before, 6 | .spinner::after { 7 | border: 5px solid white; 8 | border-top-color: transparent; 9 | border-bottom-color: transparent; 10 | border-radius: 50%; 11 | } 12 | .spinner { 13 | margin: auto; 14 | font-size: 4em; 15 | position: absolute; 16 | top: 4px; 17 | left: 140px; 18 | 19 | width: 0.5em; 20 | height: 0.5em; 21 | -webkit-animation: anim-spinner var(--frame) ease infinite; 22 | animation: anim-spinner var(--frame) ease infinite; 23 | } 24 | .spinner::before, 25 | .spinner::after { 26 | content: ''; 27 | position: absolute; 28 | } 29 | .spinner::before { 30 | inset: 1px; 31 | -webkit-animation: anim-spinner calc(var(--frame) * 4.3) ease-in infinite; 32 | animation: anim-spinner calc(var(--frame) * 4.3) ease-in infinite; 33 | } 34 | .spinner::after { 35 | inset: 7px; 36 | -webkit-animation: anim-spinner calc(var(--frame) * 1.51) ease-out infinite; 37 | animation: anim-spinner calc(var(--frame) * 1.51) ease-out infinite; 38 | } 39 | 40 | @-webkit-keyframes anim-spinner { 41 | from { 42 | transform: rotate(0deg); 43 | } 44 | to { 45 | transform: rotate(359deg); 46 | } 47 | } 48 | @keyframes anim-spinner { 49 | from { 50 | transform: rotate(0deg); 51 | } 52 | to { 53 | transform: rotate(359deg); 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /04-logic-control-flow/04-calculator-challenge/04-calculator-challenge.md: -------------------------------------------------------------------------------- 1 | # Calculator Challenge 2 | 3 | **Instructions:** 4 | 5 | Create a function called `calculator` that takes three parameters: `num1`, `num2` and `operator`. The operator can be `+`, `-`, `*` or `/`. The function should return the result of the calculation. If anything other than the four operators is passed in, the function should return an error message. 6 | 7 | **Example:** 8 | 9 | ``` 10 | calculator(5, 2, '+') // returns 7 11 | calculator(5, 2, '-') // returns 3 12 | calculator(5, 2, '*') // returns 10 13 | calculator(5, 2, '/') // returns 2.5 14 | calculator(5, 2, '&') // returns an error message 15 | ``` 16 | 17 | **Hint:** 18 | 19 | - You can use an if statement for the operator, but this is also a good example for using a switch statement. 20 | 21 |
22 | Click For Solution 23 | 24 | ```JavaScript 25 | function calculator(num1, num2, operator) { 26 | let result; 27 | switch (operator) { 28 | case '+': 29 | result = num1 + num2; 30 | break; 31 | case '-': 32 | result = num1 - num2; 33 | break; 34 | case '*': 35 | result = num1 * num2; 36 | break; 37 | case '/': 38 | result = num1 / num2; 39 | break; 40 | default: 41 | result = 'Invalid operator'; 42 | } 43 | console.log(result); 44 | return result; 45 | } 46 | 47 | calculator(3, 4, '*'); // returns 12 48 | ``` 49 | 50 |
51 | -------------------------------------------------------------------------------- /02-arrays-and-objects/02-array-methods/script.js: -------------------------------------------------------------------------------- 1 | let x; 2 | 3 | const arr = [28, 38, 44, 29, 109]; 4 | 5 | // push() - Push a value on to the end of the array 6 | arr.push(100); 7 | 8 | // pop() - Take the last value off 9 | arr.pop(); 10 | 11 | // unshift() - Add a value to the beginning of the array 12 | arr.unshift(99); 13 | 14 | // shift() - Remove first value 15 | arr.shift(); 16 | 17 | // reverse() - Reverse an array 18 | arr.reverse(); 19 | 20 | // includes() - Check to see if something is in the array 21 | x = arr.includes(445); 22 | 23 | // indexOf() - Return the index of the first match 24 | x = arr.indexOf(28); 25 | 26 | // Return array as a string 27 | x = arr.toString(); 28 | x = arr.join(); 29 | 30 | // slice() returns selected elements in an array, as a new array. Slice takes in the index of the first element and the index of the last element to be included in the new array. 31 | x = arr.slice(1, 4); 32 | 33 | // splice() works like slice() except it takes the index of the first element and the number of elements after that as a second argument. it also mutates the original array where slice() does not 34 | x = arr.splice(1, 4); 35 | 36 | // Remove a single element/value - The following will mutate the original array by taking out the element with the index of 4. x will be equal to a new array with that plucked out value. 37 | x = arr.splice(4, 1); 38 | 39 | // Chaining methods - Some methods can be chained depending on the return value. 40 | x = arr.slice(1, 4).reverse().toString().charAt(0); 41 | 42 | console.log(x); 43 | -------------------------------------------------------------------------------- /05-iteration-array-methods/11-array-method-challenges/script.js: -------------------------------------------------------------------------------- 1 | // Challenge 1 2 | const people = [ 3 | { 4 | firstName: 'John', 5 | lastName: 'Doe', 6 | email: 'john@gmail.com', 7 | phone: '111-111-1111', 8 | age: 30, 9 | }, 10 | { 11 | firstName: 'Jane', 12 | lastName: 'Poe', 13 | email: 'jane@gmail.com', 14 | phone: '222-222-2222', 15 | age: 25, 16 | }, 17 | { 18 | firstName: 'Bob', 19 | lastName: 'Foe', 20 | email: 'bob@gmail.com', 21 | phone: '333-333-3333', 22 | age: 45, 23 | }, 24 | { 25 | firstName: 'Sara', 26 | lastName: 'Soe', 27 | email: 'Sara@gmail.com', 28 | phone: '444-444-4444', 29 | age: 19, 30 | }, 31 | { 32 | firstName: 'Jose', 33 | lastName: 'Koe', 34 | email: 'jose@gmail.com', 35 | phone: '555-555-5555', 36 | age: 23, 37 | }, 38 | ]; 39 | 40 | const youngPeople = people 41 | .filter((person) => person.age <= 25) 42 | .map((person) => ({ 43 | name: person.firstName + ' ' + person.lastName, 44 | email: person.email, 45 | })); 46 | 47 | console.log(youngPeople); 48 | 49 | // Challenge 2 50 | const numbers = [2, -30, 50, 20, -12, -9, 7]; 51 | 52 | const positiveSum = numbers 53 | .filter((number) => number > 0) 54 | .reduce((acc, cur) => acc + cur, 0); 55 | 56 | console.log(positiveSum); 57 | 58 | // Challenge 3 59 | const words = ['coder', 'programmer', 'developer']; 60 | 61 | const cWords = words.map((word) => { 62 | return word[0].toUpperCase() + word.slice(1, word.length); 63 | }); 64 | 65 | console.log(cWords); 66 | -------------------------------------------------------------------------------- /06-document-object-model/12-replacing-elements/shopping-list/script.js: -------------------------------------------------------------------------------- 1 | // replaceWith() Method 2 | function replaceFirstItem() { 3 | 4 | const firstItem = document.querySelector('li:first-child'); 5 | const li = document.createElement('li'); 6 | li.textContent = 'Replaced First'; 7 | firstItem.replaceWith(li); 8 | 9 | } 10 | 11 | // OuterHTML Property 12 | function replaceSecondItem() { 13 | 14 | const secondItem = document.querySelector('li:nth-child(2)'); 15 | secondItem.outerHTML = '
  • Replaced Second
    • '; 16 | 17 | } 18 | 19 | 20 | // Replace All Items 21 | function replaceAllItems() { 22 | 23 | const lis = document.querySelectorAll('li'); 24 | lis.forEach((item, index) => { 25 | item.outerHTML = '
  • Replace All
    • '; 26 | if (index === 1) { 27 | item.innerHTML = 'Second Item'; 28 | } else { 29 | item.innerHTML = 'Replace All'; 30 | } 31 | }); 32 | 33 | lis.forEach( 34 | (item, index) => 35 | (item.outerHTML = index === 1 ? '
  • Second Item
    • ' : '
  • Item
    • ') 36 | ); 37 | 38 | } 39 | 40 | 41 | // replaceChild() Method 42 | function replaceChildHeading() { 43 | 44 | 45 | const header = document.querySelector('header'); 46 | const h1 = document.querySelector('header h1'); 47 | const h2 = document.createElement('h2'); 48 | h2.id = 'app-title'; 49 | h2.textContent = 'Shopping List'; 50 | header.replaceChild(h2, h1); 51 | 52 | 53 | } 54 | 55 | 56 | replaceFirstItem(); 57 | replaceSecondItem(); 58 | replaceAllItems(); 59 | replaceChildHeading(); 60 | -------------------------------------------------------------------------------- /06-document-object-model/02-examining-document-object-properties/shopping-list/script.js: -------------------------------------------------------------------------------- 1 | let output; 2 | 3 | // document.all is deprecated 4 | output = document.all; 5 | output = document.all[11]; 6 | output = document.all.length; 7 | 8 | // Everything in the html tags 9 | output = document.documentElement; 10 | 11 | // Head and body tags 12 | output = document.head; 13 | output = document.body; 14 | 15 | // HTMLCollection of everything in head/body 16 | output = document.head.children; 17 | output = document.body.children; 18 | 19 | // Random properties 20 | output = document.doctype; 21 | output = document.domain; 22 | output = document.URL; 23 | output = document.characterSet; 24 | output = document.contentType; 25 | 26 | // Get all forms 27 | output = document.forms; 28 | output = document.forms[0]; 29 | output = document.forms[0].id; 30 | output = document.forms[0].method; 31 | output = document.forms[0].action; 32 | 33 | // Change a form id 34 | document.forms[0].id = 'new-id'; 35 | 36 | // Get all links 37 | // output = document.links; 38 | // output = document.links[0]; 39 | // output = document.links[0].href; 40 | // output = document.links[0].href = 'https://facebook.com'; 41 | // output = document.links[0].id = 'google-link'; 42 | // output = document.links[0].className = 'google-class'; 43 | // output = document.links[0].classList; 44 | 45 | // Get all images 46 | output = document.images; 47 | output = document.images[0]; 48 | output = document.images[0].src; 49 | 50 | // Turn an HTMLCollection into an array 51 | const forms = Array.from(document.forms); 52 | forms.forEach((form) => console.log(form)); 53 | 54 | console.log(output); 55 | -------------------------------------------------------------------------------- /07-events/02-mouse-events/shopping-list/script.js: -------------------------------------------------------------------------------- 1 | const logo = document.querySelector('img'); 2 | 3 | const onClick = () => console.log('click event'); 4 | const onDoubleClick = () => { 5 | if (document.body.style.backgroundColor !== 'purple') { 6 | document.body.style.backgroundColor = 'purple'; 7 | document.body.style.color = 'white'; 8 | } else { 9 | document.body.style.backgroundColor = 'white'; 10 | document.body.style.color = 'black'; 11 | } 12 | }; 13 | 14 | 15 | const onRightClick = () => console.log('right click event'); 16 | const onMouseDown = () => console.log('mouse down event'); 17 | const onMouseUp = () => console.log('mouse up event'); 18 | const onMouseWheel = () => console.log('mouse wheel event'); 19 | const onMouseOver = () => console.log('mouse over event'); 20 | const onMouseOut = () => console.log('mouse out event'); 21 | const onDragStart = () => console.log('drag start event'); 22 | const onDrag = () => console.log('drag event'); 23 | const onDragEnd = () => console.log('drag end event'); 24 | 25 | // Event Listeners 26 | // logo.addEventListener('click', onClick); 27 | // logo.addEventListener('dblclick', onDoubleClick); 28 | logo.addEventListener('contextmenu', onRightClick); 29 | logo.addEventListener('mousedown', onMouseDown); 30 | logo.addEventListener('mouseup', onMouseUp); 31 | logo.addEventListener('wheel', onMouseWheel); 32 | logo.addEventListener('mouseover', onMouseOver); 33 | logo.addEventListener('mouseout', onMouseOut); 34 | logo.addEventListener('dragstart', onDragStart); 35 | logo.addEventListener('drag', onDrag); 36 | logo.addEventListener('dragend', onDragEnd); 37 | -------------------------------------------------------------------------------- /01-variables-data-types/09-strings/script.js: -------------------------------------------------------------------------------- 1 | let x; 2 | 3 | const name = 'John'; 4 | const age = 31; 5 | 6 | // Concatenation 7 | x = 'Hello, my name is ' + name + ' and I am ' + age + ' years old'; 8 | 9 | // Template Literals 10 | x = `Hello, my name is ${name} and I am ${age} years old`; 11 | 12 | // String Properties and Methods 13 | 14 | // Creating a "string object" (JS does this automatically when using a propery or method on a primitive string) 15 | const s = new String('Hello World'); 16 | 17 | x = typeof s; 18 | 19 | x = s.length; 20 | 21 | // Access value by key 22 | x = s[0]; 23 | 24 | // Shows the prototype of the string object. Shows the properties and methods 25 | x = s.__proto__; 26 | 27 | // Change case 28 | x = s.toUpperCase(); 29 | x = s.toLowerCase(); 30 | 31 | // charAt() - returns the character at the specified index 32 | x = s.charAt(0); 33 | 34 | // indexOf - returns the index of the first occurrence of a specified value in a string 35 | x = s.indexOf('d'); 36 | 37 | // substring() - search a string for a specified value 38 | x = s.substring(2, 5); 39 | x = s.substring(7); 40 | 41 | // slice() - extracts a part of a string and returns a new string 42 | x = s.slice(-11, -6); 43 | 44 | // trim() - remove whitespace from beginning and end of string 45 | x = ' Hello World'; 46 | x = x.trim(); 47 | 48 | // replace() - replace all instances of a string 49 | x = s.replace('World', 'John'); 50 | 51 | // includes() - returns true if the string is found 52 | x = s.includes('Hell'); 53 | 54 | // valueOf() - returns the primitive value of a variable 55 | x = s.valueOf(); 56 | 57 | // split() - returns an array of strings 58 | x = s.split(''); 59 | 60 | console.log(x); 61 | -------------------------------------------------------------------------------- /01-variables-data-types/10-capitalize-challenge/10-capitalize-challenge.md: -------------------------------------------------------------------------------- 1 | # Capitalize Challenge 2 | 3 | **Instructions**: 4 | 5 | Take the variable `myString` and capitalize the first letter of the word using some of the methods that we talked about in the last video. Put the result in a variable called `myNewString`. 6 | 7 | Create multiple solutions if you would like. 8 | 9 | **Expected Result:** 10 | 11 | ```JavaScript 12 | const myString = 'developer'; 13 | 14 | console.log(myNewString); // 'Developer' 15 | ``` 16 | 17 | **Hints:** 18 | 19 | 1. You can use the `charAt()` method as well as `string[index]` to get the character at a specific index. 20 | 2. The `.toUpperCase()` method will make the entire string uppercase 21 | 3. `substring()` or `slice()` will return a specific portion of a string 22 | 23 |
    24 | Click For Solution 25 | 26 | There are many ways to do this. Let's take a look at a few 27 | 28 | ```JavaScript 29 | // Solution 1 30 | const myNewString = myString.charAt(0).toUpperCase() + myString.substring(1); 31 | 32 | // Solution 2 (Uses string[0] instead of string.charAt(0)) 33 | const myNewString = myString[0].toUpperCase() + myString.substring(1); 34 | 35 | // Solution 3 (Uses template literal and slice()) 36 | const myNewString = `${myString[0].toUpperCase()}${myString.slice(1)}`; 37 | ``` 38 | 39 | In all of these, we get the first character of the string, then we use the **substring()** or **slice()** method to get the rest of the string. We then use the **toUpperCase()** method to capitalize the first character and then we concatenate the result with the rest of the string. 40 | 41 |
    42 | -------------------------------------------------------------------------------- /09-fetch-and-async-await/05-fetch-error-handling/script.js: -------------------------------------------------------------------------------- 1 | // Success 2 | fetch('http://httpstat.us/200') 3 | .then((response) => { 4 | return response; 5 | }) 6 | .then(() => { 7 | console.log('success'); 8 | }); 9 | 10 | // The issue here is that the 'success' shows and the .catch() does NOT run for an error status like 404 or 500 11 | fetch('http://httpstat.us/404') 12 | .then((response) => { 13 | return response; 14 | }) 15 | .then(() => { 16 | console.log('success'); 17 | }) 18 | .catch((error) => { 19 | console.log(error); 20 | }); 21 | 22 | // Catch ONLY runs on a network error 23 | fetch('http://hello123.net') 24 | .then((response) => { 25 | return response; 26 | }) 27 | .then(() => { 28 | console.log('success'); 29 | }) 30 | .catch((error) => { 31 | console.log(error); 32 | }); 33 | 34 | // Test with response.ok 35 | fetch('http://httpstat.us/404') 36 | .then((response) => { 37 | if (!response.ok) { 38 | throw new Error('Request Failed'); 39 | } 40 | return response; 41 | }) 42 | .then(() => { 43 | console.log('success'); 44 | }) 45 | .catch((error) => { 46 | console.log(error); 47 | }); 48 | 49 | // Check for specific code 50 | fetch('http://httpstat.us/200') 51 | .then((response) => { 52 | if (response.status === 404) { 53 | throw new Error('Not Found'); 54 | } else if (response.status === 500) { 55 | throw new Error('Server Error'); 56 | } else if (response.status !== 200) { 57 | throw new Error('Request Failed'); 58 | } 59 | return response; 60 | }) 61 | .then(() => { 62 | console.log('success'); 63 | }) 64 | .catch((error) => { 65 | console.log(error); 66 | }); 67 | -------------------------------------------------------------------------------- /06-document-object-model/03-dom-selectors-single-element/shopping-list/script.js: -------------------------------------------------------------------------------- 1 | // document.getElementById() 2 | 3 | console.log(document.getElementById('app-title')); 4 | 5 | // Get attributes 6 | console.log(document.getElementById('app-title').id); 7 | console.log(document.getElementById('app-title').className); 8 | console.log(document.getElementById('app-title').getAttribute('id')); 9 | 10 | // Set attributes 11 | document.getElementById('app-title').title = 'Shopping List'; 12 | document.getElementById('app-title').setAttribute('class', 'title'); 13 | const title = document.getElementById('app-title'); 14 | 15 | // Get/change content 16 | console.log(title.textContent); 17 | 18 | title.textContent = 'Hello World'; 19 | 20 | title.innerText = 'Hello Again'; 21 | 22 | title.innerHTML = 'Shopping List'; 23 | 24 | // Change styles 25 | title.style.color = 'red'; 26 | title.style.backgroundColor = 'black'; 27 | title.style.padding = '10px'; 28 | title.style.borderRadius = '10px'; 29 | 30 | 31 | 32 | // document.querySelector() 33 | // Use any CSS selector 34 | console.log(document.querySelector('h1')); 35 | console.log(document.querySelector('#app-title')); 36 | console.log(document.querySelector('.container')); 37 | 38 | console.log(document.querySelector('input[type="text"]')); 39 | 40 | console.log(document.querySelector('li:nth-child(2)').innerText); 41 | 42 | const secondItem = document.querySelector('li:nth-child(2)'); 43 | secondItem.innerText = 'Apple Juice'; 44 | secondItem.style.color = 'red'; 45 | 46 | 47 | // Use these methods on other elements 48 | const list = document.querySelector('ul'); 49 | console.log(list); 50 | const firstItem = list.querySelector('li'); 51 | firstItem.style.color = 'blue'; 52 | -------------------------------------------------------------------------------- /09-fetch-and-async-await/02-random-user-project/random-user-generator/script.js: -------------------------------------------------------------------------------- 1 | function fetchUser() { 2 | showSpinner(); 3 | fetch('https://randomuser.me/api') 4 | .then((res) => res.json()) 5 | .then((data) => { 6 | hideSpinner(); 7 | displayUser(data.results[0]); 8 | }); 9 | } 10 | 11 | function displayUser(user) { 12 | const userDisplay = document.querySelector('#user'); 13 | 14 | if (user.gender === 'female') { 15 | document.body.style.backgroundColor = 'rebeccapurple'; 16 | } else { 17 | document.body.style.backgroundColor = 'steelblue'; 18 | } 19 | 20 | userDisplay.innerHTML = ` 21 |
    22 |
    23 | 27 |
    28 |

    29 | Name: ${user.name.first} ${user.name.last} 30 |

    31 |

    32 | Email: ${user.email} 33 |

    34 |

    35 | Phone: ${user.phone} 36 |

    37 |

    38 | Location: ${user.location.city} ${user.location.country} 39 |

    40 |

    Age: ${user.dob.age}

    41 |
    42 |
    43 |
    44 | `; 45 | } 46 | 47 | function showSpinner() { 48 | document.querySelector('.spinner').style.display = 'block'; 49 | } 50 | 51 | function hideSpinner() { 52 | document.querySelector('.spinner').style.display = 'none'; 53 | } 54 | 55 | document.querySelector('#generate').addEventListener('click', fetchUser); 56 | 57 | fetchUser(); 58 | -------------------------------------------------------------------------------- /05-iteration-array-methods/08-filter/script.js: -------------------------------------------------------------------------------- 1 | const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; 2 | 3 | const evenNumbers = numbers.filter(function (number) { 4 | return number % 2 === 0; 5 | }); 6 | 7 | // Short version 8 | const evenNumbers2 = numbers.filter((number) => number % 2 === 0); 9 | 10 | // Same with forEach 11 | const evenNumbers3 = []; 12 | numbers.forEach((number) => { 13 | if (number % 2 === 0) { 14 | evenNumbers.push(number); 15 | } 16 | }); 17 | 18 | const companies = [ 19 | { name: 'Company One', category: 'Finance', start: 1981, end: 2004 }, 20 | { name: 'Company Two', category: 'Retail', start: 1992, end: 2008 }, 21 | { name: 'Company Three', category: 'Auto', start: 1999, end: 2007 }, 22 | { name: 'Company Four', category: 'Retail', start: 1989, end: 2010 }, 23 | { name: 'Company Five', category: 'Technology', start: 2009, end: 2014 }, 24 | { name: 'Company Six', category: 'Finance', start: 1987, end: 2010 }, 25 | { name: 'Company Seven', category: 'Auto', start: 1986, end: 1996 }, 26 | { name: 'Company Eight', category: 'Technology', start: 2011, end: 2016 }, 27 | { name: 'Company Nine', category: 'Retail', start: 1981, end: 1989 }, 28 | ]; 29 | 30 | // Get only retail companies 31 | const retailCompanies = companies.filter( 32 | (company) => company.category === 'Retail' 33 | ); 34 | // console.log(retailCompanies); 35 | 36 | // Get companies that started in or after 1980 and ended in or before 2005 37 | const earlyCompanies = companies.filter( 38 | (company) => company.start >= 1980 && company.end <= 2005 39 | ); 40 | // console.log(earlyCompanies); 41 | 42 | // Get companies that lasted 10 years or more 43 | const longCompanies = companies.filter( 44 | (company) => company.end - company.start >= 10 45 | ); 46 | 47 | console.log(longCompanies); 48 | -------------------------------------------------------------------------------- /06-document-object-model/11-custom-insertafter-challenge/11-custom-insertafter.md: -------------------------------------------------------------------------------- 1 | # Custom insertAfter() Challenge 2 | 3 | **Instructions** 4 | 5 | You may think that since there is an `insertBefore()` method, there is also an `insertAfter()`, but there isn't. In this challenge, I want you to create a custom `insertAfter()` function. If you don't want to do it as a challenge, that's fine, just follow along. 6 | 7 | - The first param will be `newEl` which will be a new element that you create with `document.createElement()` 8 | - The second param will be `existingEl` which is an element in the DOM that you want to insert your new element after 9 | 10 | The function will be called like this: 11 | 12 | ```JavaScript 13 | // New element to insert 14 | const li = document.createElement('li'); 15 | li.textContent = 'Insert Me After!'; 16 | 17 | // Existing element to insert after 18 | const firstItem = document.querySelector('li:first-child'); 19 | 20 | // Our custom function 21 | insertAfter(li, firstItem); 22 | ``` 23 | 24 | **Hint:** 25 | 26 | Remember the properties to get parent and sibling elements. Use some of those combined with `insertBefore()`. 27 | 28 |
    29 | Click For Solution 30 | 31 | ```JavaScript 32 | function insertAfter(newEl, existingEl) { 33 | existingEl.parentElement.insertBefore(newEl, existingEl.nextSibling); 34 | } 35 | ``` 36 | 37 | The solution is actually really simple. 38 | 39 | - We take the `existingEl` and get the parent with either the `parentElement` or `parentNode` property. 40 | - We call `insertBefore()` on the parent and then pass in `newEl` and the element AFTER `existingEl`. We can get that with the `nextSibling` property 41 | 42 | Putting our new element before the existing element's next sibling is the same as putting it after the existing element 43 | 44 |
    45 | -------------------------------------------------------------------------------- /02-arrays-and-objects/04-array-challenge/04-array-challenges.md: -------------------------------------------------------------------------------- 1 | # Array Challenges 2 | 3 | ### Challenge 1: 4 | 5 | **Instructions:** 6 | 7 | Use some of the array methods that we looked at to mutate the following array to = the expected result below: 8 | 9 | ```js 10 | const arr = [1, 2, 3, 4, 5]; 11 | ``` 12 | 13 | **Expected Result:** 14 | 15 | ```js 16 | console.log(arr); 17 | // [6, 5, 4, 3, 2, 1, 0]; 18 | ``` 19 | 20 | **Hint**: No hints. This one is pretty easy ;) 21 | 22 |
    23 | Click For Solution 24 | 25 | ```js 26 | const arr = [1, 2, 3, 4, 5]; 27 | 28 | arr.unshift(0); 29 | arr.push(6); 30 | arr.reverse(); 31 | 32 | console.log(arr); // [6, 5, 4, 3, 2, 1, 0]; 33 | 34 | ```` 35 | 36 |
    37 | 38 | 39 | ### Challenge 2: 40 | 41 | **Instructions:** 42 | 43 | Combine `arr1` and `arr2` into a new array called `arr3` with the following elements: 44 | 45 | ```js 46 | const arr1 = [1, 2, 3, 4, 5]; 47 | const arr2 = [5, 6, 7, 8, 9, 10]; 48 | ```` 49 | 50 | Notice that both `arr1` and `arr2` include the number 5. You will have to find a way to get rid of the extra 5. 51 | 52 | **Expected Result:** 53 | 54 | ```js 55 | console.log(arr3); 56 | // [1,2,3,4,5,6,7,8,9,10] 57 | ``` 58 | 59 | **Hint**: There are many ways to do this, but think of the concat() method or the spread operator as well as the slice() or splice() methods 60 | 61 |
    62 | Click For Solution 63 | 64 | ```js 65 | const arr1 = [1, 2, 3, 4, 5]; 66 | const arr2 = [5, 6, 7, 8, 9, 10]; 67 | 68 | // Solution 1 69 | const arr3 = arr1.slice(0, 4).concat(arr2); 70 | 71 | console.log(arr3); // [1,2,3,4,5,6,7,8,9,10] 72 | 73 | // Solution 2 74 | const arr4 = [...arr1, ...arr2]; 75 | arr4.splice(4, 1); 76 | 77 | console.log(arr4); // [1,2,3,4,5,6,7,8,9,10] 78 | 79 | ``` 80 | 81 |
    82 | 83 | ``` 84 | -------------------------------------------------------------------------------- /07-events/03-event-object/shopping-list/script.js: -------------------------------------------------------------------------------- 1 | const logo = document.querySelector('img'); 2 | 3 | function onClick(e) { 4 | // Event properties 5 | // console.log(e.target); 6 | // console.log(e.currentTarget); 7 | // console.log(e.type); 8 | // console.log(e.timeStamp); 9 | // console.log(e.clientX); 10 | // console.log(e.clientY); 11 | // console.log(e.offsetX); 12 | // console.log(e.offsetY); 13 | // console.log(e.pageX); 14 | // console.log(e.pageY); 15 | // console.log(e.screenX); 16 | // console.log(e.screenY); 17 | } 18 | 19 | function onDrag(e) { 20 | document.querySelector('h1').textContent = `X ${e.clientX} Y ${e.clientY}`; 21 | } 22 | 23 | logo.addEventListener('click', onClick); 24 | logo.addEventListener('drag', onDrag); 25 | 26 | 27 | // document.body.addEventListener('click', function (e) { 28 | // console.log(e.target); 29 | // console.log(e.currentTarget); 30 | // }); 31 | 32 | // e.preventDefault() method prevents the default behavior 33 | document.querySelector('a').addEventListener('click', function (e) { 34 | e.preventDefault(); 35 | console.log('Link was clicked'); 36 | }); 37 | 38 | /* 39 | - `target` - The element that triggered the event 40 | - `currentTarget` - The element that the event listener is attached to (These are the same in this case 41 | - `type` - The type of event that was triggered 42 | - `timeStamp` - The time that the event was triggered 43 | - `clientX` - The x position of the mouse click relative to the window 44 | - `clientY` - The y position of the mouse click relative to the window 45 | - `offsetX` - The x position of the mouse click relative to the element 46 | - `offsetY` - The y position of the mouse click relative to the element 47 | - `pageX` - The x position of the mouse click relative to the page 48 | - `pageY` - The y position of the mouse click relative to the page 49 | - `screenX` - The x position of the mouse click relative to the screen 50 | - `screenY` - The y position of the mouse click relative to the screen 51 | */ 52 | -------------------------------------------------------------------------------- /02-arrays-and-objects/09-object-challenge/09-object-challenge.md: -------------------------------------------------------------------------------- 1 | # Object Challenge 2 | 3 | ### Step 1 4 | 5 | Create an array of objects called `library`. Add 3 objects with a property of `title`, `author`, `status`. Title and author should be strings (whatever value you want) and status should be another object with the properties of `own`, `reading` and `read`. Which should all be boolean values. For all status, set `own` to `true` and `reading` and `read` to false. 6 | 7 | ### Step 2 8 | 9 | You finished reading all of the books. Set the `read` value for all of them to true. Do not edit the initial object. Set the values using dot notation. 10 | 11 | ### Step 3 12 | 13 | Destructure the title from the first book and rename the variable to `firstBook` 14 | 15 | ### Step 4 16 | 17 | Turn the library object into a JSON string 18 | 19 |
    20 | Click For Solution 21 | 22 | ### Step 1 Solution 23 | 24 | ```js 25 | const library = [ 26 | { 27 | title: 'The Road Ahead', 28 | author: 'Bill Gates', 29 | status: { 30 | own: true, 31 | reading: true, 32 | read: false, 33 | }, 34 | }, 35 | { 36 | title: 'Steve Jobs', 37 | author: 'Walter Isaacson', 38 | status: { 39 | own: true, 40 | reading: false, 41 | read: false, 42 | }, 43 | }, 44 | { 45 | title: 'Mockingjay: The Final Book of The Hunger Games', 46 | author: 'Suzanne Collins', 47 | status: { 48 | own: true, 49 | reading: false, 50 | read: true, 51 | }, 52 | }, 53 | ]; 54 | ``` 55 | 56 | ### Step 2 Solution 57 | 58 | ```js 59 | library[0].status.read = true; 60 | library[1].status.read = true; 61 | library[3].status.read = true; 62 | ``` 63 | 64 | ### Step 4 Solution 65 | 66 | ```js 67 | const { title: firstBook } = library[0]; 68 | console.log(firstBook); 69 | ``` 70 | 71 | ### Step 4 Solution 72 | 73 | ```js 74 | const libraryJSON = JSON.stringify(library); 75 | console.log(libraryJSON); 76 | ``` 77 | 78 |
    79 | -------------------------------------------------------------------------------- /math.js: -------------------------------------------------------------------------------- 1 | let x; 2 | 3 | // Square root 4 | x = Math.sqrt(9); 5 | // x = Math.abs(-5); 6 | x = Math.min(51,2,3,4); 7 | x = Math.max(51,2,3,4); 8 | x = Math.ceil(3.7); 9 | x = Math.floor(51.89); 10 | x = Math.random(); 11 | x = Math.floor(Math.random()*100+1); 12 | 13 | let y = Math.floor(Math.random()*50+1); 14 | 15 | x = Math.pow(2,5); 16 | // let ans=x+y; 17 | // let outsum = `${x} + ${y} == ${ans}` 18 | 19 | 20 | // console.log(outsum); 21 | 22 | // console.log(x,typeof x); 23 | 24 | let d; 25 | 26 | // Get today's date and time 27 | d = new Date(); 28 | // let year=d.getFullYear(); 29 | // console.log(year,typeof year); 30 | // d = d.toString(); 31 | // d = new Date(2024, 0, 10, 12, 30, 0); 32 | // // Pass in a string 33 | // d = new Date('2021-07-10T12:30:00'); 34 | // d = new Date('07/10/2021 12:30:00'); 35 | // d = new Date('2022-07-10'); 36 | // d = new Date('07-10-2022'); 37 | // d=d.toString(); 38 | // Get current timestamp 39 | // d = Date.now(); 40 | // d=d/1000; 41 | // d = Math.floor(Date.now() / 1000); 42 | x = d.toString(); 43 | x = d.getTime(); 44 | x = d.valueOf(); 45 | x = d.getMonth(); 46 | x = d.getMonth() + 1; 47 | x = d.getDate(); 48 | x = d.getDay(); 49 | x = d.getHours(); 50 | x = d.getMinutes(); 51 | x = d.getSeconds(); 52 | x = d.getMilliseconds(); 53 | x = `${d.getDate()} - ${d.getMonth()+1} - ${d.getFullYear()}` 54 | x = Intl.DateTimeFormat('en-US').format(d); 55 | x = Intl.DateTimeFormat('en-IN').format(d); 56 | x = Intl.DateTimeFormat('en-GB').format(d); 57 | x = Intl.DateTimeFormat('default').format(d); 58 | x = Intl.DateTimeFormat('default', { month: 'long' }).format(d); 59 | x = d.toLocaleString('default', { month: 'long' }); 60 | x = d.toLocaleDateString('default') 61 | x = d.toLocaleTimeString('default') 62 | x = d.toLocaleString('default'); 63 | 64 | x = d.toLocaleString('default', { 65 | weekday: 'long', 66 | year: 'numeric', 67 | month: 'long', 68 | day: 'numeric', 69 | hour: 'numeric', 70 | minute: 'numeric', 71 | second: 'numeric', 72 | timeZone: 'Asia/kolkata', 73 | }); 74 | 75 | 76 | 77 | 78 | console.log(x,typeof x); 79 | -------------------------------------------------------------------------------- /04-logic-control-flow/05-truthy-falsy/script.js: -------------------------------------------------------------------------------- 1 | // Falsy Values: 2 | // - false 3 | // - 0 4 | // - "" or '' (Empty string) 5 | // - null 6 | // - undefined 7 | // - NaN 8 | 9 | // Truthy Values: 10 | // - Everything else that is not falsy 11 | // - true 12 | // - '0' (0 in a string) 13 | // - ' ' (space in a string) 14 | // - 'false' (false in a string) 15 | // - [] (empty array) 16 | // - {} (empty object) 17 | // - function () {} (empty function) 18 | 19 | const x = function () {}; 20 | 21 | if (x) { 22 | console.log('This is truthy'); 23 | } else { 24 | console.log('This is falsy'); 25 | } 26 | 27 | console.log(Boolean(x)); 28 | 29 | // Truthy and falsy caveats 30 | const children = 3; 31 | 32 | // Checking for literal 0 33 | if (children) { 34 | console.log(`You have ${children} children`); 35 | } else { 36 | console.log('Please enter number of children'); 37 | } 38 | 39 | // Solution 40 | 41 | if (!isNaN(children)) { 42 | console.log(`You have ${children} children`); 43 | } else { 44 | console.log('Please enter number of children'); 45 | } 46 | 47 | // Checking for empty arrays 48 | const posts = ['Post One']; 49 | 50 | // Always true even when empty 51 | 52 | if (posts) { 53 | console.log('List Posts'); 54 | } else { 55 | console.log('No Posts To List'); 56 | } 57 | 58 | // Solution 59 | if (posts.length > 0) { 60 | console.log('List Posts'); 61 | } else { 62 | console.log('No Posts To List'); 63 | } 64 | 65 | // Checking for empty objects 66 | const user = { 67 | name: 'Brad', 68 | }; 69 | 70 | // Always true, even when no properties 71 | if (user) { 72 | console.log('List User'); 73 | } else { 74 | console.log('No User'); 75 | } 76 | 77 | // Solution 78 | if (Object.keys(user).length > 0) { 79 | console.log('List User'); 80 | } else { 81 | console.log('No User'); 82 | } 83 | 84 | // Loose Equality (==) 85 | console.log(false == 0); // true 86 | console.log('' == 0); // true 87 | console.log(null == undefined); // true 88 | 89 | // Strict Equality 90 | console.log(false === 0); // false 91 | console.log('' === 0); // false 92 | console.log(null === undefined); // false 93 | -------------------------------------------------------------------------------- /09-fetch-and-async-await/05-fetch-error-handling/random-user-generator/script.js: -------------------------------------------------------------------------------- 1 | function fetchUser() { 2 | showSpinner(); 3 | fetch('https://randomuser.me/api') 4 | .then((res) => { 5 | if (!res.ok) { 6 | throw new Error('Request Failed'); 7 | } 8 | 9 | return res.json(); 10 | }) 11 | .then((data) => { 12 | hideSpinner(); 13 | displayUser(data.results[0]); 14 | }) 15 | .catch((error) => { 16 | hideSpinner(); 17 | document.querySelector('#user').innerHTML = ` 18 |

    19 | ${error}

    `; 20 | }); 21 | } 22 | 23 | function displayUser(user) { 24 | const userDisplay = document.querySelector('#user'); 25 | 26 | if (user.gender === 'female') { 27 | document.body.style.backgroundColor = 'rebeccapurple'; 28 | } else { 29 | document.body.style.backgroundColor = 'steelblue'; 30 | } 31 | 32 | userDisplay.innerHTML = ` 33 |
    34 |
    35 | 39 |
    40 |

    41 | Name: ${user.name.first} ${user.name.last} 42 |

    43 |

    44 | Email: ${user.email} 45 |

    46 |

    47 | Phone: ${user.phone} 48 |

    49 |

    50 | Location: ${user.location.city} ${user.location.country} 51 |

    52 |

    Age: ${user.dob.age}

    53 |
    54 |
    55 |
    56 | `; 57 | } 58 | 59 | function showSpinner() { 60 | document.querySelector('.spinner').style.display = 'block'; 61 | } 62 | 63 | function hideSpinner() { 64 | document.querySelector('.spinner').style.display = 'none'; 65 | } 66 | 67 | document.querySelector('#generate').addEventListener('click', fetchUser); 68 | 69 | fetchUser(); 70 | -------------------------------------------------------------------------------- /01-variables-data-types/13-number-challenge/13-number-challenge.md: -------------------------------------------------------------------------------- 1 | # Number Challenge 2 | 3 | **Instructions:** 4 | 5 | Create a variable called `x` that is a random number between 1 and 100 along with a variable called `y` that is a random number between 1 and 50. 6 | 7 | Create a variable for the sum, difference, product, quotient and remainder of `x` and `y`. Log the output in a string that shows the two numbers of `x` and `y` along with the operator and result. 8 | 9 | - You can log the output string directly or put them in separate variables and log them like below. 10 | - You can use string concatenation or template literals for the output. 11 | 12 | **Expected Result:** 13 | 14 | ```JavaScript 15 | console.log(sumOutput); // 31 + 15 = 46 16 | console.log(differenceOutput); // 31 - 15 = 16 17 | console.log(productOutput); // 31 * 15 = 465 18 | console.log(quotientOutput); // 31 / 15 = 2.066666666666667 19 | console.log(rmOutput); // 31 % 15 = 1 20 | ``` 21 | 22 | **Hints:** 23 | 24 | 1. The `Math.random()` function returns a floating-point, pseudo-random number in the range 0 to less than 1 25 | 26 | 2. The `Math.floor()` function will round a number down to the nearest integer 27 | 28 |
    29 | Click For Solution 30 | 31 | ```JavaScript 32 | x = Math.floor(Math.random() * 100) + 1; 33 | y = Math.floor(Math.random() * 50) + 1; 34 | 35 | // Get the sum 36 | const sum = x + y; 37 | const sumOutput = `${x} + ${y} = ${sum}`; 38 | console.log(sumOutput); 39 | 40 | // Get the difference 41 | const difference = x - y; 42 | const differenceOutput = `${x} - ${y} = ${difference}`; 43 | console.log(differenceOutput); 44 | 45 | // Get the product 46 | const product = x _ y; 47 | const productOutput = `${x} _ ${y} = ${product}`; 48 | console.log(productOutput); 49 | 50 | // Get the quotient 51 | const quotient = x / y; 52 | const quotientOutput = `${x} / ${y} = ${quotient}`; 53 | console.log(quotientOutput); 54 | 55 | // Get the remainder 56 | const rm = x % y; 57 | const rmOutput = `${x} % ${y} = ${rm}`; 58 | console.log(rmOutput); 59 | 60 | ``` 61 | 62 |
    63 | 64 | 65 | ``` 66 | -------------------------------------------------------------------------------- /05-iteration-array-methods/04-fizzbuzz-challenge/04-fizzbuzz-challenge.md: -------------------------------------------------------------------------------- 1 | # FizzBuzz Challenge 2 | 3 | **Instructions:** 4 | 5 | - Print/log the numbers from 1 to 100 6 | - For **multiples of three** print "Fizz" instead of the number 7 | - For **multiples of five** print "Buzz" 8 | - For numbers which are **multiples of both three and five** print "FizzBuzz". 9 | 10 | **Hints:** 11 | 12 | If you have taken the course up to this point, then you know how to write a loop and output/log something for each iteration. You also know how to check for a condition with "if/else/else if". You also know how to get a remainder of a number using the modulus operator (%). This is all you need to know to complete this challenge. Good luck! 13 | 14 |
    15 | Click For Solution 16 | 17 | ### Solution 1: `For` Loop 18 | 19 | ```JavaScript 20 | for (let i = 1; i <= 100; i++) { 21 | if (i % 15 == 0) { 22 | console.log("FizzBuzz"); 23 | } else if (i % 3 == 0) { 24 | console.log("Fizz"); 25 | } else if (i % 5 == 0) { 26 | console.log("Buzz"); 27 | } else { 28 | console.log(i); 29 | } 30 | } 31 | ``` 32 | 33 | In the above code, we set out initialize expression to `1`. We set the condition to `i <= 100`. We set out increment expression to `i++`. 34 | 35 | We first checked if `i` was divisible by **15**. Because this means `i` is divisible by both **3** and **5**. Since that is the case, we printed `"FizzBuzz"`. Then we checked to see if `i` was divisible by **3**. If so, we printed `"Fizz"`. Then we checked to see if `i` was divisible by **5**. If so, we printed `"Buzz"`. If `i` was not divisible by either **3** or **5**, we printed `i` (The current number). 36 | 37 | ### Solution 2: `While` Loop 38 | 39 | ```JavaScript 40 | let i = 1; 41 | 42 | while(i <= 100) { 43 | if (i % 15 == 0) { 44 | console.log("FizzBuzz"); 45 | } else if (i % 3 == 0) { 46 | console.log("Fizz"); 47 | } else if (i % 5 == 0) { 48 | console.log("Buzz"); 49 | } else { 50 | console.log(i); 51 | } 52 | 53 | i++; 54 | } 55 | ``` 56 | 57 | We did the same thing here, just with a `while` loop 58 | 59 |
    60 | -------------------------------------------------------------------------------- /05-iteration-array-methods/09-map/script.js: -------------------------------------------------------------------------------- 1 | const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 2 | 3 | const doubledNumbers = numbers.map((number) => number * 2); 4 | console.log(doubledNumbers); 5 | 6 | // Same with forEach 7 | const doubledNumbers2 = []; 8 | numbers.forEach((number) => { 9 | doubledNumbers2.push(number * 2); 10 | }); 11 | 12 | const companies = [ 13 | { name: 'Company One', category: 'Finance', start: 1981, end: 2004 }, 14 | { name: 'Company Two', category: 'Retail', start: 1992, end: 2008 }, 15 | { name: 'Company Three', category: 'Auto', start: 1999, end: 2007 }, 16 | { name: 'Company Four', category: 'Retail', start: 1989, end: 2010 }, 17 | { name: 'Company Five', category: 'Technology', start: 2009, end: 2014 }, 18 | { name: 'Company Six', category: 'Finance', start: 1987, end: 2010 }, 19 | { name: 'Company Seven', category: 'Auto', start: 1986, end: 1996 }, 20 | { name: 'Company Eight', category: 'Technology', start: 2011, end: 2016 }, 21 | { name: 'Company Nine', category: 'Retail', start: 1981, end: 1989 }, 22 | ]; 23 | 24 | // Create an array of company names 25 | const companyNames = companies.map((company) => company.name); 26 | // console.log(companyNames); 27 | 28 | // Create an array with just company and category 29 | const companyInfo = companies.map((company) => { 30 | return { 31 | name: company.name, 32 | category: company.category, 33 | }; 34 | }); 35 | 36 | // Create an array of objects with the name and the length of each company in years 37 | const companyYears = companies.map((company) => { 38 | return { 39 | name: company.name, 40 | length: company.end - company.start + ' years', 41 | }; 42 | }); 43 | 44 | console.log(companyYears); 45 | 46 | // Chain map methods 47 | const squareAndDouble = numbers 48 | .map((number) => Math.sqrt(number)) 49 | .map((sqrt) => sqrt * 2); 50 | 51 | const squareAndDouble2 = numbers 52 | .map(function (number) { 53 | return Math.sqrt(number); 54 | }) 55 | .map(function (sqrt) { 56 | return sqrt * 2; 57 | }) 58 | .map(function (sqrtDoubled) { 59 | return sqrtDoubled * 3; 60 | }); 61 | 62 | // Chaining different methods 63 | const evenDouble = numbers 64 | .filter((number) => number % 2 === 0) 65 | .map((number) => number * 2); 66 | 67 | console.log(evenDouble); 68 | -------------------------------------------------------------------------------- /09-fetch-and-async-await/04-typicode-todos-mini-project/typicode-todos/script.js: -------------------------------------------------------------------------------- 1 | const apiUrl = 'https://jsonplaceholder.typicode.com/todos'; 2 | 3 | const getTodos = () => { 4 | fetch(apiUrl + '?_limit=10') 5 | .then((res) => res.json()) 6 | .then((data) => { 7 | data.forEach((todo) => addTodoToDOM(todo)); 8 | }); 9 | }; 10 | 11 | const addTodoToDOM = (todo) => { 12 | const div = document.createElement('div'); 13 | div.classList.add('todo'); 14 | div.appendChild(document.createTextNode(todo.title)); 15 | div.setAttribute('data-id', todo.id); 16 | 17 | if (todo.completed) { 18 | div.classList.add('done'); 19 | } 20 | 21 | document.getElementById('todo-list').appendChild(div); 22 | }; 23 | 24 | const createTodo = (e) => { 25 | e.preventDefault(); 26 | 27 | const newTodo = { 28 | title: e.target.firstElementChild.value, 29 | completed: false, 30 | }; 31 | 32 | fetch(apiUrl, { 33 | method: 'POST', 34 | body: JSON.stringify(newTodo), 35 | headers: { 36 | 'Content-Type': 'application/json', 37 | }, 38 | }) 39 | .then((res) => res.json()) 40 | .then((data) => addTodoToDOM(data)); 41 | }; 42 | 43 | const toggleCompleted = (e) => { 44 | if (e.target.classList.contains('todo')) { 45 | e.target.classList.toggle('done'); 46 | 47 | updateTodo(e.target.dataset.id, e.target.classList.contains('done')); 48 | } 49 | }; 50 | 51 | const updateTodo = (id, completed) => { 52 | fetch(`${apiUrl}/${id}`, { 53 | method: 'PUT', 54 | body: JSON.stringify({ completed }), 55 | headers: { 56 | 'Content-Type': 'application/json', 57 | }, 58 | }); 59 | }; 60 | 61 | const deleteTodo = (e) => { 62 | if (e.target.classList.contains('todo')) { 63 | const id = e.target.dataset.id; 64 | fetch(`${apiUrl}/${id}`, { 65 | method: 'DELETE', 66 | }) 67 | .then((res) => res.json()) 68 | .then(() => e.target.remove()); 69 | } 70 | }; 71 | 72 | const init = () => { 73 | document.addEventListener('DOMContentLoaded', getTodos); 74 | document.querySelector('#todo-form').addEventListener('submit', createTodo); 75 | document 76 | .querySelector('#todo-list') 77 | .addEventListener('click', toggleCompleted); 78 | document.querySelector('#todo-list').addEventListener('dblclick', deleteTodo); 79 | }; 80 | 81 | init(); 82 | -------------------------------------------------------------------------------- /06-document-object-model/07-create-elements/shopping-list/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 11 | 12 | Shopping List 13 | 14 | 15 | 16 |
    17 |
    18 | 19 |

    Shopping List

    20 |
    21 |
    22 |
    23 | 24 |
    25 |
    26 | 29 |
    30 |
    31 | 32 |
    33 | 34 |
    35 | 36 | 62 | 63 | 64 |
    65 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /06-document-object-model/10-insert-elements/shopping-list/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 11 | 12 | Shopping List 13 | 14 | 15 | 16 |
    17 |
    18 | 19 |

    Shopping List

    20 |
    21 |
    22 |
    23 | 24 |
    25 |
    26 | 29 |
    30 |
    31 | 32 |
    33 | 34 |
    35 | 36 | 62 | 63 | 64 |
    65 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /06-document-object-model/02-examining-document-object-properties/shopping-list/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 11 | 12 | Shopping List 13 | 14 | 15 | 16 |
    17 |
    18 | 19 |

    Shopping List

    20 |
    21 | 22 |
    23 |
    24 | 25 |
    26 |
    27 | 30 |
    31 |
    32 | 33 |
    34 | 35 |
    36 | 37 | 65 | 66 | 67 |
    68 | 69 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /09-fetch-and-async-await/09-multiple-promises-async-await/script.js: -------------------------------------------------------------------------------- 1 | function getData(endpoint) { 2 | return new Promise((resolve, reject) => { 3 | const xhr = new XMLHttpRequest(); 4 | xhr.open('GET', endpoint); 5 | 6 | xhr.onreadystatechange = function () { 7 | if (this.readyState === 4) { 8 | if (this.status === 200) { 9 | resolve(JSON.parse(this.responseText)); 10 | } else { 11 | reject('Error: Something went wrong'); 12 | } 13 | } 14 | }; 15 | 16 | setTimeout(() => { 17 | xhr.send(); 18 | }, Math.floor(Math.random() * 3000) + 1000); 19 | }); 20 | } 21 | 22 | // getData('./movies.json') 23 | // .then((movies) => { 24 | // console.log(movies); 25 | // return getData('./actors.json'); 26 | // }) 27 | // .then((actors) => { 28 | // console.log(actors); 29 | // return getData('./directors.json'); 30 | // }) 31 | // .then((directors) => { 32 | // console.log(directors); 33 | // }) 34 | // .catch((error) => console.log(error)); 35 | 36 | async function getAllData() { 37 | const movies = await getData('./movies.json'); 38 | const actors = await getData('./actors.json'); 39 | const directors = await getData('./directors.json'); 40 | console.log(movies, actors, directors); 41 | } 42 | 43 | async function getAllDataWithFetch() { 44 | const moviesRes = await fetch('./movies.json'); 45 | const movies = await moviesRes.json(); 46 | 47 | const actorsRes = await fetch('./actors.json'); 48 | const actors = await actorsRes.json(); 49 | 50 | const directorsRes = await fetch('./directors.json'); 51 | const directors = await directorsRes.json(); 52 | 53 | console.log(movies, actors, directors); 54 | } 55 | 56 | async function getAllDataPromiseAll() { 57 | const [moviesRes, actorsRes, directorsRes] = await Promise.all([ 58 | fetch('./movies.json'), 59 | fetch('./actors.json'), 60 | fetch('./directors.json'), 61 | ]); 62 | 63 | const movies = await moviesRes.json(); 64 | const actors = await actorsRes.json(); 65 | const directors = await directorsRes.json(); 66 | 67 | console.log(movies, actors, directors); 68 | } 69 | 70 | async function getAllDataPromiseAll2() { 71 | const [movies, actors, directors] = await Promise.all([ 72 | fetch('./movies.json').then((res) => res.json()), 73 | fetch('./actors.json').then((res) => res.json()), 74 | fetch('./directors.json').then((res) => res.json()), 75 | ]); 76 | 77 | console.log(movies, actors, directors); 78 | } 79 | 80 | // getAllData(); 81 | // getAllDataWithFetch(); 82 | // getAllDataPromiseAll(); 83 | getAllDataPromiseAll2(); 84 | -------------------------------------------------------------------------------- /07-events/01-event-listeners/shopping-list/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Shopping List 16 | 17 | 18 |
    19 |
    20 | 21 |

    Shopping List

    22 |
    23 |
    24 |
    25 | 32 |
    33 |
    34 | 37 |
    38 |
    39 | 40 |
    41 | 47 |
    48 | 49 | 75 | 76 | 77 |
    78 | 79 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /07-events/09-event-delegation/shopping-list/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Shopping List 16 | 17 | 18 |
    19 |
    20 | 21 |

    Shopping List

    22 |
    23 |
    24 |
    25 | 32 |
    33 |
    34 | 37 |
    38 |
    39 | 40 |
    41 | 47 |
    48 | 49 | 75 | 76 | 77 |
    78 | 79 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /array.js: -------------------------------------------------------------------------------- 1 | let x; 2 | 3 | // Array Literal 4 | const numbers = [12, 45, 33, 29, 39, 102]; 5 | const mixed = [12, 'Hello', true, null]; 6 | // Array Constructor 7 | // const fruits = new Array('apple', 'grape', 'orange'); 8 | // Get value by index 9 | // x = numbers[0]; 10 | // numbers[2]=777; 11 | // x = numbers[0] + numbers[3]; 12 | 13 | // x = `My favorite fruit is an ${fruits[2]}`; 14 | // x = numbers.length; 15 | // fruits.length = 2; 16 | // fruits[2] = 'pear'; 17 | 18 | // fruits[3] = 'strawberry'; 19 | 20 | // Using the length as the index will always add on the the end 21 | // fruits[fruits.length] = 'blueberry'; 22 | // fruits[fruits.length] = 'peach'; 23 | // x=fruits 24 | 25 | 26 | // const arr = [28, 38, 44, 29, 109]; 27 | // arr.push(88); 28 | // arr.unshift(99); 29 | // arr.pop(); 30 | // arr.shift(); 31 | // x=arr.indexOf(38); 32 | // x=arr.includes(44); 33 | // x=arr.reverse(); 34 | 35 | // x = arr.toString(); 36 | // x = arr.join("/"); 37 | 38 | // slice() returns selected elements in an array, as a new array. Slice takes in the index of the first element and the index of the last element to be not included in the new array. 39 | // x = arr.slice(1, 4); 40 | 41 | // splice() works like slice() except it takes the index of the first element and the number of elements after that as a second argument. it also mutates the original array where slice() does not 42 | 43 | 44 | // Remove a single element/value - The following will mutate the original array by taking out the element with the index of 4. x will be equal to a new array with that plucked out value. 45 | // x = arr.splice(1, 4); 46 | // const arr = [28, 38, 44, 29, 109]; 47 | //29,44,38 48 | // Chaining methods - Some methods can be chained depending on the return value. 49 | // x = arr.slice(1, 4).reverse().toString().charAt(2); 50 | const fruits = ['apple', 'pear', 'orange']; 51 | const berries = ['strawberry', 'blueberry', 'rasberry']; 52 | 53 | // Nesting arrays 54 | // fruits.push(berries); 55 | // Create a new variable and nest both arrays 56 | // const allFruits = [fruits, berries]; 57 | // concat() - Concatenate arrays 58 | // x = fruits.concat(berries); 59 | // spread operator (...) - Concatenate with 60 | // x = [...fruits,...berries]; 61 | // flat() - Flatten an array 62 | 63 | // const arr = [1, 2, [3, 4, 5,[44,555]], 6, [7, 8]]; 64 | // x = arr.flat(Infinity); 65 | // isArray() - Check is is an array 66 | 67 | x = Array.isArray(fruits); 68 | // from() - Create an array from an array like value 69 | x = Array.from('123455'); 70 | // of() - Create an array from a set of values 71 | const a = 1; 72 | const b = 2; 73 | const c = 3; 74 | 75 | x = Array.of(a, b, c); 76 | 77 | console.log(x,typeof x); 78 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /06-document-object-model/13-remove-elements/shopping-list/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | Shopping List 16 | 17 | 18 |
    19 |
    20 | 21 |

    Shopping List

    22 |
    23 |
    24 |
    25 | 32 |
    33 |
    34 | 37 |
    38 |
    39 | 40 |
    41 | 47 |
    48 | 49 | 75 | 76 | 77 |
    78 | 79 | 80 | 81 | 82 | --------------------------------------------------------------------------------