├── ep-01_history-of-javascript └── history-of-js.pdf ├── ep-02_hello-world └── final-code │ ├── app.js │ ├── index.html │ └── script.js ├── ep-03_data-types ├── index.html └── script.js ├── ep-04_javascript-variables ├── blackboard │ ├── visualizing-variable-creation.png │ └── visualizing-variable-creation.svg ├── final-code │ ├── index.html │ └── scirpt.js └── starter-code │ ├── index.html │ └── scirpt.js ├── ep-05_code-execution-in-javascript ├── blackboard │ ├── code-execution-in-javascript.png │ └── code-execution-in-javascript.svg ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── scirpt.js ├── ep-06_alert-prompt-confirm ├── final-code │ ├── index.html │ └── scirpt.js └── starter-code │ ├── index.html │ └── scirpt.js ├── ep-07_string-methods-and-properties ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-08_maths-in-javascript ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-09_truthy-and-falsy-values ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-10_comparison-operators ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-11_logical-operators ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-12_decision-making-in-javascript ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-13_optimize-descision-making-using-else ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-15-switch-case ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-16-ternary-operator ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-17_see-variables-address-in-memory-devtools ├── blackboard │ ├── visualize-variable-address.png │ └── visualize-variable-address.svg ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-18_reference-types-in-javascript ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-19_freeze-object-seal-object ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-20-arrays ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-21-basic-array-methods ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-22-multidimensional-arrays ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-23_right-way-to-copy-objects ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-24-compound-operators ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-25-while-loop ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-26-for-loop ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-27-do-while-loop ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-28_introduction-to-functions ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-29_functions-with-return-value ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-30-execution-context-in-javascript ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-31_call-stack ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-32-hoisting ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-33_scope-in-javascript ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-34_lexical-and-block-scope ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-35_higher-order-functions ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-37_event-loop-and-callback-queue ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-38-returning-functions-with-closures ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-39-functions-vs-methods ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-40_arrow-functions ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-41_for-of-vs-for-in-loop ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-42_forEach-array-method ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-43_map-filter-reduce ├── index.html ├── script.js └── script2.js ├── ep-44_some-and-every ├── index.html └── script.js ├── ep-45_arguments-keyword ├── final-code │ ├── index.html │ └── script.js ├── index.html ├── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-46_default-params ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-47_spread-operator ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-48_rest-params ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-49_destructuring-in-javascript ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-50_browser-object-model ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-51_document-object-model ├── final-code │ ├── images │ │ ├── css.png │ │ ├── html-css-javascript.png │ │ └── javascript.png │ ├── index.html │ └── script.js └── starter-code │ ├── images │ ├── css.png │ ├── html-css-javascript.png │ └── javascript.png │ ├── index.html │ └── script.js ├── ep-52_selecting-elements-in-javascript ├── final-code │ ├── images │ │ ├── css.png │ │ ├── html-css-javascript.png │ │ └── javascript.png │ ├── index.html │ ├── script.js │ └── style.css └── starter-code │ ├── images │ ├── css.png │ ├── html-css-javascript.png │ └── javascript.png │ ├── index.html │ └── script.js ├── ep-53_difference-between-innerText-innerHTML-and-textContent ├── final-code │ ├── images │ │ ├── css.png │ │ ├── html-css-javascript.png │ │ └── javascript.png │ ├── index.html │ ├── script.js │ └── style.css └── starter-code │ ├── images │ ├── css.png │ ├── html-css-javascript.png │ └── javascript.png │ ├── index.html │ ├── script.js │ └── style.css ├── ep-54_getAttribut-and-setAttribute ├── final-code │ ├── images │ │ ├── css.png │ │ ├── html-css-javascript.png │ │ └── javascript.png │ ├── index.html │ ├── script.js │ └── style.css └── starter-code │ ├── images │ ├── css.png │ ├── html-css-javascript.png │ └── javascript.png │ ├── index.html │ ├── script.js │ └── style.css ├── ep-55_how-to-change-styles-using-js ├── final-code │ ├── images │ │ ├── css.png │ │ ├── html-css-javascript.png │ │ └── javascript.png │ ├── index.html │ ├── script.js │ └── style.css └── starter-code │ ├── images │ ├── css.png │ ├── html-css-javascript.png │ └── javascript.png │ ├── index.html │ ├── script.js │ └── style.css ├── ep-56_accessing-parent-sibling-and-children-elements ├── final-code │ ├── images │ │ ├── css.png │ │ ├── html-css-javascript.png │ │ └── javascript.png │ ├── index.html │ ├── script.js │ └── style.css └── starter-code │ ├── images │ ├── css.png │ ├── html-css-javascript.png │ └── javascript.png │ ├── index.html │ ├── script.js │ └── style.css ├── ep-57_element-vs-node ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-58_append-child-and-append ├── final-code │ ├── index.html │ ├── script.js │ └── style.css └── starter-code │ ├── index.html │ ├── script.js │ └── style.css ├── ep-59_creating-element-in-javascript ├── final-code │ ├── index.html │ ├── script.js │ ├── script2.js │ └── style.css └── starter-code │ ├── index.html │ ├── script.js │ └── style.css ├── ep-60_removeChild-vs-remove ├── final-code │ ├── index.html │ ├── script.js │ ├── script2.js │ └── style.css └── starter-code │ ├── index.html │ ├── script.js │ ├── script2.js │ └── style.css ├── ep-61_adding-event-listeners ├── final-code │ ├── index.html │ ├── script.js │ └── style.css └── starter-code │ ├── index.html │ ├── script.js │ └── style.css ├── ep-62_form-events-and-event-object ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-63_keyboard-events ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-64_mouse-events ├── final-code │ ├── index.html │ ├── script.js │ └── style.css └── starter-code │ ├── index.html │ ├── script.js │ └── style.css ├── ep-65_event-bubbling-and-capturing ├── final-code │ ├── index.html │ ├── script.js │ └── style.css └── starter-code │ ├── index.html │ ├── script.js │ └── style.css ├── ep-66_event-simulator ├── final-code │ ├── index.html │ ├── script.js │ └── style.css └── starter-code │ ├── index.html │ ├── script.js │ └── style.css ├── ep-67_event-delegation ├── final-code │ ├── index.html │ ├── script.js │ └── style.css └── starter-code │ ├── index.html │ ├── script.js │ └── style.css ├── ep-68_localStorage ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-69-talking-to-the-outside-world ├── final-code │ ├── index.html │ ├── script.js │ └── user.json └── starter-code │ ├── index.html │ └── script.js ├── ep-70-xhr ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-71_synchronous-vs-asynchronous-javascript ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-72_callback-hell ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-73_promises ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-74_lets-fix-callback-hell ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-75_introducing-fetch-api ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-76_async-await ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-77_try-catch ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-78-optional-chaining ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-79_es6-modules ├── Final-code │ ├── index.html │ ├── productsData.js │ ├── script.js │ └── usersData.js └── starter-code │ ├── index.html │ └── script.js ├── ep-80_oop-and-factory-functions ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-81_oop-and-constructor-functions ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-82_classes-in-javascript ├── final-code │ ├── classes.js │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-83_how_to_make_private-class-properties ├── final-code │ ├── classes.js │ ├── index.html │ └── script.js └── starter-code │ ├── classes.js │ ├── index.html │ └── script.js ├── ep-84_static-properties-and-methods ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-85_getters-and-setters-in-javascript ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js ├── ep-86_prototypal-inheritance-using-extends-and-super-keyword-in-javascript ├── final-code │ ├── index.html │ └── script.js └── starter-code │ ├── index.html │ └── script.js └── ep-87_this-keyword-in-javascript ├── final-code ├── index.html └── script.js └── starter-code ├── index.html └── script.js /ep-01_history-of-javascript/history-of-js.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-01_history-of-javascript/history-of-js.pdf -------------------------------------------------------------------------------- /ep-02_hello-world/final-code/app.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-02_hello-world/final-code/app.js -------------------------------------------------------------------------------- /ep-02_hello-world/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 14 | 15 | 16 |

Hello World!

17 | 18 | -------------------------------------------------------------------------------- /ep-02_hello-world/final-code/script.js: -------------------------------------------------------------------------------- 1 | console.log(8 - 5 + 6); -------------------------------------------------------------------------------- /ep-03_data-types/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Data Types 8 | 9 | 10 | 11 |

Data Types in JavaScript

12 |

There are two types of data types in JavaScript.

13 |
    14 |

  1. Primitive

    2. 15 |

  2. Non Primitive

    3. 16 |
17 |

In this video we'll learn about primitive data types.

18 |

We can classify primitive data types in 7 categories.

19 |
    20 |
  1. string
    2. 21 |
  2. number
    3. 22 |
  3. boolean
    4. 23 |
  4. undefined
    5. 24 |
  5. null
    6. 25 |
  6. bigint
    7. 26 |
  7. symbol
    8. 27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /ep-03_data-types/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-03_data-types/script.js -------------------------------------------------------------------------------- /ep-04_javascript-variables/blackboard/visualizing-variable-creation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-04_javascript-variables/blackboard/visualizing-variable-creation.png -------------------------------------------------------------------------------- /ep-04_javascript-variables/final-code/scirpt.js: -------------------------------------------------------------------------------- 1 | console.log(firstName) 2 | 3 | var firstName = 'Adarsh' 4 | let lastName = 'Singh' 5 | let age = 15 6 | let खुशहै = true 7 | firstName = 100 8 | var a 9 | 10 | const hoursInDay = 24 11 | 12 | 13 | let userIntro = 14 | 'Hi, my name is ' 15 | + firstName + ' ' 16 | + lastName + '. I am ' + age + ' ' + 'years old.' -------------------------------------------------------------------------------- /ep-04_javascript-variables/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Variables in JavaScript 8 | 9 | 10 | 11 |

Variables in JavaScript

12 |

A JavaScript variable is just a name of storage location.

13 |

And we can give that name in three ways.

14 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /ep-04_javascript-variables/starter-code/scirpt.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-04_javascript-variables/starter-code/scirpt.js -------------------------------------------------------------------------------- /ep-05_code-execution-in-javascript/blackboard/code-execution-in-javascript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-05_code-execution-in-javascript/blackboard/code-execution-in-javascript.png -------------------------------------------------------------------------------- /ep-05_code-execution-in-javascript/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Code Execution in JavaScript 8 | 9 | 10 | 11 |

Code Execution in JavaScript

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-05_code-execution-in-javascript/final-code/script.js: -------------------------------------------------------------------------------- 1 | debugger 2 | console.log(firstName) 3 | 4 | var firstName = 'Akash' 5 | let lastName = 'Singh' 6 | let age = 15 7 | const yearOfBirth = 1999 8 | 9 | // let userIntro = 'Hi, my name is ' + firstName + ' ' + lastName -------------------------------------------------------------------------------- /ep-05_code-execution-in-javascript/starter-code/scirpt.js: -------------------------------------------------------------------------------- 1 | var firstName = 'Akash' 2 | let lastName = 'Singh' 3 | let age = 15 4 | const yearOfBirth = 1999 5 | 6 | let userIntro = 'Hi, my name is ' + firstName + ' ' + lastName 7 | -------------------------------------------------------------------------------- /ep-06_alert-prompt-confirm/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Dialog Boxes 9 | 10 | 11 |

Dialog Boxes

12 |

There are three types of Dialog Boxes

13 |
    14 |
  1. alert("Your message goes here.")
    2. 15 |
  2. confirm("Your message goes here.")
    3. 16 |
  3. prompt("Your message goes here.")
    4. 17 |
18 | 19 | -------------------------------------------------------------------------------- /ep-06_alert-prompt-confirm/final-code/scirpt.js: -------------------------------------------------------------------------------- 1 | // const alertResult = alert("Are you sure?") 2 | // const isConfirmed = confirm("Would you like to proceed?") 3 | const userInput = prompt("Please enter your name.........................") 4 | console.log(userInput) -------------------------------------------------------------------------------- /ep-06_alert-prompt-confirm/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Dialog Boxes 9 | 10 | 11 |

Dialog Boxes

12 |

There are three types of Dialog Boxes

13 |
    14 |
  1. alert("Your message goes here.")
    2. 15 |
  2. confirm("Your message goes here.")
    3. 16 |
  3. prompt("Your message goes here.")
    4. 17 |
18 | 19 | -------------------------------------------------------------------------------- /ep-06_alert-prompt-confirm/starter-code/scirpt.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-06_alert-prompt-confirm/starter-code/scirpt.js -------------------------------------------------------------------------------- /ep-07_string-methods-and-properties/final-code/script.js: -------------------------------------------------------------------------------- 1 | const message = 'Hello World!' 2 | const faltuMessage = ' Hi, I am Anurag. ' 3 | const finalMessage = faltuMessage.trim() 4 | const finalMessageLowerCase = faltuMessage.trim().toLocaleLowerCase() 5 | const replacedMessage = finalMessage.replace('Hi', 'Hello') 6 | 7 | const lastFourDigits = '9996' 8 | const maskedAccountNumber = lastFourDigits.padStart(16, '*') 9 | 10 | const capitalMessage = message.toUpperCase() 11 | const bankBalance = 9873 12 | 13 | const concatenatedString = `Last four digit of my account number is`.concat(' ', lastFourDigits) 14 | const templateString = `My account number is ${lastFourDigits}.` 15 | const templateString2 = `I have ₹${bankBalance} in my account.` 16 | 17 | const addedString = 'I have ₹' + bankBalance + ' in my account.' -------------------------------------------------------------------------------- /ep-07_string-methods-and-properties/starter-code/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-07_string-methods-and-properties/starter-code/script.js -------------------------------------------------------------------------------- /ep-08_maths-in-javascript/final-code/script.js: -------------------------------------------------------------------------------- 1 | const width = +prompt("Please Enter Rectangle Width"); 2 | const height = +prompt("Please Enter Rectangle Height"); 3 | 4 | console.log(width * height); 5 | document.write(`Rectangle Area: ${width * height}`); 6 | -------------------------------------------------------------------------------- /ep-08_maths-in-javascript/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Math in JavaScript 8 | 9 | 10 | 11 |

Math in JavaScript

12 | 13 | -------------------------------------------------------------------------------- /ep-08_maths-in-javascript/starter-code/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-08_maths-in-javascript/starter-code/script.js -------------------------------------------------------------------------------- /ep-09_truthy-and-falsy-values/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Math in JavaScript 8 | 9 | 10 | 11 | 12 |

Truthy and Falsy Values

13 |

Falsy Values

14 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /ep-09_truthy-and-falsy-values/final-code/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-09_truthy-and-falsy-values/final-code/script.js -------------------------------------------------------------------------------- /ep-09_truthy-and-falsy-values/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Math in JavaScript 8 | 9 | 10 | 11 | 12 |

Truthy and Falsy Values

13 | 14 | 15 | -------------------------------------------------------------------------------- /ep-09_truthy-and-falsy-values/starter-code/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-09_truthy-and-falsy-values/starter-code/script.js -------------------------------------------------------------------------------- /ep-10_comparison-operators/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Comparison Operators 8 | 9 | 10 | 11 |

Comparison Operators

12 |

== equal to (equality) [it does implicit (automatic) conversion]

13 |

=== equal value and equal type (strict equality) [you have to do explicit (manual) conversion]

14 |

!= not equal

15 |

!== not equal value or not equal type (strict)

16 |

> greater than

17 |

< less than

18 |

>= greater than or equal to

19 |

<= less than or equal to

20 | 21 | 22 | -------------------------------------------------------------------------------- /ep-10_comparison-operators/final-code/script.js: -------------------------------------------------------------------------------- 1 | const userAge1 = 21 2 | const userAge2 = 24 -------------------------------------------------------------------------------- /ep-10_comparison-operators/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Comparison Operators 8 | 9 | 10 | 11 |

Comparison Operators

12 |

== equal to (equality)

13 |

=== equal value and equal type (strict equality)

14 |

!= not equal

15 |

!== not equal value or not equal type (strict)

16 |

> greater than

17 |

< less than

18 |

>= greater than or equal to

19 |

<= less than or equal to

20 | 21 | 22 | -------------------------------------------------------------------------------- /ep-10_comparison-operators/starter-code/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-10_comparison-operators/starter-code/script.js -------------------------------------------------------------------------------- /ep-11_logical-operators/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Logical Operators 8 | 9 | 10 | 11 |

Logical Operators

12 | 17 | 18 | -------------------------------------------------------------------------------- /ep-11_logical-operators/final-code/script.js: -------------------------------------------------------------------------------- 1 | const userAge = 22 2 | 3 | const isSchoolStudent = (userAge >= 5) && (userAge <= 18) 4 | const isCollegeStudent = (userAge >= 18) && (userAge <= 24) 5 | 6 | const isStudent = isSchoolStudent || isCollegeStudent 7 | 8 | const andResult = 0 && 2 9 | const orResult = 0 || 2 10 | 11 | const andResult2 = '' && 'Hello' 12 | const orResult2 = '' || 'Hello' 13 | 14 | const andResult3 = 'Hello' && null 15 | const orResult3 = 'Hello' || null 16 | 17 | const andResult4 = 'Hello' && -4 + 4 18 | const orResult4 = undefined || 4 + 8 * 5 19 | 20 | const andResult5 = 'Hello' && console.log('hello1') 21 | const orResult5 = undefined || console.log('hello2') -------------------------------------------------------------------------------- /ep-11_logical-operators/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Logical Operators 8 | 9 | 10 | 11 |

Logical Operators

