Learn JavaScript by Building a Shopping App in Codepen

https://aaron.kr/content/talks/learn-javascript-by-building-a-shopping-app-in-codepen/

Presented at JS Conf Korea 2019: https://2019.jsconfkorea.com/en/tutorials

As I was teaching basic web programming in high school at the time, I decided to try to deepen their understanding of JavaScript by building something practical from scratch using only vanilla JS (not any kind of framework or library). Therefore, I helped them create a shopping app from scratch, and then presented the work in a tutorial format at the conference.

This presentation lays out the considerations for the project as well as some key points for each stage in the process.

CodePen Collection: https://codepen.io/collection/DayYgm?cursor=ZD0xJm89MSZwPTEmdj0z

Transcript

1. Learn JavaScript
   by Building a
   Shopping App in
   CodePen
   

   View Slide

2. Hello!
   I am Aaron Snowberger.
   I am here because I love to introduce people
   to JavaScript. You can find me at aaron.kr
   2
   

   View Slide

3. 1.
   Why JavaScript
   AKA “Why I think it’s cool…” Full app
   

   View Slide

4. 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
   

   View Slide

5. 2.
   About this project
   AKA “How we’ll build this…”
   

   View Slide

6. 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
   

   View Slide

7. 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
   

   View Slide

8. 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
   

   View Slide

9. 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
   

   View Slide

10. 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
    

    View Slide

11. 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
    

    View Slide

12. “Just Keep Learning
    12
    Resources
    ● MDN JavaScript
    ● LinkedIn Learning
    ● Udacity
    ● Udemy
    ● Stack Overflow (search)
    ● CSS Tricks (CSS)
    

    View Slide

13. Thanks!
    Any questions?
    You can find me at:
    ▰ @jekkilekki
    ▰ aaron.kr
    13
    

    View Slide