JavaScript - Proof of Concept

Implementation & Explanation of Beginner to Advanced JavaScript Concepts [ES5 & ES6].

Resources:

More resources will be added depending on the usefulness of the resource.

Child Repositories (Project Deployments)

These are the projects that are implemented using JavaScript as a proof of concept.

Pig - dice game: Live here | GitHub Repo
Budgety - budget app: Live here | GitHub Repo
Forkify - online recipe search: Live here | GitHub Repo

Development Workflow

Syntax - <topic name>: <html file> | <JavaScript file>

JavaScript Basics
1. Hello World!:
  1. Inline Script: hello_i.html
  2. External Script: hello_e.html | hello.js
2. Variables & Data Types: var_dt.html | var_dt.js
3. Variable Mutation & Type Coercion: vm_tc.html | vm_tc.js
4. Basic Operators: operators.html | operators.js
5. Coding Challenge I: challenge_1.html | challenge_1.js
6. Control Structures & Boolean Logic: cs_bl.html | cs_bl.js
7. Coding Challenge II: challenge_2.html | challenge_2.js
8. functions - Declarations & Expressions: functions.html | functions.js
9. Arrays: arrays.html | arrays.js
10. Coding Challenge III: challenge_3.html | challenge_3.js
11. Objects - Properties & Methods: objects.html | objects.js
12. Coding Challenge IV: challenge_4.html | challenge_4.js
13. Looping & Iteration: loops.html | loops.js
14. Coding Challenge V: challenge_5.html | challenge_5.js
JS Behind the Scenes
1. Execution Context & Execution Stack: exec.html | exec.js
2. Exectution Context in Detail
  1. Hoisting: hoisting.html | hoisting.js
  2. Scoping & Scope Chain: scope.html | scope.js | scope.pdf - view or download
  3. The this Keyword: this.html | this.js
JS DOM: The Pig Game
1. Common Markup for ii-vii: index.html & style.css
2. DOM Access & Manipulation: app.js
3. Events & Event Handling: app.js
4. Adding, Removing & Toggling HTML Classes: app.js
5. DRY Principle & More DOM Manipulation: app.js
6. Creating Initialization Function for the Game: app.js
7. Adding Game State: app.js final version (Easy) | Play the game @CodeSandBox
8. Pig Game: app.js final version (Hard) | Play the game @Repl.it | Updated Markup - index.html & style.css
Advanced JS: Objects & Functions
1. Object Creation, Inheritence & prototype Chain: obj.html | obj.js | prototypeChain.pdf - view or download
2. Primitives vs. Objects: prim_vs_obj.html | prim_vs_obj.js
3. First Class Functions: first_class_functions.html | first_class_functions.js
4. Immediately Invoked Function Expressions (IIFE): iife.html | iife.js
5. Closures: closure.html | closure.js | closure.pdf - view or download
6. bind(), call() & apply(): bind_call_apply.html | bind_call_apply.js
7. Coding Challenge VII: challenge_7.html | challenge_7.js
8. Event Bubbling, Target Element & Event Delegation: eventDelegation.html | eventDelegation.pdf - view or download. Reading of eventDelegation.pdf required before understanding the code from Budgety App (k) and thereafter.
9. Budgety App
  1. Common Markup: index.html & style.css
  2. Module Pattern, Encapsulation & Separation of Concerns: app.js
  3. keypress Events & event Object: app.js
  4. Reading HTML Input Data w. Separation of Concerns: app.js
  5. Adding the Initialization Function: app.js
  6. Function Constructors and Data Structures for Incomes & Expenses: app.js
  7. Avoiding Data Structure Conflicts & Passing Data from One Module to Another: app.js
  8. Usage of innerAdjacentHTML() method & replace() method: app.js
  9. Usage of querySelectorAll() method, Conversion of NodeList to Array & the usage of forEach() method: app.js
  10. Converting HTML Field Inputs to Numbers & Preventing False Item Inputs: app.js
  11. Creating functions for a singular purpose: app.js
  12. Event Delegation in Practice - The parentNode property: app.js
  13. Usage of map() and splice() methods on an array: app.js
  14. How to remove an element from the DOM using removeChild(): app.js
  15. Usage of prototype to define a method in a predefined function constructor: app.js
  16. How to implement a forEach() for NodeList instead of array: app.js
  17. How to use different String methods to manipulate strings: app.js
  18. How to get the current date using the Date object constructor: app.js
  19. How and when to use change events: app.js
  20. Budgety App: app.js (final version) | Use the app @netlify
