Learn JavaScript by Building a Shopping App in CodePen

Hello!

I am Aaron Snowberger.

I am here because I love to introduce people to JavaScript. You can find me at aaron.kr

2

1.

Why JavaScript

AKA “Why I think it’s cool…”

Full app

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

2.

About this project

AKA “How we’ll build this…”

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

First, some notes on �HTML & CSS

HTML

• Semantic markup
• <aside> vs. <div>
• Descriptive class names
• Structure first
• Build “modules”�(aka components)

CSS

• Useful visual indicators
• border-top + border-bottom
• transition: all 0.3s;
• animation + �keyframes (jiggle)
• transform, opacity, positioning
• Grid + Flexbox

7

HTML + CSS

1. Shopping List

Considerations

• Like a To-do list
• Click to “add/remove”
• Type to “create”
• Drag to “delete”
• Reset buttons
• Visual feedback �(CSS animations)

How to

• DOM queries
• getElementById()
• querySelectorAll()
• DOM events
• onclick
• onkeyup
• ondrag
• addEventListener()
• setTimeout() / setInterval()

8

End

Begin

2. Change Screens

Considerations

• Shift screens (L/R)
• Change input field
• Visual feedback�(Toast notifications)

How to

• Useful JS Statements
• Declarations
• var vs
• const vs
• let
• switch - Toast
• CodePen
• Add External Pens

9

End

Begin

3. Store

Considerations

• Collection of data
• Change view type
• Filterable
• Searchable
• “Add” to cart (clone it)

How to

• Access DOM nodes (objects)
• Arrays, loops, conditionals
• Useful functions
• .sort() (Array)
• .indexOf() (String)
• parseFloat() - filter
• .reverse() - filter
• .toLowerCase() - search

10

End

Begin

4. Cart + Checkout

Considerations

• Cloned child nodes
• Dynamic updates (price calculation)
• Checkout modal

​

​

How to

• Useful functions
• .cloneNode()
• .appendChild()
• MutationObserver
• parseFloat()
• .toFixed(2)
• .forEach()
• Custom Data Attributes
• data-item-price

11

End

Begin

Just Keep Learning

12

Resources

• MDN JavaScript
• LinkedIn Learning
• Udacity
• Udemy
• Stack Overflow (search)
• CSS Tricks (CSS)

“

Thanks!

Any questions?

You can find me at:

• @jekkilekki
• aaron.kr�

13