12 | 17 | 18 | -------------------------------------------------------------------------------- /ep-11_logical-operators/starter-code/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-11_logical-operators/starter-code/script.js -------------------------------------------------------------------------------- /ep-12_decision-making-in-javascript/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Decision Making in JavaScript 8 | 9 | 10 | 11 |

Decision Making in JavaScript

12 | 13 | -------------------------------------------------------------------------------- /ep-12_decision-making-in-javascript/final-code/script.js: -------------------------------------------------------------------------------- 1 | const username = prompt('Please Enter Your Name.'); 2 | const userAge = parseInt(prompt('Please Enter Your Age.')); 3 | 4 | debugger 5 | console.log(`Name: ${username}`); 6 | console.log(`Age: ${userAge}`); 7 | 8 | if (userAge >= 0 && userAge <= 4) { 9 | console.log(`${username} is a kid.`); 10 | console.log('And he/she is playing.'); 11 | } 12 | 13 | if (userAge >= 5 && userAge <= 17) { 14 | console.log(`${username} is a school student.`); 15 | console.log('And he/she is learning science and maths.'); 16 | } 17 | 18 | if (userAge >= 18 && userAge <= 24) { 19 | console.log(`${username} is a college student.`); 20 | console.log('And he/she is learning computer science.'); 21 | } 22 | 23 | if (userAge >= 25 && userAge <= 45) { 24 | console.log(`${username} is a working professional.`); 25 | console.log('And he/she is a web developer.'); 26 | } 27 | 28 | if (userAge > 45) { 29 | console.log(`${username} is retired.`); 30 | console.log('And he/she reads newspaper.'); 31 | } 32 | 33 | console.log('Program Ended!!'); -------------------------------------------------------------------------------- /ep-12_decision-making-in-javascript/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Decision Making in JavaScript 8 | 9 | 10 | 11 |

Decision Making in JavaScript

12 | 13 | -------------------------------------------------------------------------------- /ep-12_decision-making-in-javascript/starter-code/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-12_decision-making-in-javascript/starter-code/script.js -------------------------------------------------------------------------------- /ep-13_optimize-descision-making-using-else/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Decision Making in JavaScript 8 | 9 | 10 | 11 |

Decision Making in JavaScript

12 | 13 | -------------------------------------------------------------------------------- /ep-13_optimize-descision-making-using-else/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Decision Making in JavaScript 8 | 9 | 10 | 11 |

Decision Making in JavaScript

12 | 13 | -------------------------------------------------------------------------------- /ep-13_optimize-descision-making-using-else/starter-code/script.js: -------------------------------------------------------------------------------- 1 | const username = prompt('Please Enter Your Name.'); 2 | const userAge = parseInt(prompt('Please Enter Your Age.')); 3 | 4 | debugger 5 | console.log(`Name: ${username}`); 6 | console.log(`Age: ${userAge}`); 7 | 8 | if (userAge >= 0 && userAge <= 4) { 9 | console.log(`${username} is a kid.`); 10 | console.log('And he/she is playing.'); 11 | } 12 | 13 | if (userAge >= 5 && userAge <= 17) { 14 | console.log(`${username} is a school student.`); 15 | console.log('And he/she is learning science and maths.'); 16 | } 17 | 18 | if (userAge >= 18 && userAge <= 24) { 19 | console.log(`${username} is a college student.`); 20 | console.log('And he/she is learning computer science.'); 21 | } 22 | 23 | if (userAge >= 25 && userAge <= 45) { 24 | console.log(`${username} is a working professional.`); 25 | console.log('And he/she is a web developer.'); 26 | } 27 | 28 | if (userAge > 45) { 29 | console.log(`${username} is retired.`); 30 | console.log('And he/she reads newspaper.'); 31 | } 32 | 33 | console.log('Program Ended!!'); -------------------------------------------------------------------------------- /ep-15-switch-case/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Switch Statement 8 | 9 | 10 | 11 |

Switch Statement

12 | 13 | -------------------------------------------------------------------------------- /ep-15-switch-case/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Switch Statement 8 | 9 | 10 | 11 |

Switch Statement

12 | 13 | -------------------------------------------------------------------------------- /ep-15-switch-case/starter-code/script.js: -------------------------------------------------------------------------------- 1 | const dayNumber = 3 2 | 3 | if (dayNumber === 0) { 4 | console.log('It is Sunday Today') 5 | } else if (dayNumber === 1) { 6 | console.log('It is Monday Today') 7 | } else if (dayNumber === 2) { 8 | console.log('It is Tuesday Today') 9 | } else if (dayNumber === 3) { 10 | console.log('It is Wednesday Today') 11 | } else if (dayNumber === 4) { 12 | console.log('It is Thursday Today') 13 | } else if (dayNumber === 5) { 14 | console.log('It is Friday Today') 15 | } else if (dayNumber === 6) { 16 | console.log('It is Saturday Today') 17 | } else { 18 | console.log('Please Enter a Valid Day Number') 19 | } 20 | -------------------------------------------------------------------------------- /ep-16-ternary-operator/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Ternary Operator 8 | 9 | 10 | 11 |

Ternary Operator

12 | 13 | -------------------------------------------------------------------------------- /ep-16-ternary-operator/final-code/script.js: -------------------------------------------------------------------------------- 1 | const username = 5 > 2 ? 'Anurag' : 'Procodrr' 2 | 3 | // const gender = 'F' 4 | 5 | // debugger 6 | // const userMessage = `${gender.toLocaleLowerCase() === 'f' ? 'She' : 'He'} is a college student.` 7 | 8 | // console.log(userMessage); 9 | 10 | const result = null ? 'Anurag' : '' ? '12' : 0 11 | 12 | console.log(result) 13 | -------------------------------------------------------------------------------- /ep-16-ternary-operator/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Ternary Operator 8 | 9 | 10 | 11 |

Ternary Operator

12 | 13 | -------------------------------------------------------------------------------- /ep-16-ternary-operator/starter-code/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-16-ternary-operator/starter-code/script.js -------------------------------------------------------------------------------- /ep-17_see-variables-address-in-memory-devtools/blackboard/visualize-variable-address.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-17_see-variables-address-in-memory-devtools/blackboard/visualize-variable-address.png -------------------------------------------------------------------------------- /ep-17_see-variables-address-in-memory-devtools/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Visualize Variables Address 8 | 9 | 10 | 11 |

Visualize Variables Address

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-17_see-variables-address-in-memory-devtools/final-code/script.js: -------------------------------------------------------------------------------- 1 | const firstName = 'Akash' 2 | const lastName = 'Singh' 3 | const userAge = 15 4 | const birthYear = 2000 5 | const isGraduate = false 6 | const hasJob = true -------------------------------------------------------------------------------- /ep-17_see-variables-address-in-memory-devtools/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Visualize Variables Address 8 | 9 | 10 | 11 |

Visualize Variables Address

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-17_see-variables-address-in-memory-devtools/starter-code/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-17_see-variables-address-in-memory-devtools/starter-code/script.js -------------------------------------------------------------------------------- /ep-18_reference-types-in-javascript/final-code/script.js: -------------------------------------------------------------------------------- 1 | const myName = 'Anurag' 2 | 3 | const username1 = '' 4 | const username2 = '' 5 | 6 | const user1 = { 7 | firstName: 'Akash' 8 | } 9 | 10 | 11 | // const user2 = { 12 | // firstName: 'Adarsh', 13 | // 'last-Name': 'Singh', 14 | // Anurag: 'Developer' 15 | // } 16 | 17 | // console.log(user2.firstName); 18 | // console.log(user2["last-Name"]); 19 | // console.log(user2[myName]); 20 | // console.log(user2["first" + "Name"]); 21 | 22 | const user2 = { 23 | firstName: 'Adarsh', 24 | lastName: 'Singh', 25 | pata: { 26 | city: 'Bangalore', 27 | pinCode: 876876, 28 | state: 'Karnataka', 29 | moreDetails: { 30 | population: 9798897897, 31 | area: '787 sq km', 32 | } 33 | } 34 | } 35 | 36 | // user2.age = 26 37 | // user2["is-student"] = true -------------------------------------------------------------------------------- /ep-18_reference-types-in-javascript/starter-code/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-18_reference-types-in-javascript/starter-code/script.js -------------------------------------------------------------------------------- /ep-19_freeze-object-seal-object/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Object.seal() Vs Object.freeze() 8 | 9 | 10 | 11 |

Object.seal() Vs Object.freeze()

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-19_freeze-object-seal-object/final-code/script.js: -------------------------------------------------------------------------------- 1 | let username = 'Anurag' 2 | 3 | const user = { 4 | firstName: 'Adarsh', 5 | lastName: 'Singh', 6 | pata: { 7 | city: 'Bangalore', 8 | pinCode: 876876, 9 | state: 'Karnataka', 10 | moreDetails: { 11 | population: 9798897897, 12 | area: '787 sq km', 13 | }, 14 | }, 15 | age: 15, 16 | isGraduate: false, 17 | } 18 | 19 | // Object.seal(user) 20 | Object.freeze(user) 21 | 22 | console.log('isGraduate' in user); 23 | -------------------------------------------------------------------------------- /ep-19_freeze-object-seal-object/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Object.seal() Vs Object.freeze() 8 | 9 | 10 | 11 |

Object.seal() Vs Object.freeze()

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-19_freeze-object-seal-object/starter-code/script.js: -------------------------------------------------------------------------------- 1 | const user = { 2 | firstName: 'Adarsh', 3 | lastName: 'Singh', 4 | pata: { 5 | city: 'Bangalore', 6 | pinCode: 876876, 7 | state: 'Karnataka', 8 | moreDetails: { 9 | population: 9798897897, 10 | area: '787 sq km', 11 | }, 12 | }, 13 | age: 15, 14 | isGraduate: false, 15 | } 16 | -------------------------------------------------------------------------------- /ep-20-arrays/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Arrays 8 | 9 | 10 | 11 |

Arrays

12 | 13 | -------------------------------------------------------------------------------- /ep-20-arrays/final-code/script.js: -------------------------------------------------------------------------------- 1 | const username = 'Anurag Singh' 2 | 3 | const fruitsCollection = ['Apple', 'Banana', 'Grapes', 'Dates'] 4 | 5 | const newObject = {} 6 | const newArray = [] 7 | -------------------------------------------------------------------------------- /ep-20-arrays/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Arrays 8 | 9 | 10 | 11 |

Arrays

12 | 13 | -------------------------------------------------------------------------------- /ep-20-arrays/starter-code/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-20-arrays/starter-code/script.js -------------------------------------------------------------------------------- /ep-21-basic-array-methods/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Arrays 8 | 9 | 10 | 11 |

Basic Array Methods

12 |
    13 |
  1. pop()
    2. 14 |
  2. push()
    3. 15 |
  3. shift()
    4. 16 |
  4. unshift()
    5. 17 |
  5. concat()
    6. 18 |
  6. indexOf()
    7. 19 |
  7. includes()
    8. 20 |
  8. reverse()
    9. 21 |
  9. sort()
    10. 22 |
  10. slice()
    11. 23 |
  11. splice()
    12. 24 |
25 | 26 | -------------------------------------------------------------------------------- /ep-21-basic-array-methods/final-code/script.js: -------------------------------------------------------------------------------- 1 | const evenNumbers = [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24] 2 | const animals = ['Dog', 'Cat', 'Rat', 'Lion', 'Elephant', 'Cow', 'Tiger'] 3 | const oddNumber = [1, 3, 5] 4 | 5 | // evenNumbers.shift() 6 | // evenNumbers.unshift(0) 7 | 8 | const addedArray1 = evenNumbers.concat(animals) 9 | const addedArray2 = animals.concat(evenNumbers, oddNumber) 10 | 11 | const elementIndex = animals.indexOf('Cat') 12 | const isIncluded = animals.includes('dog') 13 | 14 | animals.slice(5) 15 | animals.slice(2, 5) 16 | -------------------------------------------------------------------------------- /ep-21-basic-array-methods/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Arrays 8 | 9 | 10 | 11 |

Basic Array Methods

12 |
    13 |
  1. pop()
    2. 14 |
  2. push()
    3. 15 |
  3. shift()
    4. 16 |
  4. unshift()
    5. 17 |
  5. concat()
    6. 18 |
  6. indexOf()
    7. 19 |
  7. includes()
    8. 20 |
  8. reverse()
    9. 21 |
  9. sort()
    10. 22 |
  10. slice()
    11. 23 |
  11. splice()
    12. 24 |
25 | 26 | -------------------------------------------------------------------------------- /ep-21-basic-array-methods/starter-code/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-21-basic-array-methods/starter-code/script.js -------------------------------------------------------------------------------- /ep-22-multidimensional-arrays/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Multidimensional Arrays in JavaScript 8 | 9 | 10 | 11 |

Multidimensional Arrays

12 |

Multidimensional arrays are also called as arrays inside array.

13 | 14 | -------------------------------------------------------------------------------- /ep-22-multidimensional-arrays/final-code/script.js: -------------------------------------------------------------------------------- 1 | const nameAndNumberList = [ 2 | ['Adarsh', 75], 3 | ['Akash', 90], 4 | ['Anurag', 9], 5 | ] 6 | 7 | const ticTacToe = [ 8 | ['X', null, null], 9 | [null, null, 'O'], 10 | ['O', null, 'X'] 11 | ] 12 | -------------------------------------------------------------------------------- /ep-22-multidimensional-arrays/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Multidimensional Arrays in JavaScript 8 | 9 | 10 | 11 |

Multidimensional Arrays

12 |

Multidimensional arrays are also called arrays inside array.

13 | 14 | -------------------------------------------------------------------------------- /ep-22-multidimensional-arrays/starter-code/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-22-multidimensional-arrays/starter-code/script.js -------------------------------------------------------------------------------- /ep-23_right-way-to-copy-objects/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Right Way of Duplicating Array & Objects 8 | 9 | 10 | 11 |

Right Way of Duplicating Array & Objects

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-23_right-way-to-copy-objects/final-code/script.js: -------------------------------------------------------------------------------- 1 | // const username1 = 'Anurag' 2 | // let username2 = username1 3 | // username2 = username2 + ' Singh' 4 | 5 | const fruits = ['Mango', 'Apple', 'Orange'] 6 | 7 | // const myFruits = fruits 8 | 9 | // myFruits.push('Dates') 10 | // myFruits.push('Grapes') 11 | 12 | // Object.assign(myFruits, fruits) 13 | const myFruits = [...fruits] 14 | 15 | // const myFruits = [].concat(fruits) 16 | // const myFruits = fruits.slice() 17 | 18 | const user1 = { 19 | firstName: 'Anurag', 20 | lastName: 'Singh', 21 | pata: { 22 | city: 'Delhi', 23 | pincode: 989888, 24 | }, 25 | subject: ['Physics', 'CS', 'Maths'] 26 | } 27 | 28 | // Shallow Copy 29 | 30 | // const user2 = {} 31 | // Object.assign(user2, user1) 32 | const user2 = { ...user1 } 33 | -------------------------------------------------------------------------------- /ep-23_right-way-to-copy-objects/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Right Way of Duplicating Array & Objects 8 | 9 | 10 | 11 |

Right Way of Duplicating Array & Objects

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-23_right-way-to-copy-objects/starter-code/script.js: -------------------------------------------------------------------------------- 1 | const fruits = ['Mango', 'Apple', 'Orange'] 2 | -------------------------------------------------------------------------------- /ep-24-compound-operators/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Compound Operators 8 | 9 | 10 | 11 |

Compound Operators

12 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /ep-24-compound-operators/final-code/script.js: -------------------------------------------------------------------------------- 1 | const username = 'Anurag' 2 | 3 | let num = 5 4 | 5 | // debugger 6 | // num = num + 5 7 | // num = num + 5 8 | // num = num + 5 9 | // num = num + 5 10 | 11 | // num += 5 12 | // num += 5 13 | // num += 5 14 | // num += 5 15 | 16 | // num = num * 2 17 | // num = num * 2 18 | // num = num * 2 19 | 20 | // num *= 2 21 | // num *= 2 22 | // num *= 2 23 | 24 | // const newNum = ++num 25 | // const newNum = --num 26 | 27 | // const newNum = num++ 28 | // const newNum = num-- 29 | 30 | // num = num + 1 31 | // num += 1 32 | 33 | num++ -------------------------------------------------------------------------------- /ep-24-compound-operators/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Compound Operators 8 | 9 | 10 | 11 |

Compound Operators

12 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /ep-24-compound-operators/starter-code/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-24-compound-operators/starter-code/script.js -------------------------------------------------------------------------------- /ep-25-while-loop/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | While Loop 8 | 9 | 10 | 11 |

While Loop

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-25-while-loop/final-code/script.js: -------------------------------------------------------------------------------- 1 | console.log('Program Started') 2 | 3 | // debugger 4 | 5 | // let i = 1 6 | // while(i <= 100) { 7 | // console.log(i); 8 | // i++ 9 | // } 10 | 11 | const friends = ['Akash', 'Rahul', 'Adarsh', 'Arif', 'Gaurav', 'Anurag', 'Rakesh'] 12 | 13 | let i = 0 14 | 15 | while(i < friends.length) { 16 | console.log(`${i + 1}. ${friends[i]}`); 17 | friends[i] = friends[i] + ' Procodrr' 18 | i++ 19 | } 20 | 21 | console.log('Program Ended') 22 | -------------------------------------------------------------------------------- /ep-25-while-loop/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | While Loop 8 | 9 | 10 | 11 |