Next Generation JavaScript - Intro to ES6/ES2015
1. List of New Concepts in ES6: es6.html
2. Variables declared using let & const: let_const.html | let_const.js
3. Blocks & IIFEs: block_iife.html | block_iife.js
4. Strings & String Functions: strings.html | strings.js
5. Arrow Functions Intro: arrow_func.html | arrow_func.js
6. Arrow Functions - Lexical this Keyword: arrow_func_this.html | arrow_func_this.css | arrow_func_this.js
7. Destructuring: destructuring.html | destructuring.js
8. Arrays in ES6 (ES2015): arrays.html | arrays.css | arrays.js
9. The Spread ... Operator: spread.html | spread.css | spread.js
10. Function Parameters
  1. Rest Parameters: rest.html | rest.js
  2. Default Parameters: default.html | default.js
11. The Map Data Structure: map.html | map.js
12. classes (Syntactic Sugar): class.html | class.js
13. Inheritance - Classes & Subclasses (ES5 - Object.create() / ES6 - extends): inheritance.html | inheritance.js
14. Challenge VIII: challenge8.html | challenge8.js
Asynchronous JavaScript
1. An Example of Asynchronous JavaScript: intro.html
2. Understanding Asynchronous JS, The Event Loop: event_loop.html | event_loop.pdf - view or download
3. Callback Hell - The Old Way: callback_hell.html
4. From Callback Hell to Promises: promise.html | promise.pdf - view or download
5. From Promises to async/await in ES8/ES2017: async_await.html
6. AJAX & API - What do they mean? : ajax_api.html | ajax_api.pdf - view or download
7. Making AJAX Calls Using fetch() and
  1. Promises: fetch_promise.html | fetch_promise.js
  2. async/await: fetch_async_await.html | fetch_async_await.js
