Skip to content
/ JavaScript Public

Proof of Concept: Beginner to Advanced Implementations of the Concepts in JavaScript.

ch-sriram.github.io/javascript/

License

MIT license
2 stars 2 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

Ch-sriram/JavaScript

BranchesTags

Repository files navigation

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) 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

About

Proof of Concept: Beginner to Advanced Implementations of the Concepts in JavaScript.

ch-sriram.github.io/JavaScript/

Topics

nodejs javascript map npm babel webpack promise arrow-functions document-object-model iife async-await event-delegation fetch-api hoisting rest-parameters prototype-chain scope-chain

Resources

Readme

License

MIT license
Activity

Stars

2 stars

Watchers

2 watching

Forks

2 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages