Slide 1
Slide 1 text
Learn JavaScript
by Building a
Shopping App in
CodePen
Slide 2
Slide 2 text
Hello!
I am Aaron Snowberger.
I am here because I love to introduce people
to JavaScript. You can find me at aaron.kr
2
Slide 3
Slide 3 text
1.
Why JavaScript
AKA “Why I think it’s cool…” Full app
Slide 4
Slide 4 text
Why JavaScript
(for new learners)
1. Web code’s third leg
2. It’s everywhere
3. Noob-friendly
4. Powerful
5. Fun
6. Bright future
4
Slide 5
Slide 5 text
2.
About this project
AKA “How we’ll build this…”
Slide 6
Slide 6 text
Project Considerations
1. Shopping List
● Like a To-do list
● Click to “add/remove”
● Type to “create”
● Drag to “delete”
● Reset buttons
● Visual feedback
(CSS animations)
2. Store
● Collection of data
● Change view type
● Filterable
● Searchable
● “Add” to cart
● Visual feedback
(Toast notifications)
3. Cart
● Cloned child nodes
● Dynamic updates
● Checkout
progression + modal
6
Slide 7
Slide 7 text
HTML
● Semantic markup
○ vs.
○ Descriptive class
names
● Structure first
○ Build “modules”
(aka components)
First, some notes on
HTML & CSS
CSS
- Useful visual indicators
- border-top +
border-bottom
- transition: all 0.3s;
- animation +
keyframes (jiggle)
- transform, opacity,
positioning
- Grid + Flexbox
7
HTML + CSS
Slide 8
Slide 8 text
Considerations
● Like a To-do list
● Click to “add/remove”
● Type to “create”
● Drag to “delete”
● Reset buttons
● Visual feedback
(CSS animations)
1. Shopping List
How to
- DOM queries
- getElementById()
- querySelectorAll()
- DOM events
- onclick
- onkeyup
- ondrag
- addEventListener()
- setTimeout() / setInterval()
8
End
Begin
Slide 9
Slide 9 text
Considerations
● Shift screens (L/R)
● Change input field
● Visual feedback
(Toast notifications)
2. Change Screens
How to
- Useful JS Statements
- Declarations
- var vs
- const vs
- let
- switch - Toast
- CodePen
- Add External Pens
9
End
Begin
Slide 10
Slide 10 text
Considerations
● Collection of data
● Change view type
● Filterable
● Searchable
● “Add” to cart (clone it)
3. Store
How to
- Access DOM nodes (objects)
- Arrays, loops, conditionals
- Useful functions
- .sort() (Array)
- .indexOf() (String)
- parseFloat() - filter
- .reverse() - filter
- .toLowerCase() - search
10
End
Begin
Slide 11
Slide 11 text
Considerations
● Cloned child nodes
● Dynamic updates (price
calculation)
● Checkout modal
4. Cart + Checkout
How to
- Useful functions
- .cloneNode()
- .appendChild()
- MutationObserver
- parseFloat()
- .toFixed(2)
- .forEach()
- Custom Data Attributes
- data-item-price
11
End
Begin
Slide 12
Slide 12 text
“Just Keep Learning
12
Resources
● MDN JavaScript
● LinkedIn Learning
● Udacity
● Udemy
● Stack Overflow (search)
● CSS Tricks (CSS)
Slide 13
Slide 13 text
Thanks!
Any questions?
You can find me at:
▰ @jekkilekki
▰ aaron.kr
13