While Loop

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-25-while-loop/starter-code/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-25-while-loop/starter-code/script.js -------------------------------------------------------------------------------- /ep-26-for-loop/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | For Loop 8 | 9 | 10 | 11 |

For Loop

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-26-for-loop/final-code/script.js: -------------------------------------------------------------------------------- 1 | console.log('Program Start') 2 | 3 | 4 | for(let i = 0; i <= 10; i++) { 5 | if(i % 2 === 0) { 6 | console.log(i); 7 | } 8 | } 9 | 10 | console.log('Program Ended') 11 | -------------------------------------------------------------------------------- /ep-26-for-loop/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | For Loop 8 | 9 | 10 | 11 |

For Loop

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-26-for-loop/starter-code/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-26-for-loop/starter-code/script.js -------------------------------------------------------------------------------- /ep-27-do-while-loop/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Do While Loop 8 | 9 | 10 | 11 |

Do While Loop

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-27-do-while-loop/final-code/script.js: -------------------------------------------------------------------------------- 1 | console.log('Program Start') 2 | 3 | // debugger 4 | // let i = 0 5 | // while (i < 5) { 6 | // console.log(i) 7 | // i++ 8 | // } 9 | 10 | // for(let i = 0; i < 5; i++) { 11 | // console.log(i); 12 | // } 13 | 14 | let i = 0 15 | do { 16 | console.log(i); 17 | i++ 18 | } while (i < 5) 19 | 20 | console.log('Program Ended') 21 | -------------------------------------------------------------------------------- /ep-27-do-while-loop/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Do While Loop 8 | 9 | 10 | 11 |

Do While Loop

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-27-do-while-loop/starter-code/script.js: -------------------------------------------------------------------------------- 1 | console.log('Program Start') 2 | 3 | // let i = 0 4 | // while (i < 5) { 5 | // console.log(i) 6 | // i++ 7 | // } 8 | 9 | // for(let i = 0; i < 5; i++) { 10 | // console.log(i); 11 | // } 12 | 13 | let i = 0 14 | 15 | do { 16 | console.log(i); 17 | i++ 18 | } while (i < 5) 19 | 20 | console.log('Program Ended') 21 | -------------------------------------------------------------------------------- /ep-28_introduction-to-functions/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Introducing Functions 8 | 9 | 10 | 11 |

Introducing Functions

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-28_introduction-to-functions/final-code/script.js: -------------------------------------------------------------------------------- 1 | 2 | // Function Definition 3 | function introduceMe(username, profession, age) { 4 | // console.log(typeof username); 5 | // console.log(typeof profession); 6 | // console.log(typeof age); 7 | console.log('Hi,'); 8 | console.log(`My name is ${username || 'Procodrr'}.`); 9 | console.log(`I am a ${profession}`); 10 | console.log(`I am ${age} years old.`); 11 | } 12 | 13 | // // Function Call 14 | // const returnValue = introduceMe() 15 | 16 | // introduceMe('Anurag', 'Software Engineer', 25) 17 | // introduceMe('Akash', 'Mechanical Engineer', 27) -------------------------------------------------------------------------------- /ep-28_introduction-to-functions/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Introducing Functions 8 | 9 | 10 | 11 |

Introducing Functions

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-28_introduction-to-functions/starter-code/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-28_introduction-to-functions/starter-code/script.js -------------------------------------------------------------------------------- /ep-29_functions-with-return-value/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Functions with Return Value 8 | 9 | 10 | 11 |

Functions with Return Value

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-29_functions-with-return-value/final-code/script.js: -------------------------------------------------------------------------------- 1 | function addTwoNumbers(a, b) { 2 | debugger 3 | 4 | return a + b 5 | } 6 | 7 | // const result = addTwoNumbers(56, 6) 8 | 9 | // console.log(result); -------------------------------------------------------------------------------- /ep-29_functions-with-return-value/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Functions with Return Value 8 | 9 | 10 | 11 |

Functions with Return Value

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-29_functions-with-return-value/starter-code/script.js: -------------------------------------------------------------------------------- 1 | 2 | // Function Definition 3 | function introduceMe(username, profession, age) { 4 | // console.log(typeof username); 5 | // console.log(typeof profession); 6 | // console.log(typeof age); 7 | console.log('Hi,'); 8 | console.log(`My name is ${username || 'Procodrr'}.`); 9 | console.log(`I am a ${profession}`); 10 | console.log(`I am ${age} years old.`); 11 | } 12 | 13 | // // Function Call 14 | // const returnValue = introduceMe() 15 | 16 | // introduceMe('Anurag', 'Software Engineer', 25) 17 | // introduceMe('Akash', 'Mechanical Engineer', 27) -------------------------------------------------------------------------------- /ep-30-execution-context-in-javascript/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Execution Context in JavaScript 8 | 9 | 10 | 11 |

Execution Context in JavaScript

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-30-execution-context-in-javascript/final-code/script.js: -------------------------------------------------------------------------------- 1 | debugger 2 | 3 | sayHi() 4 | 5 | const username = 'Anurag' 6 | const userAge = 25 7 | 8 | function sayHi() { 9 | const a = 14 10 | const b = 12 11 | add(7, 9) 12 | } 13 | 14 | function add(x, y) { 15 | kuchhBhi() 16 | return x + y 17 | } 18 | 19 | function kuchhBhi() { 20 | console.log('Kuchh bhi'); 21 | } 22 | 23 | console.log('Program Ended'); -------------------------------------------------------------------------------- /ep-30-execution-context-in-javascript/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Execution Context in JavaScript 8 | 9 | 10 | 11 |

Execution Context in JavaScript

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-30-execution-context-in-javascript/starter-code/script.js: -------------------------------------------------------------------------------- 1 | debugger 2 | console.log(firstName) 3 | 4 | var firstName = 'Akash' 5 | let lastName = 'Singh' 6 | let age = 15 7 | const yearOfBirth = 1999 8 | 9 | // let userIntro = 'Hi, my name is ' + firstName + ' ' + lastName -------------------------------------------------------------------------------- /ep-31_call-stack/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Call Stack 8 | 9 | 10 | 11 |

Call Stack

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-31_call-stack/final-code/script.js: -------------------------------------------------------------------------------- 1 | debugger 2 | 3 | // sayHi() 4 | 5 | // const username = 'Anurag' 6 | // const userAge = 25 7 | 8 | // function sayHi() { 9 | // const a = 14 10 | // const b = 12 11 | // add(7, 9) 12 | // } 13 | 14 | // function add(x, y) { 15 | // kuchhBhi() 16 | // return x + y 17 | // } 18 | 19 | // function kuchhBhi() { 20 | // console.log('Kuchh bhi'); 21 | // } 22 | 23 | function introduceMe() { 24 | console.log('Hi, My name is Anurag.'); 25 | introduceMe() 26 | } 27 | 28 | introduceMe() 29 | 30 | console.log('Program Ended'); -------------------------------------------------------------------------------- /ep-31_call-stack/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Call Stack 8 | 9 | 10 | 11 |

Call Stack

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-31_call-stack/starter-code/script.js: -------------------------------------------------------------------------------- 1 | debugger 2 | 3 | sayHi() 4 | 5 | const username = 'Anurag' 6 | const userAge = 25 7 | 8 | function sayHi() { 9 | const a = 14 10 | const b = 12 11 | add(7, 9) 12 | } 13 | 14 | function add(x, y) { 15 | kuchhBhi() 16 | return x + y 17 | } 18 | 19 | function kuchhBhi() { 20 | console.log('Kuchh bhi'); 21 | } 22 | 23 | console.log('Program Ended'); -------------------------------------------------------------------------------- /ep-32-hoisting/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Hoisting in JavaScript 8 | 9 | 10 | 11 |

Hoisting in JavaScript

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-32-hoisting/final-code/script.js: -------------------------------------------------------------------------------- 1 | // debugger 2 | 3 | console.log(a) 4 | 5 | var a = 'Anurag' 6 | 7 | hi() 8 | 9 | 10 | // Function Definition 11 | // Function Declaration 12 | function hi() { 13 | console.log('Hello'); 14 | } 15 | 16 | // Function Definition 17 | // Function Expression 18 | var sayHi = function() { //anonymous function 19 | console.log('Hiii'); 20 | } 21 | 22 | // IIFE 23 | 24 | 25 | sayHi() -------------------------------------------------------------------------------- /ep-32-hoisting/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Hoisting in JavaScript 8 | 9 | 10 | 11 |

Hoisting in JavaScript

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-32-hoisting/starter-code/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-32-hoisting/starter-code/script.js -------------------------------------------------------------------------------- /ep-33_scope-in-javascript/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Scope in JavaScript 8 | 9 | 10 | 11 |

Scope in JavaScript

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-33_scope-in-javascript/final-code/script.js: -------------------------------------------------------------------------------- 1 | const username = 'Anurag' 2 | let userAge = 25 3 | var a = 50 4 | 5 | function add() { 6 | debugger 7 | const username = 'Akash' 8 | const x = 5 9 | const y = 8 10 | console.log(x + y) 11 | console.log(username) 12 | } 13 | 14 | function subtract() { 15 | const x = 15 16 | const y = 18 17 | console.log(x - y) 18 | console.log(username) 19 | } 20 | 21 | add() 22 | subtract() 23 | 24 | console.log('Program Ended') 25 | -------------------------------------------------------------------------------- /ep-33_scope-in-javascript/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Scope in JavaScript 8 | 9 | 10 | 11 |

Scope in JavaScript

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-33_scope-in-javascript/starter-code/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-33_scope-in-javascript/starter-code/script.js -------------------------------------------------------------------------------- /ep-34_lexical-and-block-scope/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Lexical Scope and Block Scope 8 | 9 | 10 | 11 |

Lexical Scope and Block Scope

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-34_lexical-and-block-scope/final-code/script.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | 3 | const username = 'Anurag' 4 | let userAge = 25 5 | var a = 50 6 | 7 | // function add() { 8 | // const username = 'Akash' 9 | // const x = 5 10 | // const y = 8 11 | // console.log(x + y) 12 | // console.log(username) 13 | // } 14 | 15 | function subtract() { 16 | const x = 15 17 | const y = 18 18 | const z = 28 19 | // console.log(x - y) 20 | // console.log(username) 21 | 22 | function child() { 23 | // debugger 24 | 25 | const childName = 'Golu' 26 | // console.log(childName); 27 | // console.log(x,z); 28 | 29 | if(true){ 30 | let num1 = 78 31 | var num2 = 987 32 | console.log(num1); 33 | console.log(num2); 34 | } 35 | console.log(num2); 36 | 37 | function grandChild() { 38 | const grandChildName = 'Molu' 39 | // console.log(grandChildName); 40 | } 41 | grandChild() 42 | } 43 | 44 | 45 | child() 46 | 47 | } 48 | 49 | // add() 50 | subtract() 51 | 52 | console.log('Program Ended') 53 | -------------------------------------------------------------------------------- /ep-34_lexical-and-block-scope/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Lexical Scope and Block Scope 8 | 9 | 10 | 11 |

Lexical Scope and Block Scope

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-34_lexical-and-block-scope/starter-code/script.js: -------------------------------------------------------------------------------- 1 | const username = 'Anurag' 2 | let userAge = 25 3 | var a = 50 4 | 5 | function add() { 6 | debugger 7 | const username = 'Akash' 8 | const x = 5 9 | const y = 8 10 | console.log(x + y) 11 | console.log(username) 12 | } 13 | 14 | function subtract() { 15 | const x = 15 16 | const y = 18 17 | console.log(x - y) 18 | console.log(username) 19 | } 20 | 21 | add() 22 | subtract() 23 | 24 | console.log('Program Ended') 25 | -------------------------------------------------------------------------------- /ep-35_higher-order-functions/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Higher Order Functions 8 | 9 | 10 | 11 |

Higher Order Functions

12 | 13 | -------------------------------------------------------------------------------- /ep-35_higher-order-functions/final-code/script.js: -------------------------------------------------------------------------------- 1 | //higher order function 2 | function a(b) { 3 | console.dir(b); 4 | b() 5 | } 6 | 7 | 8 | 9 | 10 | //callback function 11 | a(function() { 12 | console.log('Hiiiiiiiiiiiiiiiiiii'); 13 | }) 14 | -------------------------------------------------------------------------------- /ep-35_higher-order-functions/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Higher Order Functions 8 | 9 | 10 | 11 |

Higher Order Functions

12 | 13 | -------------------------------------------------------------------------------- /ep-35_higher-order-functions/starter-code/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-35_higher-order-functions/starter-code/script.js -------------------------------------------------------------------------------- /ep-37_event-loop-and-callback-queue/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Event Loop and Callback Queue 8 | 9 | 10 | 11 |

Event Loop and Callback Queue

12 | 13 | -------------------------------------------------------------------------------- /ep-37_event-loop-and-callback-queue/final-code/script.js: -------------------------------------------------------------------------------- 1 | console.log('Hi-1'); 2 | 3 | function hello() { 4 | console.log('Hello World!'); 5 | } 6 | 7 | for(let i = 1; i <=4; i++){ 8 | console.log(i); 9 | } 10 | 11 | hello() 12 | setTimeout(hello, 0) 13 | 14 | console.log('Hi-2'); -------------------------------------------------------------------------------- /ep-37_event-loop-and-callback-queue/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Event Loop and Callback Queue 8 | 9 | 10 | 11 |

Event Loop and Callback Queue

12 | 13 | -------------------------------------------------------------------------------- /ep-37_event-loop-and-callback-queue/starter-code/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-37_event-loop-and-callback-queue/starter-code/script.js -------------------------------------------------------------------------------- /ep-38-returning-functions-with-closures/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Returning Functions with Closures 8 | 9 | 10 | 11 |

Returning Functions with Closures

12 | 13 | -------------------------------------------------------------------------------- /ep-38-returning-functions-with-closures/final-code/script.js: -------------------------------------------------------------------------------- 1 | function outer() { 2 | const a = 4 3 | function parent() { 4 | const b = 6 5 | return function() { 6 | console.log(a + b) 7 | } 8 | } 9 | return parent() 10 | } 11 | 12 | const add1 = outer() 13 | 14 | console.dir(add1) 15 | -------------------------------------------------------------------------------- /ep-38-returning-functions-with-closures/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Returning Functions with Closures 8 | 9 | 10 | 11 |

Returning Functions with Closures

12 | 13 | -------------------------------------------------------------------------------- /ep-38-returning-functions-with-closures/starter-code/script.js: -------------------------------------------------------------------------------- 1 | const a = 4 2 | const b = 6 3 | 4 | function add() { 5 | console.log(a + b) 6 | } -------------------------------------------------------------------------------- /ep-39-functions-vs-methods/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Functions Vs Methods 8 | 9 | 10 | 11 |
12 |

Functions Vs Methods

13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /ep-39-functions-vs-methods/final-code/script.js: -------------------------------------------------------------------------------- 1 | const maths = { 2 | E: 2.718281828459045, 3 | add: function (a, b) { 4 | return a + b 5 | }, 6 | square: function(num) { 7 | return num * num; 8 | }, 9 | subtract(a, b) { 10 | return a - b 11 | }, 12 | cube(num) { 13 | return num ** 3 14 | } 15 | } 16 | 17 | -------------------------------------------------------------------------------- /ep-39-functions-vs-methods/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Functions Vs Methods 8 | 9 | 10 | 11 |
12 |

Functions Vs Methods

13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /ep-39-functions-vs-methods/starter-code/script.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /ep-40_arrow-functions/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Arrow Function Expressions 8 | 9 | 10 | 11 |

Arrow Function Expressions

12 | 13 | -------------------------------------------------------------------------------- /ep-40_arrow-functions/final-code/script.js: -------------------------------------------------------------------------------- 1 | // // Function Declaration 2 | 3 | // function square(num){ 4 | // return num * num 5 | // } 6 | 7 | // // Function Expression 8 | 9 | // const square = function(num) { 10 | // return num * num 11 | // } 12 | 13 | // // Arrow Function Expression 14 | 15 | // const square = (num) => { 16 | // return num * num 17 | // } 18 | 19 | const square = num => num * num 20 | const add = (a, b) => a + b 21 | 22 | const random = () => ( 23 | Math.floor(Math.random() * 10) + 1 24 | ) 25 | 26 | // setTimeout(() => { 27 | // console.log('hiii'); 28 | // }, 2000) 29 | 30 | -------------------------------------------------------------------------------- /ep-40_arrow-functions/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Arrow Function Expressions 8 | 9 | 10 | 11 |

Arrow Function Expressions

12 | 13 | -------------------------------------------------------------------------------- /ep-40_arrow-functions/starter-code/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-40_arrow-functions/starter-code/script.js -------------------------------------------------------------------------------- /ep-41_for-of-vs-for-in-loop/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | for of Vs for in loops 8 | 9 | 10 | 11 |

for of Vs for in loops

