0% completed

All LessonsFree Lessons (8)

Function Scope, Block Scope, Constants

Introduction var vs let Constants let, const, and var Exercise on Function Scope, Block Scope, Constants

Arrow Functions

Fat Arrow Syntax Context Binding Exercise on Arrow Functions

Default Arguments

Hacks in ES5 The ES6 way Exercise on Default Arguments

Classes

Prototypal Inheritance Prototypal Inheritance in ES5 Inheritance - The ES6 way Super Shadowing Creating Abstract Classes Getters and Setters Static Methods Exercise on Classes

Destructuring

Object Property - Shorthand Notation Destructuring Examples Deeper Destructuring, destructuring functions, and pitfalls Exercise on Destructuring

Spread Operator and Rest Parameters

Rest Parameters Spread Operator Destructuring with the Spread Operator Exercise on Spread Operator and Rest Parameters

Objects in ES6

Equality Mixins Shorthand for Creating and Destructuring Objects Computed Object Keys Shorthand for Defining Operations in Objects Object Prototype Extensions and Super Calls Exercise on Objects in ES6

Tail Call Optimization and Other Function Features in ES6

Stacks Tail call optimization Name Property new.target Exercise on Tail Call Optimization & other Function Features

Symbols

Symbol Global Symbol Registry Symbols as Semi-Private Property Keys Creating enum Types Well-known Symbols Exercise on Symbols

The for-of loop

Introducing the for-of loop UTF-32 support Destructuring and the DOM in the for-of loop Exercise on the for-of loop

String and Template Literals

Introduction New String Methods Better Unicode Support Template Literals Tagged Templates Exercise on String and Template Literals

Sets, Maps, and their Weak Versions

Data Structures 101 ES6 Sets Iterating Sets ES6 Maps Iterating Maps Weak Sets Weak Maps Exercise on Sets, Maps, and their Weak Versions

Iterators and Generators in Depth

Iterables and Iterators Consuming Iterables Built-in Iterables Iterables with Sets and Maps The Role of the Iterable Interface Generators Generators and Iterators Iterators and Destructuring Combining Generators Passing Parameters to Iterables Practical Applications Exercise on Iterators and Generators

ES6 Promises

Promise States Creating Promises in ES6 Handling the Fulfilled or Rejected States Handling Multiple Promises Exercise on ES6 Promises

Configuring ES6 with Webpack

The Task Step 1: index.html Step 2: Initialize your Application and Configure Webpack Step 3: Account Module Step 4: Create the Entry Point Step 5: Compile and Run the Application

The Reflect API

Reflection Creating Objects Manipulating Prototypes Property Access and Modification Exercise on the Reflect API

Proxies in Practice

Introduction Defining Proxies Revocable Proxies Use Cases Exercise on Proxies

Math and Number Extensions

Math Extensions Number Extensions

ES2016

The Exponential Operator Array `includes`

ES2017

New Object Extensions Object.entries and Object.values Object.getOwnPropertyDescriptors New String Extensions Async-Await

Your Final Exam: ES6 Job Interview Questions

Writing an Array Extension

Binary Gap Exercise in Codility

Ten JavaScript Theory Questions

JavaScript Theory Quiz

Connect-4 Solver

Binary Trees, Recursion and Tail Call Optimization in Javascript

Painting on an HTML5 Canvas

Event Delegation in a Pomodoro App

Pomodoro App Markup and Styling Refactoring

Persistence with Local Storage

Pomodoro APP to Kanban Board

Adding Tasks to Columns

Selecting Cards

Dragging and Dropping Cards

Insert the Timer Module in the Pomodoro App

Countdown Timer Integration in the Pomodoro App

SQL and Map-Reduce-Filter

Bonus chapter: Your learning plan

Introduction Sync your Learning Plan with your Career Plan Set your Goals and Milestones The Big Picture Get Feedback and Iterate Present your Deliverables Summary

JavaScript In Practice: ES6 And Beyond/

...

/

Dragging and Dropping Cards

Dragging and Dropping Cards

Shift cards around by dragging and dropping.

We'll cover the following...

Exercise:

Make it possible to drag and drop cards.

Source code: Use the PomodoroTracker6 folder as a starting point. The result is in PomodoroTracker7.

Solution: There is a draggable attribute in HTML5. When using this attribute, you will be able to automatically move draggable elements by holding down the mouse button. Let’s make our selected card draggable:

Press + to interact

const cardTemplate = ( { task, id, columnIndex } ) => `
    <div class="task  js-task ${ task.selected ? 'selected' : '' }" 
         data-id="${id}" 
         draggable="${ task.selected ? "true" : "false" }"
         data-column-index="${columnIndex}">
...
    </div>
`;

So far we have only added one attribute, but as soon as you start dragging the selected card, you can see that a higher opacity version of the selected card follows ...