JavaScript - Proof of Concept

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

Resources:

  1. JS Course & GitHub Repo for JS by Jonas Schmedtmann
  2. You Don’t Know JS by Kyle Simpson (getify)
  3. JS Docs by MDN

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.

Development Workflow

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

  1. 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

  2. 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

  3. 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

  4. 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

  5. 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

  6. 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

  7. 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 3rd Party API ([fractional](https://github.com/ekg/fraction.js/)) 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](https://github.com/adamhalasz/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