12 | 13 | -------------------------------------------------------------------------------- /ep-41_for-of-vs-for-in-loop/final-code/script.js: -------------------------------------------------------------------------------- 1 | const fruits = ['banana', 'apple', 'peach', 'mango', 'grapes'] 2 | 3 | // for(let i = 0; i < fruits.length; i++) { 4 | // console.log(fruits[i]); 5 | // } 6 | 7 | // console.log('*************************'); 8 | 9 | // for(const fruit of fruits) { 10 | // console.log(fruit); 11 | // } 12 | 13 | // const user = 'Anurag Singh' 14 | 15 | 16 | // for(const letter of user) { 17 | // console.log(letter); 18 | // } 19 | 20 | const person = { 21 | firstName: 'John', 22 | lastName: 'Doe', 23 | age: 50, 24 | eyeColor: 'blue', 25 | city: 'Bangalore', 26 | } 27 | 28 | // for(const key in person) { 29 | // console.log(key, ': ' ,person[key]); 30 | // } 31 | 32 | const personKeys = Object.keys(person) 33 | const personValues = Object.values(person) 34 | const personEntries = Object.entries(person) 35 | // for (const key of personKeys) { 36 | // console.log(person[key]); 37 | // } 38 | 39 | 40 | -------------------------------------------------------------------------------- /ep-41_for-of-vs-for-in-loop/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | for of Vs for in loops 8 | 9 | 10 | 11 |

for of Vs for in loops

12 | 13 | -------------------------------------------------------------------------------- /ep-41_for-of-vs-for-in-loop/starter-code/script.js: -------------------------------------------------------------------------------- 1 | const fruits = ['banana', 'apple', 'peach', 'mango', 'grapes'] 2 | 3 | -------------------------------------------------------------------------------- /ep-42_forEach-array-method/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | forEach Array Method 8 | 9 | 10 | 11 |

forEach Array Method

12 | 13 | -------------------------------------------------------------------------------- /ep-42_forEach-array-method/final-code/script.js: -------------------------------------------------------------------------------- 1 | const fruits = ['banana', 'apple', 'peach', 'mango', 'grapes'] 2 | -------------------------------------------------------------------------------- /ep-42_forEach-array-method/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | forEach Array Method 8 | 9 | 10 | 11 |

forEach Array Method

12 | 13 | -------------------------------------------------------------------------------- /ep-42_forEach-array-method/starter-code/script.js: -------------------------------------------------------------------------------- 1 | const fruits = ['banana', 'apple', 'peach', 'mango', 'grapes'] 2 | 3 | 4 | // for(const fruit of fruits) { 5 | // console.log(fruit); 6 | // } 7 | 8 | 9 | // fruits.forEach(function(fruit) { 10 | // console.log(fruit); 11 | // }) 12 | 13 | // fruits.forEach((fruit) => { 14 | // console.log(fruit); 15 | // }) 16 | 17 | // function abc(el) { 18 | // console.log(el); 19 | // } 20 | 21 | // fruits.forEach(abc) -------------------------------------------------------------------------------- /ep-43_map-filter-reduce/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Map, Filter, Reduce 8 | 9 | 10 | 11 | 12 |
13 |

Map, Filter, Reduce

