Let's Build A Javascript Modal Plugin From Scratch
Welcome to the first of my Javascript Workouts. The aim with this series is to build as many practical Javascript elements as possible - no frameworks, no plugins. Just plain JS.
In this first video, we'll build ourselves a vanilla Javascript modal plugin. We'll setup default configuration options but allow the user to override them. We'll handle the ability to switch between modals, and lastly, we'll emit four custom events: before opening modal, after opening modal, before closing modal, and after closing modal.
My website
https://www.pixelrocket.store
Project Files
https://www.dropbox.com/s/fcymlamp7rkngqq/modal-plugin.zip?dl=0
Custom Events
https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent
Timestamps
0:00 Intro
0:56 Setup starting files
2:10 Difference between procedural JS and OOP JS
3:25 Setup our modal class
4:30 Constructor function
6:00 Setup default options
11:00 Setup init function
13:28 Setup modal triggers
15:50 Binding inside OOP
21:48 Handle modal open
25:06 Setup modal closers
27:28 Handle modal close
31:08 Setup modal CSS classes
39:10 Handle switching between modals
40:31 Handle custom event dispatching
-
1:41
AHMEDKAZEKA97
2 years agoMaster HTML5 Bootstrap5 & ReactJs From Scratch
45 -
30:01
BellaCapilla
1 year agoA Beginner's Guide to Webpack
11 -
1:21:58
mblayman
2 years agoYou Don't Need JavaScript
66 -
4:47:16
Time to Code with Ali
1 year ago $0.01 earnedBuild a Full Stack Next.js APP from scratch (Step-by-Step for beginners)
533 -
5:31
Blazee_Tech
1 year ago5 best free JavaScript libraries in 2023
28 -
47:51
sjhd0101
1 year agoMAKING A DISCORD BOT IN C# | #14 - MORE DISCORD COMPONENTS & MODALS
2 -
1:37:23
NorbertBM
1 year ago3 HTML CSS and JavaScript Projects
18 -
7:16
JBoothWebDev
1 year agoElementary Javascript: Comments
1 -
18:49
LearnCode.academy
1 year agoJavascript Events Tutorial - How Web Developers Respond to User Input
8 -
1:35:52
NeoDev
11 months agoMobile-first design with Sass and JS for beginners?
3