Web Portfolio Projects: Binding and Propagation
1h 9mIntermediate2019-01-16
Authors

Leigh Lawhon
Front-End Developer, UX/UI Designer, Instructor, Author
Course details
Are you familiar with foundational JavaScript concepts, but want to continue to build your understanding of this essential scripting language? In this course, explore some more advanced JavaScript concepts—including how to manage propagation and binding—as you learn how to build a few interesting card games. Instructor Leigh Lawhon begins by explaining how to plan your application, breaking down the card game into its basic objects. She then goes over how to add a card flip animation to your project using CSS3, looks at three contexts of "this" with methods, and explains how to add a shuffle function. Leigh also goes over the drag-and-drop life cycle, how to use prototypical inheritance to optimize your code, and more.
Learning objectives
Working with prototype and dynamic elements
Using bind, call, and apply
Using the Fisher–Yates formula
When to use e.preventDefault() and when to avoid it
Drag-and-drop life cycle
Using prototypical inheritance to optimize your code
Learning objectives
Working with prototype and dynamic elements
Using bind, call, and apply
Using the Fisher–Yates formula
When to use e.preventDefault() and when to avoid it
Drag-and-drop life cycle
Using prototypical inheritance to optimize your code
Skills covered
JavaScriptOracleProgramming LanguagesSoftware DevelopmentDeep Dive (X:Y)
Concepts
Introduction
- Welcome
- What you should know
- Using the exercise files
Working with Prototype and Dynamic Elements
- Plan our application
- Pseudo code
- Immediately invoked function expression
- Dynamic elements - Game and deck
- Dynamic elements - Cards
Animation and the Meaning of This
- CSS animations - Card flip
- The meaning of this
- Bind, call, and apply
- Apply concepts
- Shuffling
- Stacking
- Challenge - Refactor
- Solution - Refactor
Propagation and Drag and Drop
- Propagation
- Discard rows and rules
- Discard pile
- Drag and drop
Conclusion
- Next steps