14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /ep-43_map-filter-reduce/script2.js: -------------------------------------------------------------------------------- 1 | const nums = [1, 2, 3, 4, 5] 2 | 3 | const sum = nums.reduce((accumulator, current, i) => { 4 | // console.log(i, current); 5 | // console.log(accumulator); 6 | return accumulator * current 7 | }, 0) -------------------------------------------------------------------------------- /ep-44_some-and-every/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Some and Every 8 | 9 | 10 | 11 |

Some and Every

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-44_some-and-every/script.js: -------------------------------------------------------------------------------- 1 | const evenNumbers = [0, 2, 10, 4, 61, 8] 2 | 3 | 4 | // const result = evenNumbers.some((num, i) => { 5 | // if(num % 2 === 1) { 6 | // console.log(i); 7 | // } 8 | // return num % 2 === 1 9 | // }) 10 | 11 | const result = evenNumbers.every((num) => { 12 | debugger 13 | return num % 2 === 0 14 | }) -------------------------------------------------------------------------------- /ep-45_arguments-keyword/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Arguments Keyword 8 | 9 | 10 | 11 |

Arguments Keyword

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-45_arguments-keyword/final-code/script.js: -------------------------------------------------------------------------------- 1 | // const add1 = () => { 2 | // let sum = 0 3 | // for (let i = 0; i < arguments.length; i++) { 4 | // sum = sum + arguments[i] 5 | // } 6 | // return sum 7 | // } 8 | 9 | const add3 = function () { 10 | let sum = 0 11 | for (let i = 0; i < arguments.length; i++) { 12 | sum = sum + arguments[i] 13 | } 14 | return sum 15 | } 16 | -------------------------------------------------------------------------------- /ep-45_arguments-keyword/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Arguments Keyword 8 | 9 | 10 | 11 |

Arguments Keyword

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-45_arguments-keyword/script.js: -------------------------------------------------------------------------------- 1 | // const add1 = () => { 2 | // let sum = 0 3 | // for (let i = 0; i < arguments.length; i++) { 4 | // sum = sum + arguments[i] 5 | // } 6 | // return sum 7 | // } 8 | 9 | const add3 = function () { 10 | let sum = 0 11 | for (let i = 0; i < arguments.length; i++) { 12 | sum = sum + arguments[i] 13 | } 14 | return sum 15 | } 16 | -------------------------------------------------------------------------------- /ep-45_arguments-keyword/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Arguments Keyword 8 | 9 | 10 | 11 |

Arguments Keyword

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-45_arguments-keyword/starter-code/script.js: -------------------------------------------------------------------------------- 1 | function add(a, b) { 2 | return a + b 3 | } -------------------------------------------------------------------------------- /ep-46_default-params/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Default Params 8 | 9 | 10 | 11 |

Default Params

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-46_default-params/final-code/script.js: -------------------------------------------------------------------------------- 1 | function multiply(a, b = 1) { 2 | return a * b 3 | } 4 | 5 | function rollADie(numberOfSides = 6) { 6 | return Math.floor(Math.random() * numberOfSides) + 1 7 | } 8 | 9 | -------------------------------------------------------------------------------- /ep-46_default-params/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Default Params 8 | 9 | 10 | 11 |

Default Params

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-46_default-params/starter-code/script.js: -------------------------------------------------------------------------------- 1 | function multiply(a, b) { 2 | return a * b 3 | } 4 | 5 | -------------------------------------------------------------------------------- /ep-47_spread-operator/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Spread Operator 8 | 9 | 10 | 11 |

Spread Operator

12 | 13 | -------------------------------------------------------------------------------- /ep-47_spread-operator/final-code/script.js: -------------------------------------------------------------------------------- 1 | const nums1 = [1, 2, 3, 4] 2 | const nums2 = [5, 6, 7, 8, 9] 3 | 4 | const myName = 'Anurag' 5 | 6 | const joinedArray = [...nums1, ...nums2, 10, 11, 12] 7 | 8 | const user = { 9 | name: 'Anurag', 10 | age: 25, 11 | } 12 | 13 | // const updatedUser = {...user, city: 'Bangalore'} 14 | 15 | function add() { 16 | console.log(arguments); 17 | let sum = 0 18 | for(let i = 0; i < arguments.length; i++) { 19 | sum = sum + arguments[i] 20 | } 21 | 22 | return sum 23 | } 24 | -------------------------------------------------------------------------------- /ep-47_spread-operator/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Spread Operator 8 | 9 | 10 | 11 |

Spread Operator

12 | 13 | -------------------------------------------------------------------------------- /ep-47_spread-operator/starter-code/script.js: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /ep-48_rest-params/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Rest Params 8 | 9 | 10 | 11 |

Rest Params

12 | 13 | -------------------------------------------------------------------------------- /ep-48_rest-params/final-code/script.js: -------------------------------------------------------------------------------- 1 | const nums1 = [1, 2, 3, 4] 2 | 3 | // function add(a, b, c, ...nums) { 4 | // console.log(a, b, c); 5 | // console.log('nums:', nums); 6 | // let sum = 0 7 | // for(let i = 0; i < nums.length; i++) { 8 | // sum = sum + nums[i] 9 | // } 10 | // return sum 11 | // } 12 | 13 | // function add() { 14 | // return [...arguments].reduce((acc, curr) => acc + curr) 15 | // } 16 | 17 | // function add() { 18 | // return Array.from(arguments).reduce((acc, curr) => acc + curr) 19 | // } 20 | 21 | function add(...nums) { 22 | return nums.reduce((acc, curr) => acc + curr) 23 | } 24 | 25 | const result = add(...nums1) 26 | -------------------------------------------------------------------------------- /ep-48_rest-params/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Rest Params 8 | 9 | 10 | 11 |

Rest Params

12 | 13 | -------------------------------------------------------------------------------- /ep-48_rest-params/starter-code/script.js: -------------------------------------------------------------------------------- 1 | const nums1 = [1, 2, 3, 4] 2 | 3 | function add(arguments) { 4 | console.log(arguments); 5 | let sum = 0 6 | for(let i = 0; i < arguments.length; i++) { 7 | sum = sum + arguments[i] 8 | } 9 | return sum 10 | } 11 | -------------------------------------------------------------------------------- /ep-49_destructuring-in-javascript/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Destructuring in JavaScript 8 | 9 | 10 | 11 |

Destructuring in JavaScript

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-49_destructuring-in-javascript/final-code/script.js: -------------------------------------------------------------------------------- 1 | const colors = ['red', 'green', 'yellow', 'pink', 'black', 'white'] 2 | 3 | // const color1 = colors[0] 4 | // const color2 = colors[1] 5 | // const color3 = colors[2] 6 | 7 | const [color1, color2, color3] = colors 8 | 9 | // const [,,,color4] = colors 10 | const { 3: color4, 5: color5 } = colors 11 | 12 | const user = { 13 | name: 'Anurag', 14 | age: 25, 15 | address: { 16 | city: 'Bangalore', 17 | state: 'Karnataka', 18 | }, 19 | } 20 | 21 | // const name = user.name 22 | // const age = user.age 23 | 24 | const { name, age } = user 25 | 26 | // const { name: username, age: userAge } = user 27 | 28 | // const { address: {city} } = user 29 | // const { address } = user 30 | // const { city } = address 31 | 32 | function intro({age, name}) { 33 | console.log(age, name); 34 | } 35 | // intro(user) 36 | function printColor([a, b,,g]) { 37 | console.log(a, b, g); 38 | } 39 | 40 | printColor(colors) 41 | 42 | 43 | -------------------------------------------------------------------------------- /ep-49_destructuring-in-javascript/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Destructuring in JavaScript 8 | 9 | 10 | 11 |

Destructuring in JavaScript

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-49_destructuring-in-javascript/starter-code/script.js: -------------------------------------------------------------------------------- 1 | const colors = ['red', 'green', 'yellow', 'pink', 'black'] 2 | 3 | const user = { 4 | name: 'Anurag', 5 | age: 25, 6 | address: { 7 | city: 'Bangalore', 8 | state: 'Karnataka', 9 | }, 10 | } 11 | -------------------------------------------------------------------------------- /ep-50_browser-object-model/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | BOM - Browser Object Model 8 | 9 | 10 | 11 |

BOM - Browser Object Model

12 | 13 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /ep-50_browser-object-model/final-code/script.js: -------------------------------------------------------------------------------- 1 | console.log('ljsdlfj'); 2 | // location.href = 'https://developer.mozilla.org/en-US/' 3 | -------------------------------------------------------------------------------- /ep-50_browser-object-model/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | BOM - Browser Object Model 8 | 9 | 10 | 11 |

BOM - Browser Object Model

12 | 13 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /ep-50_browser-object-model/starter-code/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-50_browser-object-model/starter-code/script.js -------------------------------------------------------------------------------- /ep-51_document-object-model/final-code/images/css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-51_document-object-model/final-code/images/css.png -------------------------------------------------------------------------------- /ep-51_document-object-model/final-code/images/html-css-javascript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-51_document-object-model/final-code/images/html-css-javascript.png -------------------------------------------------------------------------------- /ep-51_document-object-model/final-code/images/javascript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-51_document-object-model/final-code/images/javascript.png -------------------------------------------------------------------------------- /ep-51_document-object-model/final-code/script.js: -------------------------------------------------------------------------------- 1 | function sayHi() { 2 | document.body.children[4].src = 3 | 'https://cdn.pixabay.com/photo/2014/02/27/16/10/flowers-276014__340.jpg' 4 | } 5 | -------------------------------------------------------------------------------- /ep-51_document-object-model/starter-code/images/css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-51_document-object-model/starter-code/images/css.png -------------------------------------------------------------------------------- /ep-51_document-object-model/starter-code/images/html-css-javascript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-51_document-object-model/starter-code/images/html-css-javascript.png -------------------------------------------------------------------------------- /ep-51_document-object-model/starter-code/images/javascript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-51_document-object-model/starter-code/images/javascript.png -------------------------------------------------------------------------------- /ep-51_document-object-model/starter-code/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-51_document-object-model/starter-code/script.js -------------------------------------------------------------------------------- /ep-52_selecting-elements-in-javascript/final-code/images/css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-52_selecting-elements-in-javascript/final-code/images/css.png -------------------------------------------------------------------------------- /ep-52_selecting-elements-in-javascript/final-code/images/html-css-javascript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-52_selecting-elements-in-javascript/final-code/images/html-css-javascript.png -------------------------------------------------------------------------------- /ep-52_selecting-elements-in-javascript/final-code/images/javascript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-52_selecting-elements-in-javascript/final-code/images/javascript.png -------------------------------------------------------------------------------- /ep-52_selecting-elements-in-javascript/final-code/style.css: -------------------------------------------------------------------------------- 1 | #css-image { 2 | border: 4px solid green; 3 | } 4 | 5 | [alt="javascript roadmap"] { 6 | border: 4px solid hotpink; 7 | } -------------------------------------------------------------------------------- /ep-52_selecting-elements-in-javascript/starter-code/images/css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-52_selecting-elements-in-javascript/starter-code/images/css.png -------------------------------------------------------------------------------- /ep-52_selecting-elements-in-javascript/starter-code/images/html-css-javascript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-52_selecting-elements-in-javascript/starter-code/images/html-css-javascript.png -------------------------------------------------------------------------------- /ep-52_selecting-elements-in-javascript/starter-code/images/javascript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-52_selecting-elements-in-javascript/starter-code/images/javascript.png -------------------------------------------------------------------------------- /ep-52_selecting-elements-in-javascript/starter-code/script.js: -------------------------------------------------------------------------------- 1 | function sayHi() { 2 | document.body.children[4].src = 3 | 'https://cdn.pixabay.com/photo/2014/02/27/16/10/flowers-276014__340.jpg' 4 | } 5 | -------------------------------------------------------------------------------- /ep-53_difference-between-innerText-innerHTML-and-textContent/final-code/images/css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-53_difference-between-innerText-innerHTML-and-textContent/final-code/images/css.png -------------------------------------------------------------------------------- /ep-53_difference-between-innerText-innerHTML-and-textContent/final-code/images/html-css-javascript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-53_difference-between-innerText-innerHTML-and-textContent/final-code/images/html-css-javascript.png -------------------------------------------------------------------------------- /ep-53_difference-between-innerText-innerHTML-and-textContent/final-code/images/javascript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-53_difference-between-innerText-innerHTML-and-textContent/final-code/images/javascript.png -------------------------------------------------------------------------------- /ep-53_difference-between-innerText-innerHTML-and-textContent/final-code/script.js: -------------------------------------------------------------------------------- 1 | const h1 = document.querySelector('h1') 2 | const paragraph = document.querySelector('p') 3 | 4 | // console.log(paragraph.innerHTML); 5 | 6 | // paragraph.innerHTML = '

Hiii

' -------------------------------------------------------------------------------- /ep-53_difference-between-innerText-innerHTML-and-textContent/final-code/style.css: -------------------------------------------------------------------------------- 1 | #css-image { 2 | border: 4px solid green; 3 | } 4 | 5 | [alt="javascript roadmap"] { 6 | border: 4px solid hotpink; 7 | } 8 | 9 | p b { 10 | /* display: none; */ 11 | visibility: hidden; 12 | /* opacity: 0; */ 13 | /* pointer-events: none; */ 14 | } -------------------------------------------------------------------------------- /ep-53_difference-between-innerText-innerHTML-and-textContent/starter-code/images/css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-53_difference-between-innerText-innerHTML-and-textContent/starter-code/images/css.png -------------------------------------------------------------------------------- /ep-53_difference-between-innerText-innerHTML-and-textContent/starter-code/images/html-css-javascript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-53_difference-between-innerText-innerHTML-and-textContent/starter-code/images/html-css-javascript.png -------------------------------------------------------------------------------- /ep-53_difference-between-innerText-innerHTML-and-textContent/starter-code/images/javascript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-53_difference-between-innerText-innerHTML-and-textContent/starter-code/images/javascript.png -------------------------------------------------------------------------------- /ep-53_difference-between-innerText-innerHTML-and-textContent/starter-code/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-53_difference-between-innerText-innerHTML-and-textContent/starter-code/script.js -------------------------------------------------------------------------------- /ep-53_difference-between-innerText-innerHTML-and-textContent/starter-code/style.css: -------------------------------------------------------------------------------- 1 | #css-image { 2 | border: 4px solid green; 3 | } 4 | 5 | [alt="javascript roadmap"] { 6 | border: 4px solid hotpink; 7 | } -------------------------------------------------------------------------------- /ep-54_getAttribut-and-setAttribute/final-code/images/css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-54_getAttribut-and-setAttribute/final-code/images/css.png -------------------------------------------------------------------------------- /ep-54_getAttribut-and-setAttribute/final-code/images/html-css-javascript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-54_getAttribut-and-setAttribute/final-code/images/html-css-javascript.png -------------------------------------------------------------------------------- /ep-54_getAttribut-and-setAttribute/final-code/images/javascript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-54_getAttribut-and-setAttribute/final-code/images/javascript.png -------------------------------------------------------------------------------- /ep-54_getAttribut-and-setAttribute/final-code/script.js: -------------------------------------------------------------------------------- 1 | const h1 = document.querySelector('h1') 2 | const paragraph = document.querySelector('p') 3 | 4 | // console.log(paragraph.innerHTML); 5 | 6 | // paragraph.innerHTML = '

Hiii

' -------------------------------------------------------------------------------- /ep-54_getAttribut-and-setAttribute/final-code/style.css: -------------------------------------------------------------------------------- 1 | #css-image { 2 | border: 4px solid green; 3 | } 4 | 5 | [alt="javascript roadmap"] { 6 | border: 4px solid hotpink; 7 | } 8 | 9 | p b { 10 | /* display: none; */ 11 | /* visibility: hidden; */ 12 | /* opacity: 0; */ 13 | /* pointer-events: none; */ 14 | } 15 | 16 | [procodrr="akash"] { 17 | color: orangered; 18 | } -------------------------------------------------------------------------------- /ep-54_getAttribut-and-setAttribute/starter-code/images/css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-54_getAttribut-and-setAttribute/starter-code/images/css.png -------------------------------------------------------------------------------- /ep-54_getAttribut-and-setAttribute/starter-code/images/html-css-javascript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-54_getAttribut-and-setAttribute/starter-code/images/html-css-javascript.png -------------------------------------------------------------------------------- /ep-54_getAttribut-and-setAttribute/starter-code/images/javascript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-54_getAttribut-and-setAttribute/starter-code/images/javascript.png -------------------------------------------------------------------------------- /ep-54_getAttribut-and-setAttribute/starter-code/script.js: -------------------------------------------------------------------------------- 1 | const h1 = document.querySelector('h1') 2 | const paragraph = document.querySelector('p') 3 | 4 | // console.log(paragraph.innerHTML); 5 | 6 | // paragraph.innerHTML = '

Hiii

' -------------------------------------------------------------------------------- /ep-54_getAttribut-and-setAttribute/starter-code/style.css: -------------------------------------------------------------------------------- 1 | #css-image { 2 | border: 4px solid green; 3 | } 4 | 5 | [alt="javascript roadmap"] { 6 | border: 4px solid hotpink; 7 | } 8 | 9 | p b { 10 | /* display: none; */ 11 | /* visibility: hidden; */ 12 | /* opacity: 0; */ 13 | /* pointer-events: none; */ 14 | } -------------------------------------------------------------------------------- /ep-55_how-to-change-styles-using-js/final-code/images/css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-55_how-to-change-styles-using-js/final-code/images/css.png -------------------------------------------------------------------------------- /ep-55_how-to-change-styles-using-js/final-code/images/html-css-javascript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-55_how-to-change-styles-using-js/final-code/images/html-css-javascript.png -------------------------------------------------------------------------------- /ep-55_how-to-change-styles-using-js/final-code/images/javascript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-55_how-to-change-styles-using-js/final-code/images/javascript.png -------------------------------------------------------------------------------- /ep-55_how-to-change-styles-using-js/final-code/style.css: -------------------------------------------------------------------------------- 1 | #css-image { 2 | border: 4px solid green; 3 | } 4 | 5 | .css-image { 6 | color: red; 7 | } 8 | 9 | [alt="javascript roadmap"] { 10 | border: 4px solid hotpink; 11 | } 12 | 13 | p b { 14 | /* display: none; */ 15 | /* visibility: hidden; */ 16 | /* opacity: 0; */ 17 | /* pointer-events: none; */ 18 | } 19 | 20 | [procodrr="akash"] { 21 | color: orangered; 22 | } 23 | 24 | .green-link { 25 | color: teal; 26 | text-decoration-line: none; 27 | font-weight: 700; 28 | font-family: cursive; 29 | font-size: 18px; 30 | } 31 | 32 | .wavy-link { 33 | text-decoration-line: underline; 34 | text-decoration-style: wavy; 35 | } 36 | 37 | .my-link { 38 | border: 2px solid green; 39 | } 40 | 41 | .hidden { 42 | display: none; 43 | } -------------------------------------------------------------------------------- /ep-55_how-to-change-styles-using-js/starter-code/images/css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-55_how-to-change-styles-using-js/starter-code/images/css.png -------------------------------------------------------------------------------- /ep-55_how-to-change-styles-using-js/starter-code/images/html-css-javascript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-55_how-to-change-styles-using-js/starter-code/images/html-css-javascript.png -------------------------------------------------------------------------------- /ep-55_how-to-change-styles-using-js/starter-code/images/javascript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-55_how-to-change-styles-using-js/starter-code/images/javascript.png -------------------------------------------------------------------------------- /ep-55_how-to-change-styles-using-js/starter-code/script.js: -------------------------------------------------------------------------------- 1 | const h1 = document.querySelector('h1') 2 | const paragraph = document.querySelector('p') 3 | 4 | // console.log(paragraph.innerHTML); 5 | 6 | // paragraph.innerHTML = '

Hiii

' -------------------------------------------------------------------------------- /ep-55_how-to-change-styles-using-js/starter-code/style.css: -------------------------------------------------------------------------------- 1 | #css-image { 2 | border: 4px solid green; 3 | } 4 | 5 | [alt="javascript roadmap"] { 6 | border: 4px solid hotpink; 7 | } 8 | 9 | p b { 10 | /* display: none; */ 11 | /* visibility: hidden; */ 12 | /* opacity: 0; */ 13 | /* pointer-events: none; */ 14 | } 15 | 16 | [procodrr="akash"] { 17 | color: orangered; 18 | } -------------------------------------------------------------------------------- /ep-56_accessing-parent-sibling-and-children-elements/final-code/images/css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-56_accessing-parent-sibling-and-children-elements/final-code/images/css.png -------------------------------------------------------------------------------- /ep-56_accessing-parent-sibling-and-children-elements/final-code/images/html-css-javascript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-56_accessing-parent-sibling-and-children-elements/final-code/images/html-css-javascript.png -------------------------------------------------------------------------------- /ep-56_accessing-parent-sibling-and-children-elements/final-code/images/javascript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-56_accessing-parent-sibling-and-children-elements/final-code/images/javascript.png -------------------------------------------------------------------------------- /ep-56_accessing-parent-sibling-and-children-elements/final-code/style.css: -------------------------------------------------------------------------------- 1 | #css-image { 2 | border: 4px solid green; 3 | } 4 | 5 | .css-image { 6 | color: red; 7 | } 8 | 9 | [alt="javascript roadmap"] { 10 | border: 4px solid hotpink; 11 | } 12 | 13 | p b { 14 | /* display: none; */ 15 | /* visibility: hidden; */ 16 | /* opacity: 0; */ 17 | /* pointer-events: none; */ 18 | } 19 | 20 | [procodrr="akash"] { 21 | color: orangered; 22 | } 23 | 24 | .green-link { 25 | color: teal; 26 | text-decoration-line: none; 27 | font-weight: 700; 28 | font-family: cursive; 29 | font-size: 18px; 30 | } 31 | 32 | .wavy-link { 33 | text-decoration-line: underline; 34 | text-decoration-style: wavy; 35 | } 36 | 37 | .my-link { 38 | border: 2px solid green; 39 | } 40 | 41 | .hidden { 42 | display: none; 43 | } -------------------------------------------------------------------------------- /ep-56_accessing-parent-sibling-and-children-elements/starter-code/images/css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-56_accessing-parent-sibling-and-children-elements/starter-code/images/css.png -------------------------------------------------------------------------------- /ep-56_accessing-parent-sibling-and-children-elements/starter-code/images/html-css-javascript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-56_accessing-parent-sibling-and-children-elements/starter-code/images/html-css-javascript.png -------------------------------------------------------------------------------- /ep-56_accessing-parent-sibling-and-children-elements/starter-code/images/javascript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-56_accessing-parent-sibling-and-children-elements/starter-code/images/javascript.png -------------------------------------------------------------------------------- /ep-56_accessing-parent-sibling-and-children-elements/starter-code/style.css: -------------------------------------------------------------------------------- 1 | #css-image { 2 | border: 4px solid green; 3 | } 4 | 5 | .css-image { 6 | color: red; 7 | } 8 | 9 | [alt="javascript roadmap"] { 10 | border: 4px solid hotpink; 11 | } 12 | 13 | p b { 14 | /* display: none; */ 15 | /* visibility: hidden; */ 16 | /* opacity: 0; */ 17 | /* pointer-events: none; */ 18 | } 19 | 20 | [procodrr="akash"] { 21 | color: orangered; 22 | } 23 | 24 | .green-link { 25 | color: teal; 26 | text-decoration-line: none; 27 | font-weight: 700; 28 | font-family: cursive; 29 | font-size: 18px; 30 | } 31 | 32 | .wavy-link { 33 | text-decoration-line: underline; 34 | text-decoration-style: wavy; 35 | } 36 | 37 | .my-link { 38 | border: 2px solid green; 39 | } 40 | 41 | .hidden { 42 | display: none; 43 | } -------------------------------------------------------------------------------- /ep-57_element-vs-node/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Element Vs Node 8 | 9 | 10 | 11 |

Element Vs Node

12 | Hello World 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /ep-57_element-vs-node/final-code/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-57_element-vs-node/final-code/script.js -------------------------------------------------------------------------------- /ep-57_element-vs-node/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Element Vs Node 8 | 9 | 10 | 11 |

Element Vs Node

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-57_element-vs-node/starter-code/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-57_element-vs-node/starter-code/script.js -------------------------------------------------------------------------------- /ep-58_append-child-and-append/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | appendChild & append 8 | 9 | 10 | 11 | 12 |

appendChild & append

13 |
14 |
1
15 | 16 |
17 | 18 | 19 | -------------------------------------------------------------------------------- /ep-58_append-child-and-append/final-code/script.js: -------------------------------------------------------------------------------- 1 | const h1 = document.querySelector('h1') 2 | const container = document.querySelector(".container") 3 | const card = document.querySelector('.card') 4 | 5 | // container.appendChild(h1) 6 | // container.appendChild(h1.cloneNode(true)) 7 | 8 | // for (let i = 2; i <=100; i++) { 9 | // const newCard = card.cloneNode() 10 | // newCard.innerText = i 11 | // container.append(newCard) 12 | // } -------------------------------------------------------------------------------- /ep-58_append-child-and-append/final-code/style.css: -------------------------------------------------------------------------------- 1 | .container { 2 | color: green; 3 | display: flex; 4 | flex-wrap: wrap; 5 | gap: 8px; 6 | } 7 | 8 | .card { 9 | width: 100px; 10 | height: 120px; 11 | background-color: pink; 12 | display: flex; 13 | align-items: center; 14 | justify-content: center; 15 | border-radius: 4px; 16 | font-size: 36px; 17 | } -------------------------------------------------------------------------------- /ep-58_append-child-and-append/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | appendChild & append 8 | 9 | 10 | 11 | 12 |

appendChild & append

13 |
14 |
1
15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /ep-58_append-child-and-append/starter-code/script.js: -------------------------------------------------------------------------------- 1 | const container = document.querySelector(".container") 2 | const card = document.querySelector('.card') -------------------------------------------------------------------------------- /ep-58_append-child-and-append/starter-code/style.css: -------------------------------------------------------------------------------- 1 | .container { 2 | color: green; 3 | display: flex; 4 | flex-wrap: wrap; 5 | gap: 8px; 6 | } 7 | 8 | .card { 9 | width: 70px; 10 | height: 80px; 11 | background-color: pink; 12 | display: flex; 13 | align-items: center; 14 | justify-content: center; 15 | border-radius: 4px; 16 | font-size: 36px; 17 | } -------------------------------------------------------------------------------- /ep-59_creating-element-in-javascript/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | document.createElement 8 | 9 | 10 | 11 | 12 |

document.createElement

13 |
14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /ep-59_creating-element-in-javascript/final-code/script.js: -------------------------------------------------------------------------------- 1 | const h1 = document.querySelector('h1') 2 | const container = document.querySelector('.container') 3 | // const firstImage = document.querySelector("img") 4 | 5 | const paragraph = document.createElement('p') 6 | // paragraph.innerText = 'Hello' 7 | // paragraph.classList.add('my-para') 8 | 9 | // container.append(paragraph) 10 | 11 | // container.appendChild(h1) 12 | // container.appendChild(h1.cloneNode(true)) 13 | 14 | for (let i = 1; i <= 100; i++) { 15 | const newImg = document.createElement('img') 16 | newImg.src = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${i}.png` 17 | container.append(newImg) 18 | } 19 | 20 | // const newImage = document.createElement('img') 21 | 22 | // newImage.src = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png` 23 | 24 | // container.append(newImage) 25 | -------------------------------------------------------------------------------- /ep-59_creating-element-in-javascript/final-code/script2.js: -------------------------------------------------------------------------------- 1 | const container = document.querySelector('.container') 2 | 3 | for(let i = 1; i <= 100; i++) { 4 | const imgContainer = document.createElement('div') 5 | imgContainer.classList.add('img-container') 6 | 7 | const newImage = document.createElement('img') 8 | newImage.src = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${i}.png` 9 | 10 | const paragraph = document.createElement('p') 11 | paragraph.innerText = i 12 | 13 | imgContainer.append(newImage, paragraph) 14 | container.append(imgContainer) 15 | } 16 | 17 | // let myHTML = `` 18 | 19 | // for (let i = 1; i <= 100; i++) { 20 | // myHTML += ` 21 | //
22 | // 23 | //

${i}

24 | //
25 | // ` 26 | // } 27 | 28 | // container.innerHTML = myHTML -------------------------------------------------------------------------------- /ep-59_creating-element-in-javascript/final-code/style.css: -------------------------------------------------------------------------------- 1 | .container { 2 | color: green; 3 | display: flex; 4 | flex-wrap: wrap; 5 | gap: 8px; 6 | } 7 | 8 | img { 9 | width: 60px; 10 | } 11 | 12 | .img-container { 13 | text-align: center; 14 | } 15 | 16 | .img-container p { 17 | margin: 0; 18 | } -------------------------------------------------------------------------------- /ep-59_creating-element-in-javascript/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | document.createElement 8 | 9 | 10 | 11 | 12 |

document.createElement

13 |
14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /ep-59_creating-element-in-javascript/starter-code/script.js: -------------------------------------------------------------------------------- 1 | const h1 = document.querySelector('h1') 2 | const container = document.querySelector(".container") 3 | const card = document.querySelector('.card') 4 | 5 | // container.appendChild(h1) 6 | // container.appendChild(h1.cloneNode(true)) 7 | 8 | // for (let i = 2; i <=100; i++) { 9 | // const newCard = card.cloneNode() 10 | // newCard.innerText = i 11 | // container.append(newCard) 12 | // } -------------------------------------------------------------------------------- /ep-59_creating-element-in-javascript/starter-code/style.css: -------------------------------------------------------------------------------- 1 | .container { 2 | color: green; 3 | display: flex; 4 | flex-wrap: wrap; 5 | gap: 8px; 6 | } 7 | 8 | img { 9 | width: 50px; 10 | } -------------------------------------------------------------------------------- /ep-60_removeChild-vs-remove/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | removeChild Vs removeChild 8 | 9 | 10 | 11 | 12 |

removeChild Vs removeChild

13 |
14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /ep-60_removeChild-vs-remove/final-code/script.js: -------------------------------------------------------------------------------- 1 | const h1 = document.querySelector('h1') 2 | const container = document.querySelector('.container') 3 | // const firstImage = document.querySelector("img") 4 | 5 | const paragraph = document.createElement('p') 6 | // paragraph.innerText = 'Hello' 7 | // paragraph.classList.add('my-para') 8 | 9 | // container.append(paragraph) 10 | 11 | // container.appendChild(h1) 12 | // container.appendChild(h1.cloneNode(true)) 13 | 14 | for (let i = 1; i <= 100; i++) { 15 | const newImg = document.createElement('img') 16 | newImg.src = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${i}.png` 17 | container.append(newImg) 18 | } 19 | 20 | // const newImage = document.createElement('img') 21 | 22 | // newImage.src = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png` 23 | 24 | // container.append(newImage) 25 | 26 | -------------------------------------------------------------------------------- /ep-60_removeChild-vs-remove/final-code/script2.js: -------------------------------------------------------------------------------- 1 | let container = document.querySelector('.container') 2 | 3 | for(let i = 1; i <= 100; i++) { 4 | const imgContainer = document.createElement('div') 5 | imgContainer.classList.add('img-container') 6 | 7 | const newImage = document.createElement('img') 8 | newImage.src = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${i}.png` 9 | 10 | const paragraph = document.createElement('p') 11 | paragraph.innerText = i 12 | 13 | imgContainer.append(newImage, paragraph) 14 | container.append(imgContainer) 15 | } 16 | 17 | // let myHTML = `` 18 | 19 | // for (let i = 1; i <= 100; i++) { 20 | // myHTML += ` 21 | //
22 | // 23 | //

${i}

24 | //
25 | // ` 26 | // } 27 | 28 | // container.innerHTML = myHTML 29 | 30 | const myImg = document.querySelector("body > div > div:nth-child(5)") 31 | -------------------------------------------------------------------------------- /ep-60_removeChild-vs-remove/final-code/style.css: -------------------------------------------------------------------------------- 1 | .container { 2 | color: green; 3 | display: flex; 4 | flex-wrap: wrap; 5 | gap: 8px; 6 | } 7 | 8 | img { 9 | width: 60px; 10 | } 11 | 12 | .img-container { 13 | text-align: center; 14 | } 15 | 16 | .img-container p { 17 | margin: 0; 18 | } -------------------------------------------------------------------------------- /ep-60_removeChild-vs-remove/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | removeChild Vs removeChild 8 | 9 | 10 | 11 | 12 |

removeChild Vs removeChild

13 |
14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /ep-60_removeChild-vs-remove/starter-code/script.js: -------------------------------------------------------------------------------- 1 | const h1 = document.querySelector('h1') 2 | const container = document.querySelector('.container') 3 | // const firstImage = document.querySelector("img") 4 | 5 | const paragraph = document.createElement('p') 6 | // paragraph.innerText = 'Hello' 7 | // paragraph.classList.add('my-para') 8 | 9 | // container.append(paragraph) 10 | 11 | // container.appendChild(h1) 12 | // container.appendChild(h1.cloneNode(true)) 13 | 14 | for (let i = 1; i <= 100; i++) { 15 | const newImg = document.createElement('img') 16 | newImg.src = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${i}.png` 17 | container.append(newImg) 18 | } 19 | 20 | // const newImage = document.createElement('img') 21 | 22 | // newImage.src = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png` 23 | 24 | // container.append(newImage) 25 | -------------------------------------------------------------------------------- /ep-60_removeChild-vs-remove/starter-code/script2.js: -------------------------------------------------------------------------------- 1 | const container = document.querySelector('.container') 2 | 3 | for(let i = 1; i <= 100; i++) { 4 | const imgContainer = document.createElement('div') 5 | imgContainer.classList.add('img-container') 6 | 7 | const newImage = document.createElement('img') 8 | newImage.src = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${i}.png` 9 | 10 | const paragraph = document.createElement('p') 11 | paragraph.innerText = i 12 | 13 | imgContainer.append(newImage, paragraph) 14 | container.append(imgContainer) 15 | } 16 | 17 | // let myHTML = `` 18 | 19 | // for (let i = 1; i <= 100; i++) { 20 | // myHTML += ` 21 | //
22 | // 23 | //

${i}

24 | //
25 | // ` 26 | // } 27 | 28 | // container.innerHTML = myHTML -------------------------------------------------------------------------------- /ep-60_removeChild-vs-remove/starter-code/style.css: -------------------------------------------------------------------------------- 1 | .container { 2 | color: green; 3 | display: flex; 4 | flex-wrap: wrap; 5 | gap: 8px; 6 | } 7 | 8 | img { 9 | width: 60px; 10 | } 11 | 12 | .img-container { 13 | text-align: center; 14 | } 15 | 16 | .img-container p { 17 | margin: 0; 18 | } -------------------------------------------------------------------------------- /ep-61_adding-event-listeners/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Adding Event Listeners 8 | 9 | 10 | 11 | 12 |

Adding Event Listeners

13 |
14 |
+
15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /ep-61_adding-event-listeners/final-code/script.js: -------------------------------------------------------------------------------- 1 | const h1 = document.querySelector('h1') 2 | const card = document.querySelector('.card') 3 | const container = document.querySelector('.container') 4 | 5 | function sayHi() { 6 | console.log('Hiiiii'); 7 | } 8 | 9 | function secondSayHi() { 10 | console.log('Second Hi'); 11 | } 12 | 13 | // h1.onclick = sayHi 14 | // h1.onclick = secondSayHi 15 | 16 | 17 | // h1.addEventListener('click', sayHi) 18 | // h1.addEventListener('click', secondSayHi) 19 | 20 | let count = 1 21 | 22 | card.addEventListener('click', () => { 23 | const newCard = document.createElement('div') 24 | newCard.classList.add('card') 25 | // const newCard = card.cloneNode() 26 | // newCard.classList.remove('add-card') 27 | console.log(newCard) 28 | newCard.innerText = count++ 29 | container.append(newCard) 30 | }) -------------------------------------------------------------------------------- /ep-61_adding-event-listeners/final-code/style.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | background-color: brown; 3 | } 4 | 5 | .container { 6 | color: green; 7 | display: flex; 8 | flex-wrap: wrap; 9 | gap: 8px; 10 | } 11 | 12 | .card { 13 | width: 100px; 14 | height: 120px; 15 | background-color: pink; 16 | display: flex; 17 | align-items: center; 18 | justify-content: center; 19 | border-radius: 4px; 20 | font-size: 36px; 21 | } 22 | 23 | .add-card { 24 | cursor: pointer; 25 | background-color: cadetblue; 26 | color: black; 27 | position: absolute; 28 | bottom: 33px; 29 | right: 32px; 30 | border-radius: 100%; 31 | height: 50px; 32 | width: 50px; 33 | line-height: 10px; 34 | } -------------------------------------------------------------------------------- /ep-61_adding-event-listeners/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Adding Event Listeners 8 | 9 | 10 | 11 | 12 |

Adding Event Listeners

13 |
14 |
1
15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /ep-61_adding-event-listeners/starter-code/script.js: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /ep-61_adding-event-listeners/starter-code/style.css: -------------------------------------------------------------------------------- 1 | .container { 2 | color: green; 3 | display: flex; 4 | flex-wrap: wrap; 5 | gap: 8px; 6 | } 7 | 8 | .card { 9 | width: 100px; 10 | height: 120px; 11 | background-color: pink; 12 | display: flex; 13 | align-items: center; 14 | justify-content: center; 15 | border-radius: 4px; 16 | font-size: 36px; 17 | } -------------------------------------------------------------------------------- /ep-62_form-events-and-event-object/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Form Events and Event Object 8 | 9 | 10 | 11 |

Form Events and Event Object

12 |
13 | 14 | 15 | 16 |
17 |

hi

18 | 19 | 20 | -------------------------------------------------------------------------------- /ep-62_form-events-and-event-object/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Form Events and Event Object 8 | 9 | 10 | 11 |

Form Events and Event Object

12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /ep-62_form-events-and-event-object/starter-code/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-62_form-events-and-event-object/starter-code/script.js -------------------------------------------------------------------------------- /ep-63_keyboard-events/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Keyboard Events 8 | 9 | 10 | 11 |

Keyboard Events

12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /ep-63_keyboard-events/final-code/script.js: -------------------------------------------------------------------------------- 1 | // const h1 = document.querySelector('h1') 2 | // const input = document.querySelector('input') 3 | 4 | // window.addEventListener('keypress', (e) => { 5 | // console.log('Code: ',e.code); 6 | // console.log('Value: ', e.key); 7 | // }) 8 | 9 | // window.addEventListener('keyup', (e) => { 10 | // console.log('Code: ',e.code); 11 | // console.log('Value: ', e.key); 12 | // }) 13 | 14 | window.addEventListener('keydown', (e) => { 15 | console.log('Code: ',e.code); 16 | console.log('Value: ', e.key); 17 | }) -------------------------------------------------------------------------------- /ep-63_keyboard-events/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Keyboard Events 8 | 9 | 10 | 11 |

Keyboard Events

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-63_keyboard-events/starter-code/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-63_keyboard-events/starter-code/script.js -------------------------------------------------------------------------------- /ep-64_mouse-events/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Adding Event Listeners 8 | 9 | 10 | 11 | 12 |

Adding Event Listeners

13 |
14 |
+
15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /ep-64_mouse-events/final-code/style.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | background-color: brown; 3 | } 4 | 5 | .container { 6 | color: green; 7 | display: flex; 8 | flex-wrap: wrap; 9 | gap: 8px; 10 | } 11 | 12 | .card { 13 | width: 100px; 14 | height: 120px; 15 | background-color: pink; 16 | display: flex; 17 | align-items: center; 18 | justify-content: center; 19 | border-radius: 4px; 20 | font-size: 36px; 21 | } 22 | 23 | .add-card { 24 | cursor: pointer; 25 | background-color: cadetblue; 26 | color: black; 27 | position: absolute; 28 | bottom: 33px; 29 | right: 32px; 30 | border-radius: 100%; 31 | height: 50px; 32 | width: 50px; 33 | line-height: 10px; 34 | } -------------------------------------------------------------------------------- /ep-64_mouse-events/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Adding Event Listeners 8 | 9 | 10 | 11 | 12 |

Adding Event Listeners

13 |
14 |
+
15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /ep-64_mouse-events/starter-code/script.js: -------------------------------------------------------------------------------- 1 | const h1 = document.querySelector('h1') 2 | const card = document.querySelector('.card') 3 | const container = document.querySelector('.container') 4 | 5 | let count = 0 6 | 7 | card.addEventListener('click', () => { 8 | const newCard = document.createElement('div') 9 | newCard.classList.add('card') 10 | newCard.innerText = count++ 11 | container.append(newCard) 12 | }) -------------------------------------------------------------------------------- /ep-64_mouse-events/starter-code/style.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | background-color: brown; 3 | } 4 | 5 | .container { 6 | color: green; 7 | display: flex; 8 | flex-wrap: wrap; 9 | gap: 8px; 10 | } 11 | 12 | .card { 13 | width: 100px; 14 | height: 120px; 15 | background-color: pink; 16 | display: flex; 17 | align-items: center; 18 | justify-content: center; 19 | border-radius: 4px; 20 | font-size: 36px; 21 | } 22 | 23 | .add-card { 24 | cursor: pointer; 25 | background-color: cadetblue; 26 | color: black; 27 | position: absolute; 28 | bottom: 33px; 29 | right: 32px; 30 | border-radius: 100%; 31 | height: 50px; 32 | width: 50px; 33 | line-height: 10px; 34 | } -------------------------------------------------------------------------------- /ep-65_event-bubbling-and-capturing/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Event Bubbling and Capturing 8 | 9 | 10 | 11 | 12 |