Modern JavaScript Using ES6, NPM, Babel & Webpack
1. Introduction: intro.html
2. An Overview of Modern JavaScript: overview.html | overview.pdf - view or download
3. A Modern Setup Installing Node.js and NPM: nodejs.html | package.json | nodejs.pdf - view or download
4. A Modern Setup Configuring Webpack: webpack.html | index.js | test.js | webpack.config.js | package.json | bundle.js | webpack.pdf - view or download
5. A Modern Setup Configuring Webpack Dev Server: webpack_dev_server.html | index.js | test.js | webpack.config.js | package.json | index.html | bundle.js | webpack_dev_server.pdf - view or download
6. A Modern Setup Configuring Babel: babel.html | index.js | test.js | package.json | bundle.js | babel.pdf - view or download | tooling_changes_babel.html
7. Forkify App Development (Path: ./Modern-JS-ES6-NPM-Babel-Webpack/forkify_project/)
  1. Common Markup & Styling: ./dist/index.html | ./dist/css/style.css | Forked from: Jonas Schmedtmann's Starter Code @GitHub
  2. MVC Architecture: forkify_mvc.html | forkify_mvc.pdf - view or download
  3. How ES6 Modules Work: ./src/js/index.js | ./src/js/models/Search.js | ./src/js/views/searchView.js
  4. Making Our First API Call: ./src/js/index.js
  5. Building the Search Model Using ES6 classes: ./src/js/index.js | ./src/js/models/Search.js
  6. Building the Search Controller (keeping in mind, the application state): ./src/js/index.js | ./src/js/models/Search.js
  7. Building the Search View (base.js contains the DOM elements)
    1. Rendering the Results onto the front-end: ./src/js/index.js | ./src/js/models/Search.js | ./src/js/views/searchView.js | ./src/js/views/base.js
    2. Using the reduce() & join() methods to limit the Recipe Title: ./src/js/index.js | ./src/js/models/Search.js | ./src/js/views/searchView.js | ./src/js/views/base.js
    3. Rendering the Loading Spinner: ./src/js/index.js | ./src/js/models/Search.js | ./src/js/views/searchView.js | ./src/js/views/base.js
  8. Setting Up Pagination Using Element.closest(), Event Delegation and data-* attribute in HTML5: ./src/js/index.js | ./src/js/models/Search.js | ./src/js/views/searchView.js | ./src/js/views/base.js
  9. Building the Recipe (Data) Model [Part 1]: ./src/js/index.js | ./src/js/models/Recipe.js
  10. Building the Recipe Controller Using the hashchange Event: ./src/js/index.js | ./src/js/models/Recipe.js
  11. Building the Recipe (Data) Model [Part 2] Using the eval() and map() methods & Map object: ./src/js/index.js | ./src/js/models/Recipe.js
  12. Building the Recipe View
    1. Looping inside a Template String to generate HTML: ./src/js/index.js | ./src/js/models/Recipe.js | ./src/js/views/recipeView.js | ./src/js/views/base.js
    2. Using 3^rd Party API (fractional) to convert the Quantities into a Fraction & Highlighting the Selected Recipes using classList property: ./src/js/index.js | ./src/js/models/Recipe.js | ./src/js/views/recipeView.js | ./src/js/views/searchView.js | ./src/js/views/base.js | package.json
    3. Updating Recipe Servings Using Event Delegation (matches() method): ./src/js/index.js | ./src/js/models/Recipe.js | ./src/js/views/recipeView.js | ./src/js/views/base.js
  13. Building the Shopping List (Data) Model Using uniqid: ./src/js/index.js | ./src/js/models/List.js | package.json
  14. Building the Shopping List View (Front-End): ./src/js/index.js | ./src/js/views/listView.js | ./src/js/models/List.js | ./src/js/views/base.js
  15. Building the Shopping List Controller: ./src/js/index.js | ./src/js/views/listView.js | ./src/js/models/List.js | ./src/js/views/recipeView.js | ./src/js/views/base.js
  16. Building the Likes (Data) Model: ./src/js/index.js | ./src/js/models/Likes.js
  17. Building the Likes Controller: ./src/js/index.js | ./src/js/models/Likes.js | ./src/js/views/base.js
  18. Building the Likes View (Front-End): ./src/js/index.js | ./src/js/views/likesView.js | ./src/js/views/recipeView.js | ./src/js/views/searchView.js | ./src/js/models/Likes.js | ./src/js/views/base.js
  19. Implementing Persistent Data With localStorage() API and Implementing Delete All Shopping Items Functionality List's Model, View & Controller: ./src/js/index.js | ./src/js/views/likesView.js | ./src/js/views/searchView.js | ./src/js/views/listView.js | ./src/js/models/Likes.js | ./src/js/models/List.js | ./src/js/views/base.js
  20. Forkify App Summary
    1. Controller: ./src/js/index.js
    2. Models: ./src/js/models/Search.js | ./src/js/models/Recipe.js | ./src/js/models/List.js | ./src/js/models/Likes.js
    3. Views: ./src/js/views/searchView.js | ./src/js/views/recipeView.js | ./src/js/views/listView.js | ./src/js/views/likesView.js
    4. Common Code Base: ./src/js/views/base.js
    5. Config: package.json | webpack.config.js | .babelrc
    6. Final Bundled JS: ./dist/js/bundle.js
  21. Forkify App: Use here, @Repl | Use here, @Netlify

ch-sriram / javascript Goto Github PK

javascript's Introduction

JavaScript - Proof of Concept

Child Repositories (Project Deployments)

Development Workflow

JavaScript Basics

JS Behind the Scenes

JS DOM: The Pig Game

Pig Game: app.js final version (Hard) | Play the game @Repl.it | Updated Markup - index.html & style.css

Advanced JS: Objects & Functions

Budgety App

Budgety App: app.js (final version) | Use the app @netlify

Next Generation JavaScript - Intro to ES6/ES2015

Asynchronous JavaScript

Modern JavaScript Using ES6, NPM, Babel & Webpack

Forkify App Development (Path: ./Modern-JS-ES6-NPM-Babel-Webpack/forkify_project/)

Forkify App: Use here, @Repl | Use here, @Netlify

javascript's People

Contributors

Stargazers

Watchers

Forkers

Recommend Projects

Recommend Topics

Recommend Org