Event Bubbling and Capturing

13 |
14 |
15 |
16 |
17 |
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /ep-65_event-bubbling-and-capturing/final-code/script.js: -------------------------------------------------------------------------------- 1 | const green = document.querySelector('.green') 2 | const pink = document.querySelector('.pink') 3 | const blue = document.querySelector('.blue') 4 | 5 | 6 | window.addEventListener('click', (e) => { 7 | console.log('6. Window Event Listener'); 8 | }, {capture: false}) 9 | 10 | document.addEventListener('click', (e) => { 11 | console.log('5. Document Event Listener'); 12 | }, {capture: false}) 13 | 14 | document.body.addEventListener('click', (e) => { 15 | console.log('4. Body Event Listener'); 16 | }, {capture: false}) 17 | 18 | green.addEventListener('click', (e) => { 19 | console.log('3. Green Event Listener'); 20 | }, {capture: false}) 21 | 22 | pink.addEventListener('click', (e) => { 23 | console.log('2. Pink Event Listener'); 24 | }, {capture: false}) 25 | 26 | blue.addEventListener('click', (e) => { 27 | console.log('1. Blue Event Listener'); 28 | }, {capture: false}) 29 | 30 | // blue.addEventListener('click', (e) => { 31 | // console.log('1. Blue Event Listener'); 32 | // }, {once: true}) 33 | -------------------------------------------------------------------------------- /ep-65_event-bubbling-and-capturing/final-code/style.css: -------------------------------------------------------------------------------- 1 | div { 2 | display: flex; 3 | align-items: center; 4 | justify-content: center; 5 | } 6 | 7 | .green { 8 | width: 400px; 9 | height: 300px; 10 | background-color: green; 11 | } 12 | 13 | .pink { 14 | width: 300px; 15 | height: 200px; 16 | background-color: hotpink; 17 | } 18 | 19 | .blue { 20 | width: 200px; 21 | height: 100px; 22 | background-color: skyblue; 23 | } -------------------------------------------------------------------------------- /ep-65_event-bubbling-and-capturing/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Event Bubbling and Capturing 8 | 9 | 10 | 11 | 12 |

Event Bubbling and Capturing

13 | 14 |
15 |
16 |
17 |
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /ep-65_event-bubbling-and-capturing/starter-code/script.js: -------------------------------------------------------------------------------- 1 | const green = document.querySelector('.green') 2 | const pink = document.querySelector('.pink') 3 | const blue = document.querySelector('.blue') 4 | -------------------------------------------------------------------------------- /ep-65_event-bubbling-and-capturing/starter-code/style.css: -------------------------------------------------------------------------------- 1 | div { 2 | display: flex; 3 | align-items: center; 4 | justify-content: center; 5 | } 6 | 7 | .green { 8 | width: 400px; 9 | height: 300px; 10 | background-color: green; 11 | } 12 | 13 | .pink { 14 | width: 300px; 15 | height: 200px; 16 | background-color: hotpink; 17 | } 18 | 19 | .blue { 20 | width: 200px; 21 | height: 100px; 22 | background-color: skyblue; 23 | } -------------------------------------------------------------------------------- /ep-66_event-simulator/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Event Simulators 8 | 9 | 10 | 11 | 12 |

Event Simulators

13 |
14 |
+
15 |
16 | 17 | 18 | 19 |
20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /ep-66_event-simulator/final-code/script.js: -------------------------------------------------------------------------------- 1 | const addCardBtn = document.querySelector('.card') 2 | const container = document.querySelector('.container') 3 | const input = document.querySelector('input') 4 | const form = document.querySelector('form') 5 | 6 | let count = 1 7 | 8 | addCardBtn.addEventListener('click', () => { 9 | const newCard = document.createElement('div') 10 | newCard.classList.add('card') 11 | newCard.innerText = count++ 12 | container.append(newCard) 13 | }) 14 | 15 | // setTimeout(() => { 16 | // input.focus() 17 | // console.log('Input Focused'); 18 | // }, 1000) 19 | 20 | // setTimeout(() => { 21 | // input.blur() 22 | // console.log('Input Blurred'); 23 | // }, 3000) 24 | 25 | // setTimeout(() => { 26 | // form.submit() 27 | // console.log('Form Submitted'); 28 | // }, 3000) 29 | 30 | // form.reset() 31 | 32 | // const intervalId = setInterval(() => { 33 | // if (count > 999) { 34 | // clearInterval(intervalId) 35 | // } 36 | // addCardBtn.click() 37 | // }, 5) 38 | -------------------------------------------------------------------------------- /ep-66_event-simulator/final-code/style.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | background-color: brown; 3 | } 4 | 5 | .container { 6 | color: green; 7 | display: flex; 8 | flex-wrap: wrap; 9 | gap: 8px; 10 | } 11 | 12 | .card { 13 | width: 100px; 14 | height: 120px; 15 | background-color: pink; 16 | display: flex; 17 | align-items: center; 18 | justify-content: center; 19 | border-radius: 4px; 20 | font-size: 36px; 21 | } 22 | 23 | .add-card { 24 | cursor: pointer; 25 | background-color: cadetblue; 26 | color: black; 27 | position: absolute; 28 | bottom: 33px; 29 | right: 32px; 30 | border-radius: 100%; 31 | height: 50px; 32 | width: 50px; 33 | line-height: 10px; 34 | } -------------------------------------------------------------------------------- /ep-66_event-simulator/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Event Simulators 8 | 9 | 10 | 11 | 12 |

Event Simulators

13 |
14 |
+
15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /ep-66_event-simulator/starter-code/script.js: -------------------------------------------------------------------------------- 1 | const addCardBtn = document.querySelector('.card') 2 | const container = document.querySelector('.container') 3 | 4 | let count = 1 5 | 6 | addCardBtn.addEventListener('click', () => { 7 | const newCard = document.createElement('div') 8 | newCard.classList.add('card') 9 | newCard.innerText = count++ 10 | container.append(newCard) 11 | }) -------------------------------------------------------------------------------- /ep-66_event-simulator/starter-code/style.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | background-color: brown; 3 | } 4 | 5 | .container { 6 | color: green; 7 | display: flex; 8 | flex-wrap: wrap; 9 | gap: 8px; 10 | } 11 | 12 | .card { 13 | width: 100px; 14 | height: 120px; 15 | background-color: pink; 16 | display: flex; 17 | align-items: center; 18 | justify-content: center; 19 | border-radius: 4px; 20 | font-size: 36px; 21 | } 22 | 23 | .add-card { 24 | cursor: pointer; 25 | background-color: cadetblue; 26 | color: black; 27 | position: absolute; 28 | bottom: 33px; 29 | right: 32px; 30 | border-radius: 100%; 31 | height: 50px; 32 | width: 50px; 33 | line-height: 10px; 34 | } -------------------------------------------------------------------------------- /ep-67_event-delegation/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Event Delegation 8 | 9 | 10 | 11 | 12 |

Event Delegation

13 |
+
14 |
15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /ep-67_event-delegation/final-code/script.js: -------------------------------------------------------------------------------- 1 | const addCardBtn = document.querySelector('.add-card') 2 | const container = document.querySelector('.container') 3 | 4 | const cardsList = document.querySelectorAll('.card') 5 | 6 | let count = 1 7 | 8 | addCardBtn.addEventListener('click', () => { 9 | const newCard = document.createElement('div') 10 | newCard.classList.add('card') 11 | newCard.innerText = count++ 12 | container.append(newCard) 13 | }) 14 | 15 | container.addEventListener('click', (e) => { 16 | if(e.target !== container) { 17 | e.target.remove() 18 | } 19 | }) -------------------------------------------------------------------------------- /ep-67_event-delegation/final-code/style.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | background-color: brown; 3 | } 4 | 5 | .container { 6 | color: green; 7 | display: flex; 8 | flex-wrap: wrap; 9 | gap: 8px; 10 | } 11 | 12 | .card { 13 | width: 100px; 14 | height: 120px; 15 | background-color: pink; 16 | display: flex; 17 | align-items: center; 18 | justify-content: center; 19 | border-radius: 4px; 20 | font-size: 36px; 21 | } 22 | 23 | .add-card { 24 | display: flex; 25 | align-items: center; 26 | justify-content: center; 27 | font-size: 36px; 28 | cursor: pointer; 29 | background-color: cadetblue; 30 | color: black; 31 | position: absolute; 32 | bottom: 33px; 33 | right: 32px; 34 | border-radius: 100%; 35 | height: 50px; 36 | width: 50px; 37 | line-height: 10px; 38 | } -------------------------------------------------------------------------------- /ep-67_event-delegation/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Event Delegation 8 | 9 | 10 | 11 | 12 |

Event Delegation

13 |
14 |
+
15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /ep-67_event-delegation/starter-code/script.js: -------------------------------------------------------------------------------- 1 | const addCardBtn = document.querySelector('.card') 2 | const container = document.querySelector('.container') 3 | 4 | let count = 1 5 | 6 | addCardBtn.addEventListener('click', () => { 7 | const newCard = document.createElement('div') 8 | newCard.classList.add('card') 9 | newCard.innerText = count++ 10 | container.append(newCard) 11 | }) -------------------------------------------------------------------------------- /ep-67_event-delegation/starter-code/style.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | background-color: brown; 3 | } 4 | 5 | .container { 6 | color: green; 7 | display: flex; 8 | flex-wrap: wrap; 9 | gap: 8px; 10 | } 11 | 12 | .card { 13 | width: 100px; 14 | height: 120px; 15 | background-color: pink; 16 | display: flex; 17 | align-items: center; 18 | justify-content: center; 19 | border-radius: 4px; 20 | font-size: 36px; 21 | } 22 | 23 | .add-card { 24 | cursor: pointer; 25 | background-color: cadetblue; 26 | color: black; 27 | position: absolute; 28 | bottom: 33px; 29 | right: 32px; 30 | border-radius: 100%; 31 | height: 50px; 32 | width: 50px; 33 | line-height: 10px; 34 | } -------------------------------------------------------------------------------- /ep-68_localStorage/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | localStorage 8 | 9 | 10 | 11 |

localStorage

12 | 13 | 14 |

My name is

15 |

I am years old.

16 | 17 | 18 | -------------------------------------------------------------------------------- /ep-68_localStorage/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | localStorage 8 | 9 | 10 | 11 |

localStorage

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-68_localStorage/starter-code/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-68_localStorage/starter-code/script.js -------------------------------------------------------------------------------- /ep-69-talking-to-the-outside-world/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Talking to the outside world 8 | 9 | 10 | 11 |

Talking to the outside world

12 |

13 | 14 |

15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /ep-69-talking-to-the-outside-world/final-code/script.js: -------------------------------------------------------------------------------- 1 | const image = document.querySelector('img') 2 | const button = document.querySelector('button') 3 | 4 | button.addEventListener('click', () => { 5 | fetch('https://dog.ceo/api/breeds/image/random') 6 | .then((response) => response.json()) 7 | .then((json) => { 8 | image.src = json.message 9 | }) 10 | }) 11 | -------------------------------------------------------------------------------- /ep-69-talking-to-the-outside-world/final-code/user.json: -------------------------------------------------------------------------------- 1 | { 2 | "userId": 1, 3 | "id": 1, 4 | "title": "delectus aut autem", 5 | "completed": false 6 | } 7 | -------------------------------------------------------------------------------- /ep-69-talking-to-the-outside-world/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Talking to the outside world 8 | 9 | 10 | 11 |

Talking to the outside world

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-69-talking-to-the-outside-world/starter-code/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-69-talking-to-the-outside-world/starter-code/script.js -------------------------------------------------------------------------------- /ep-70-xhr/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Talking to the outside world 8 | 9 | 10 | 11 |

Talking to the outside world

12 |

13 | 14 |

15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /ep-70-xhr/final-code/script.js: -------------------------------------------------------------------------------- 1 | const image = document.querySelector('img') 2 | const button = document.querySelector('button') 3 | 4 | button.addEventListener('click', () => { 5 | const xhr = new XMLHttpRequest() 6 | 7 | xhr.responseType = 'json' 8 | 9 | xhr.addEventListener('load', () => { 10 | image.src = xhr.response.message 11 | console.log(xhr); 12 | }) 13 | 14 | // xhr.onload = () => { 15 | // image.src = xhr.response.message 16 | // console.log(xhr) 17 | // } 18 | 19 | xhr.open('GET', 'https://dog.ceo/api/breeds/image/random') 20 | xhr.send() 21 | }) 22 | -------------------------------------------------------------------------------- /ep-70-xhr/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Talking to the outside world 8 | 9 | 10 | 11 |

Talking to the outside world

12 |

13 | 14 |

15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /ep-70-xhr/starter-code/script.js: -------------------------------------------------------------------------------- 1 | const image = document.querySelector('img') 2 | const button = document.querySelector('button') 3 | 4 | button.addEventListener('click', () => { 5 | fetch('https://dog.ceo/api/breeds/image/random') 6 | .then((response) => response.json()) 7 | .then((json) => { 8 | image.src = json.message 9 | }) 10 | }) 11 | -------------------------------------------------------------------------------- /ep-71_synchronous-vs-asynchronous-javascript/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Synchronous vs Asynchronous JavaScript 8 | 9 | 10 | 11 |

Synchronous vs Asynchronous JavaScript

12 |

13 | 14 | 15 |

16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /ep-71_synchronous-vs-asynchronous-javascript/final-code/script.js: -------------------------------------------------------------------------------- 1 | const image = document.querySelector('img') 2 | const button = document.querySelector('button') 3 | 4 | button.addEventListener('click', () => { 5 | const xhr = new XMLHttpRequest() 6 | 7 | console.log(xhr); 8 | 9 | // xhr.responseType = 'json' 10 | 11 | xhr.addEventListener('load', () => { 12 | // image.src = JSON.parse(xhr.response).message 13 | console.log(xhr); 14 | }) 15 | 16 | xhr.open('GET', 'https://6wrlmkp9u2.execute-api.us-east-1.amazonaws.com/?sleep=5000') 17 | xhr.send() 18 | }) 19 | 20 | // setTimeout(() => { 21 | // console.log('hiii'); 22 | // }, 4000) 23 | 24 | 25 | 26 | // const blockingBtn = document.querySelector('.blocking-btn') 27 | 28 | // blockingBtn.addEventListener('click', () => { 29 | // const startTime = Date.now() 30 | // let currentTime = startTime 31 | 32 | // while (startTime + 4000 > currentTime) { 33 | // currentTime = Date.now() 34 | // } 35 | // }) 36 | -------------------------------------------------------------------------------- /ep-71_synchronous-vs-asynchronous-javascript/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Synchronous vs Asynchronous JavaScript 8 | 9 | 10 | 11 |

Synchronous vs Asynchronous JavaScript

12 |

13 | 14 |

15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /ep-71_synchronous-vs-asynchronous-javascript/starter-code/script.js: -------------------------------------------------------------------------------- 1 | const image = document.querySelector('img') 2 | const button = document.querySelector('button') 3 | 4 | button.addEventListener('click', () => { 5 | const xhr = new XMLHttpRequest() 6 | 7 | // xhr.responseType = 'json' 8 | 9 | xhr.addEventListener('load', () => { 10 | image.src = JSON.parse(xhr.response).message 11 | console.log(xhr); 12 | }) 13 | 14 | // xhr.onload = () => { 15 | // image.src = xhr.response.message 16 | // console.log(xhr) 17 | // } 18 | 19 | xhr.open('GET', 'https://dog.ceo/api/breeds/image/random', false) 20 | xhr.send() 21 | }) 22 | -------------------------------------------------------------------------------- /ep-72_callback-hell/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Callback Hell 8 | 9 | 10 | 11 |

Callback Hell

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-72_callback-hell/final-code/script.js: -------------------------------------------------------------------------------- 1 | function makeHttpRequest(method, url, callback) { 2 | const xhr = new XMLHttpRequest() 3 | xhr.responseType = 'json' 4 | xhr.addEventListener('load', () => { 5 | callback(xhr.response) 6 | }) 7 | 8 | xhr.open(method, url) 9 | xhr.send() 10 | } 11 | 12 | makeHttpRequest('GET', 'https://dummyjson.com/users', (usersData) => { 13 | makeHttpRequest('GET', `https://dummyjson.com/posts/user/${usersData.users[0].id}`, (postsData) => { 14 | makeHttpRequest('GET', `https://dummyjson.com/comments/post/${postsData.posts[0].id}`, (commentsData) => { 15 | makeHttpRequest('GET', `https://dummyjson.com/users/${commentsData.comments[0].user.id}`, (userData) => { 16 | console.log(userData); 17 | }); 18 | }); 19 | }); 20 | }) 21 | -------------------------------------------------------------------------------- /ep-72_callback-hell/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Callback Hell 8 | 9 | 10 | 11 |

Callback Hell

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-72_callback-hell/starter-code/script.js: -------------------------------------------------------------------------------- 1 | const xhr = new XMLHttpRequest() 2 | xhr.responseType = 'json' 3 | xhr.addEventListener('load', () => { 4 | console.log(xhr); 5 | }) 6 | 7 | xhr.open('GET', 'https://procodrr.vercel.app/?sleep=5000') 8 | xhr.send() 9 | -------------------------------------------------------------------------------- /ep-73_promises/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Promises 8 | 9 | 10 | 11 |

Promises

12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /ep-73_promises/final-code/script.js: -------------------------------------------------------------------------------- 1 | const resolveBtn = document.querySelector('#resolve-btn') 2 | const rejectBtn = document.querySelector('#reject-btn') 3 | 4 | const p = new Promise((resolve, reject) => { 5 | resolveBtn.addEventListener('click', () => { 6 | resolve('Promise Resolveddd') 7 | }) 8 | 9 | rejectBtn.addEventListener('click', () => { 10 | reject('Promise Rejected') 11 | }) 12 | }) 13 | 14 | p.then((data) => { 15 | console.log(data); 16 | return 155 17 | }).then((data) => { 18 | console.log(data); 19 | return 'Anurag' 20 | }).then((data) => { 21 | console.log(data); 22 | }).catch(err => { 23 | console.log(err); 24 | }) -------------------------------------------------------------------------------- /ep-73_promises/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Promises 8 | 9 | 10 | 11 |

Promises

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-73_promises/starter-code/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-73_promises/starter-code/script.js -------------------------------------------------------------------------------- /ep-74_lets-fix-callback-hell/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Let's Fix Callback Hell 8 | 9 | 10 | 11 |

Let's Fix Callback Hell

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-74_lets-fix-callback-hell/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Callback Hell 8 | 9 | 10 | 11 |

Callback Hell

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-74_lets-fix-callback-hell/starter-code/script.js: -------------------------------------------------------------------------------- 1 | function makeHttpRequest(method, url, callback) { 2 | const xhr = new XMLHttpRequest() 3 | xhr.responseType = 'json' 4 | xhr.addEventListener('load', () => { 5 | callback(xhr.response) 6 | }) 7 | 8 | xhr.open(method, url) 9 | xhr.send() 10 | } 11 | 12 | makeHttpRequest('GET', 'https://dummyjson.com/users', (usersData) => { 13 | makeHttpRequest('GET', `https://dummyjson.com/posts/user/${usersData.users[0].id}`, (postsData) => { 14 | makeHttpRequest('GET', `https://dummyjson.com/comments/post/${postsData.posts[0].id}`, (commentsData) => { 15 | makeHttpRequest('GET', `https://dummyjson.com/users/${commentsData.comments[0].user.id}`, (userData) => { 16 | console.log(userData); 17 | }); 18 | }); 19 | }); 20 | }) 21 | -------------------------------------------------------------------------------- /ep-75_introducing-fetch-api/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Introducing Fetch API 8 | 9 | 10 | 11 |

Introducing Fetch API

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-75_introducing-fetch-api/final-code/script.js: -------------------------------------------------------------------------------- 1 | // fetch('https://dummyjson.com/products') 2 | // .then((res) => res.json()) 3 | // .then((data) => console.log(data)) 4 | // .catch((err) => { 5 | // console.log(err); 6 | // }) 7 | 8 | fetch('https://dummyjsons.com/products/add', { 9 | method: 'POST', 10 | headers: { 'Content-Type': 'application/json' }, 11 | body: JSON.stringify({ 12 | title: 'BMW Pencil', 13 | category: 'Stationary' 14 | /* other product data */ 15 | }) 16 | }) 17 | .then(res => res.json()) 18 | .then(console.log) 19 | .catch((err) => { 20 | console.log(err); 21 | }) 22 | 23 | -------------------------------------------------------------------------------- /ep-75_introducing-fetch-api/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Introducing Fetch API 8 | 9 | 10 | 11 |

Introducing Fetch API

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-75_introducing-fetch-api/starter-code/script.js: -------------------------------------------------------------------------------- 1 | fetch('https://6wrlmkp9u2.execute-api.us-east-1.amazonaws.com/?sleep=2000') 2 | .then(response => response.json()) 3 | .then(data => { 4 | console.log(data); 5 | }) -------------------------------------------------------------------------------- /ep-76_async-await/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Async / Await 8 | 9 | 10 | 11 |

Async / Await

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-76_async-await/final-code/script.js: -------------------------------------------------------------------------------- 1 | async function makeAsyncRequest() { 2 | const url = 'https://6wrlmkp9u2.execute-api.us-east-1.amazonaws.com/?sleep=2000' 3 | const response = await fetch(url) 4 | const data = await response.json() 5 | return data 6 | } 7 | 8 | makeAsyncRequest().then((data) => { 9 | console.log(data); 10 | }) -------------------------------------------------------------------------------- /ep-76_async-await/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Async / Await 8 | 9 | 10 | 11 |

Async / Await

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-76_async-await/starter-code/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-76_async-await/starter-code/script.js -------------------------------------------------------------------------------- /ep-77_try-catch/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Try Catch 8 | 9 | 10 | 11 |

Try Catch

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-77_try-catch/final-code/script.js: -------------------------------------------------------------------------------- 1 | // const user = { 2 | // name: 'Anurag', 3 | // age: 34, 4 | // } 5 | 6 | // try { 7 | // console.log(user.address) 8 | // } catch (err) { 9 | // console.dir(err.message) 10 | // } finally { 11 | // console.log('hello world') 12 | // } 13 | 14 | // console.log(3 + 7) 15 | 16 | async function makeAsyncRequest() { 17 | try { 18 | const url = 19 | 'https://6wrlmkp9u2.execute-api.us-east-1.amazonaws.com/?sleep=2000' 20 | const response = await fetch(url) 21 | const data = await response.json() 22 | console.log(data) 23 | return data 24 | } catch (err) { 25 | console.log(err) 26 | } 27 | } 28 | 29 | makeAsyncRequest() 30 | -------------------------------------------------------------------------------- /ep-77_try-catch/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Try Catch 8 | 9 | 10 | 11 |

Try Catch

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-77_try-catch/starter-code/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-77_try-catch/starter-code/script.js -------------------------------------------------------------------------------- /ep-78-optional-chaining/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Optional Chaining 8 | 9 | 10 | 11 |

Optional Chaining

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-78-optional-chaining/final-code/script.js: -------------------------------------------------------------------------------- 1 | const user = { 2 | firstName: 'Anurag', 3 | lastName: 'Singh', 4 | age: 25, 5 | address: { 6 | city: 'Delhi' 7 | }, 8 | getFullName: function() { 9 | return user.firstName + ' ' + user.lastName 10 | } 11 | } 12 | 13 | const a = 'city' 14 | 15 | 16 | // console.log(user.getFullName?.()); 17 | 18 | 19 | // console.log(user.address && user.address.city) 20 | 21 | // console.log(user.address?.city) 22 | // console.log(user.address?.[a]) 23 | 24 | -------------------------------------------------------------------------------- /ep-78-optional-chaining/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Optional Chaining 8 | 9 | 10 | 11 |

Optional Chaining

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-78-optional-chaining/starter-code/script.js: -------------------------------------------------------------------------------- 1 | const user = { 2 | firstName: "Anurag", 3 | lastName: "Singh", 4 | age: 25, 5 | } -------------------------------------------------------------------------------- /ep-79_es6-modules/Final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | ES6 Modules 8 | 9 | 10 | 11 |

ES6 Modules

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-79_es6-modules/Final-code/script.js: -------------------------------------------------------------------------------- 1 | import { usersData } from './usersData.js' 2 | 3 | console.log(usersData); 4 | 5 | 6 | console.log('hi'); 7 | 8 | 9 | 10 | console.log('jjeelke'); 11 | -------------------------------------------------------------------------------- /ep-79_es6-modules/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | ES6 Modules 8 | 9 | 10 | 11 |

ES6 Modules

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-80_oop-and-factory-functions/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | OOP and Factory Functions 8 | 9 | 10 | 11 |

OOP and Factory Functions

12 |

Four Pillars of Object Oriented Programming

13 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /ep-80_oop-and-factory-functions/final-code/script.js: -------------------------------------------------------------------------------- 1 | function createUser(firstName, lastName, age) { 2 | const user = { 3 | firstName, 4 | lastName, 5 | age, 6 | getAgeYear () { 7 | return new Date().getFullYear() - user.age 8 | }, 9 | } 10 | return user 11 | } 12 | 13 | 14 | const user1 = createUser('Aman', 'Mishra', 32) 15 | const user2 = createUser('Anurag', 'Singh', 72) 16 | 17 | const arr1 = [1,2] 18 | const arr2 = [3, 4] -------------------------------------------------------------------------------- /ep-80_oop-and-factory-functions/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | OOP and Factory Functions 8 | 9 | 10 | 11 |

OOP and Factory Functions

12 |

Four Pillars of Object Oriented Programming

13 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /ep-80_oop-and-factory-functions/starter-code/script.js: -------------------------------------------------------------------------------- 1 | const user = { 2 | firstName: 'Anurag', 3 | lastName: 'Singh', 4 | age: 25 5 | } 6 | -------------------------------------------------------------------------------- /ep-81_oop-and-constructor-functions/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | OOP and Factory Functions 8 | 9 | 10 | 11 |

OOP and Factory Functions

12 |

Four Pillars of Object Oriented Programming

13 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /ep-81_oop-and-constructor-functions/final-code/script.js: -------------------------------------------------------------------------------- 1 | // function createUser(firstName, lastName, age) { 2 | // const user = { 3 | // firstName, 4 | // lastName, 5 | // age, 6 | // // getBirthYear: createUser.commonMethods.getBirthYear 7 | // } 8 | // return user 9 | // } 10 | 11 | // createUser.commonMethods = { 12 | // getBirthYear() { 13 | // return new Date().getFullYear() - this.age 14 | // }, 15 | // } 16 | 17 | 18 | function CreateUser(firstName, lastName, age) { 19 | this.firstName = firstName 20 | this.lastName = lastName 21 | this.age = age 22 | } 23 | 24 | CreateUser.prototype.getBirthYear = function() { 25 | return new Date().getFullYear() - this.age 26 | } 27 | 28 | CreateUser.prototype.getFullName = function() { 29 | return this.firstName + ' ' + this.lastName 30 | } 31 | 32 | const user1 = new CreateUser('Aman', 'Mishra', 32) 33 | const user2 = new CreateUser('Anurag', 'Singh', 72) 34 | 35 | -------------------------------------------------------------------------------- /ep-81_oop-and-constructor-functions/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | OOP and Factory Functions 8 | 9 | 10 | 11 |

OOP and Factory Functions

12 |

Four Pillars of Object Oriented Programming

13 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /ep-81_oop-and-constructor-functions/starter-code/script.js: -------------------------------------------------------------------------------- 1 | function createUser(firstName, lastName, age) { 2 | const user = { 3 | firstName, 4 | lastName, 5 | age, 6 | getAgeYear () { 7 | return new Date().getFullYear() - user.age 8 | }, 9 | } 10 | return user 11 | } 12 | 13 | 14 | const user1 = createUser('Aman', 'Mishra', 32) 15 | const user2 = createUser('Anurag', 'Singh', 72) 16 | 17 | const arr1 = [1,2] 18 | const arr2 = [3, 4] -------------------------------------------------------------------------------- /ep-82_classes-in-javascript/final-code/classes.js: -------------------------------------------------------------------------------- 1 | class CreateUser { 2 | constructor(firstName, lastName, age) { 3 | this.firstName = firstName 4 | this.lastName = lastName 5 | this.age = age 6 | } 7 | 8 | getBirthYear() { 9 | return new Date().getFullYear() - this.age 10 | } 11 | getFullName() { 12 | return this.firstName + ' ' + this.lastName 13 | } 14 | } 15 | 16 | const user1 = new CreateUser('Aman', 'Mishra', 32) 17 | const user2 = new CreateUser('Anurag', 'Singh', 72) 18 | -------------------------------------------------------------------------------- /ep-82_classes-in-javascript/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | OOP and Factory Functions 8 | 9 | 10 | 11 |

OOP and Factory Functions

12 |

Four Pillars of Object Oriented Programming

13 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /ep-82_classes-in-javascript/final-code/script.js: -------------------------------------------------------------------------------- 1 | // function createUser(firstName, lastName, age) { 2 | // const user = { 3 | // firstName, 4 | // lastName, 5 | // age, 6 | // // getBirthYear: createUser.commonMethods.getBirthYear 7 | // } 8 | // return user 9 | // } 10 | 11 | // createUser.commonMethods = { 12 | // getBirthYear() { 13 | // return new Date().getFullYear() - this.age 14 | // }, 15 | // } 16 | 17 | 18 | function CreateUser(firstName, lastName, age) { 19 | this.firstName = firstName 20 | this.lastName = lastName 21 | this.age = age 22 | } 23 | 24 | CreateUser.prototype.getBirthYear = function() { 25 | return new Date().getFullYear() - this.age 26 | } 27 | 28 | CreateUser.prototype.getFullName = function() { 29 | return this.firstName + ' ' + this.lastName 30 | } 31 | 32 | const user1 = new CreateUser('Aman', 'Mishra', 32) 33 | const user2 = new CreateUser('Anurag', 'Singh', 72) 34 | 35 | -------------------------------------------------------------------------------- /ep-82_classes-in-javascript/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | OOP and Factory Functions 8 | 9 | 10 | 11 |

OOP and Factory Functions

12 |

Four Pillars of Object Oriented Programming

13 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /ep-82_classes-in-javascript/starter-code/script.js: -------------------------------------------------------------------------------- 1 | // function createUser(firstName, lastName, age) { 2 | // const user = { 3 | // firstName, 4 | // lastName, 5 | // age, 6 | // // getBirthYear: createUser.commonMethods.getBirthYear 7 | // } 8 | // return user 9 | // } 10 | 11 | // createUser.commonMethods = { 12 | // getBirthYear() { 13 | // return new Date().getFullYear() - this.age 14 | // }, 15 | // } 16 | 17 | 18 | function CreateUser(firstName, lastName, age) { 19 | this.firstName = firstName 20 | this.lastName = lastName 21 | this.age = age 22 | } 23 | 24 | CreateUser.prototype.getBirthYear = function() { 25 | return new Date().getFullYear() - this.age 26 | } 27 | 28 | CreateUser.prototype.getFullName = function() { 29 | return this.firstName + ' ' + this.lastName 30 | } 31 | 32 | const user1 = new CreateUser('Aman', 'Mishra', 32) 33 | const user2 = new CreateUser('Anurag', 'Singh', 72) 34 | 35 | -------------------------------------------------------------------------------- /ep-83_how_to_make_private-class-properties/final-code/classes.js: -------------------------------------------------------------------------------- 1 | class CreateUser { 2 | #age 3 | constructor(firstName, lastName, age) { 4 | this.firstName = firstName 5 | this.lastName = lastName 6 | this.#age = age 7 | } 8 | 9 | #hi = 'Hello World' 10 | 11 | getBirthYear() { 12 | console.log(this.#hi) 13 | console.log(this.#getFullName()) 14 | return new Date().getFullYear() - this.#age 15 | } 16 | #getFullName() { 17 | return this.firstName + ' ' + this.lastName 18 | } 19 | } 20 | 21 | const user1 = new CreateUser('Aman', 'Mishra', 32) 22 | const user2 = new CreateUser('Anurag', 'Singh', 72) 23 | 24 | -------------------------------------------------------------------------------- /ep-83_how_to_make_private-class-properties/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Private Class Fields 8 | 9 | 10 | 11 |

Private Class Fields

12 |

Four Pillars of Object Oriented Programming

13 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /ep-83_how_to_make_private-class-properties/final-code/script.js: -------------------------------------------------------------------------------- 1 | // function createUser(firstName, lastName, age) { 2 | // const user = { 3 | // firstName, 4 | // lastName, 5 | // age, 6 | // // getBirthYear: createUser.commonMethods.getBirthYear 7 | // } 8 | // return user 9 | // } 10 | 11 | // createUser.commonMethods = { 12 | // getBirthYear() { 13 | // return new Date().getFullYear() - this.age 14 | // }, 15 | // } 16 | 17 | 18 | function CreateUser(firstName, lastName, age) { 19 | this.firstName = firstName 20 | this.lastName = lastName 21 | this.age = age 22 | } 23 | 24 | CreateUser.prototype.getBirthYear = function() { 25 | return new Date().getFullYear() - this.age 26 | } 27 | 28 | CreateUser.prototype.getFullName = function() { 29 | return this.firstName + ' ' + this.lastName 30 | } 31 | 32 | const user1 = new CreateUser('Aman', 'Mishra', 32) 33 | const user2 = new CreateUser('Anurag', 'Singh', 72) 34 | 35 | -------------------------------------------------------------------------------- /ep-83_how_to_make_private-class-properties/starter-code/classes.js: -------------------------------------------------------------------------------- 1 | class CreateUser { 2 | constructor(firstName, lastName, age) { 3 | this.firstName = firstName 4 | this.lastName = lastName 5 | this.age = age 6 | } 7 | 8 | getBirthYear() { 9 | return new Date().getFullYear() - this.age 10 | } 11 | getFullName() { 12 | return this.firstName + ' ' + this.lastName 13 | } 14 | } 15 | 16 | const user1 = new CreateUser('Aman', 'Mishra', 32) 17 | const user2 = new CreateUser('Anurag', 'Singh', 72) 18 | -------------------------------------------------------------------------------- /ep-83_how_to_make_private-class-properties/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Private Class Fields 8 | 9 | 10 | 11 |

Private Class Fields

12 |

Four Pillars of Object Oriented Programming

13 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /ep-83_how_to_make_private-class-properties/starter-code/script.js: -------------------------------------------------------------------------------- 1 | // function createUser(firstName, lastName, age) { 2 | // const user = { 3 | // firstName, 4 | // lastName, 5 | // age, 6 | // // getBirthYear: createUser.commonMethods.getBirthYear 7 | // } 8 | // return user 9 | // } 10 | 11 | // createUser.commonMethods = { 12 | // getBirthYear() { 13 | // return new Date().getFullYear() - this.age 14 | // }, 15 | // } 16 | 17 | 18 | function CreateUser(firstName, lastName, age) { 19 | this.firstName = firstName 20 | this.lastName = lastName 21 | this.age = age 22 | } 23 | 24 | CreateUser.prototype.getBirthYear = function() { 25 | return new Date().getFullYear() - this.age 26 | } 27 | 28 | CreateUser.prototype.getFullName = function() { 29 | return this.firstName + ' ' + this.lastName 30 | } 31 | 32 | const user1 = new CreateUser('Aman', 'Mishra', 32) 33 | const user2 = new CreateUser('Anurag', 'Singh', 72) 34 | 35 | -------------------------------------------------------------------------------- /ep-84_static-properties-and-methods/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Static Properties and Methods 8 | 9 | 10 | 11 |

Static Properties and Methods

12 |

Four Pillars of Object Oriented Programming

13 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /ep-84_static-properties-and-methods/final-code/script.js: -------------------------------------------------------------------------------- 1 | class CreateUser { 2 | constructor(firstName, lastName, age) { 3 | this.firstName = firstName 4 | this.lastName = lastName 5 | this.age = age 6 | } 7 | 8 | static run = 'running' 9 | 10 | static { 11 | console.log(this); 12 | this.hi = 'hello' 13 | this.getFullName = function() { 14 | return this.firstName + ' ' + this.lastName 15 | } 16 | } 17 | 18 | getBirthYear() { 19 | return new Date().getFullYear() - this.age 20 | } 21 | 22 | } 23 | 24 | // const user1 = new CreateUser('Aman', 'Mishra', 32) 25 | // const user2 = new CreateUser('Anurag', 'Singh', 72) 26 | 27 | -------------------------------------------------------------------------------- /ep-84_static-properties-and-methods/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Static Properties and Methods 8 | 9 | 10 | 11 |

Static Properties and Methods

12 |

Four Pillars of Object Oriented Programming

13 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /ep-84_static-properties-and-methods/starter-code/script.js: -------------------------------------------------------------------------------- 1 | class CreateUser { 2 | constructor(firstName, lastName, age) { 3 | this.firstName = firstName 4 | this.lastName = lastName 5 | this.age = age 6 | } 7 | 8 | getBirthYear() { 9 | return new Date().getFullYear() - this.age 10 | } 11 | getFullName() { 12 | return this.firstName + ' ' + this.lastName 13 | } 14 | } 15 | 16 | const user1 = new CreateUser('Aman', 'Mishra', 32) 17 | const user2 = new CreateUser('Anurag', 'Singh', 72) 18 | 19 | -------------------------------------------------------------------------------- /ep-85_getters-and-setters-in-javascript/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Getters and Setters 8 | 9 | 10 | 11 |

Getters and Setters

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-85_getters-and-setters-in-javascript/final-code/script.js: -------------------------------------------------------------------------------- 1 | class CreateUser { 2 | constructor(firstName, lastName, age) { 3 | this.firstName = firstName 4 | this.lastName = lastName 5 | this.age = age 6 | } 7 | 8 | getBirthYear() { 9 | return new Date().getFullYear() - this.age 10 | } 11 | 12 | get fullName() { 13 | return `${this.firstName} ${this.lastName}` 14 | } 15 | 16 | set fullName(value) { 17 | const [firstName, lastName] = value.split(' ') 18 | this.firstName = firstName 19 | this.lastName = lastName 20 | } 21 | } 22 | 23 | const user1 = new CreateUser('Aman', 'Mishra', 32) 24 | const user2 = new CreateUser('Anurag', 'Singh', 72) 25 | 26 | // const user = { 27 | // firstName: 'Anurag', 28 | // lastName: 'Singh', 29 | // get fullName() { 30 | // return `${this.firstName} ${this.lastName}` 31 | // }, 32 | // set fullName(value) { 33 | // const [firstName, lastName] = value.split(' ') 34 | // this.firstName = firstName 35 | // this.lastName = lastName 36 | // } 37 | // } 38 | 39 | // console.log(user.fullName); 40 | -------------------------------------------------------------------------------- /ep-85_getters-and-setters-in-javascript/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Getters and Setters 8 | 9 | 10 | 11 |

Getters and Setters

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-85_getters-and-setters-in-javascript/starter-code/script.js: -------------------------------------------------------------------------------- 1 | class CreateUser { 2 | constructor(firstName, lastName, age) { 3 | this.firstName = firstName 4 | this.lastName = lastName 5 | this.age = age 6 | } 7 | 8 | getBirthYear() { 9 | return new Date().getFullYear() - this.age 10 | } 11 | 12 | getFullName() { 13 | return this.firstName + ' ' + this.lastName 14 | } 15 | } 16 | 17 | const user1 = new CreateUser('Aman', 'Mishra', 32) 18 | const user2 = new CreateUser('Anurag', 'Singh', 72) 19 | 20 | -------------------------------------------------------------------------------- /ep-86_prototypal-inheritance-using-extends-and-super-keyword-in-javascript/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Prototypal Inheritance Using Extends and Super Keyword 8 | 9 | 10 | 11 |

Prototypal Inheritance Using Extends and Super Keyword

12 |

hi

13 | 14 | 15 | -------------------------------------------------------------------------------- /ep-86_prototypal-inheritance-using-extends-and-super-keyword-in-javascript/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Prototypal Inheritance Using Extends and Super Keyword 8 | 9 | 10 | 11 |

Prototypal Inheritance Using Extends and Super Keyword

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-86_prototypal-inheritance-using-extends-and-super-keyword-in-javascript/starter-code/script.js: -------------------------------------------------------------------------------- 1 | class User { 2 | constructor(firstName, lastName, age) { 3 | this.firstName = firstName 4 | this.lastName = lastName 5 | this.age = age 6 | } 7 | 8 | getBirthYear() { 9 | return new Date().getFullYear() - this.age 10 | } 11 | 12 | get fullName() { 13 | return `${this.firstName} ${this.lastName}` 14 | } 15 | 16 | set fullName(value) { 17 | const [firstName, lastName] = value.split(' ') 18 | this.firstName = firstName 19 | this.lastName = lastName 20 | } 21 | } 22 | 23 | const user1 = new User('Aman', 'Mishra', 32) 24 | const user2 = new User('Anurag', 'Singh', 72) 25 | -------------------------------------------------------------------------------- /ep-87_this-keyword-in-javascript/final-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 'this' keyword in JavaScript 8 | 9 | 10 | 11 |

'this' keyword in JavaScript

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-87_this-keyword-in-javascript/final-code/script.js: -------------------------------------------------------------------------------- 1 | // function Hi() { 2 | // this.hello = 'world' 3 | // console.log(this); 4 | // } 5 | 6 | // new Hi() 7 | 8 | // const user = { 9 | // firstName: 'Anurag', 10 | // lastName: 'Singh', 11 | // tags: ['a', 'b', 'c'], 12 | // printTags: () => { 13 | // console.log(this); 14 | // } 15 | // } 16 | 17 | // const body = document.querySelector('body') 18 | 19 | // body.addEventListener('click', (e) => { 20 | // console.log(e.target); 21 | // console.log(e.currentTarget); 22 | // console.log(this); 23 | // }) 24 | 25 | class User { 26 | constructor () { 27 | this.firstName = 'Anurag' 28 | console.log(this); 29 | } 30 | 31 | getUser() { 32 | console.log(this); 33 | } 34 | } -------------------------------------------------------------------------------- /ep-87_this-keyword-in-javascript/starter-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 'this' keyword in JavaScript 8 | 9 | 10 | 11 |

'this' keyword in JavaScript

12 | 13 | 14 | -------------------------------------------------------------------------------- /ep-87_this-keyword-in-javascript/starter-code/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/procodrr/javascript-course/03fe7da72a1ce9656dd24d629998d4c75aa2a465/ep-87_this-keyword-in-javascript/starter-code/script.js --------------------------------------------------------------------------------