Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Learn JavaScript by Building a Shopping App in Codepen

Learn JavaScript by Building a Shopping App in Codepen

I presented this tutorial 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.

Ff7c53d1086a3f7eded27ab4d4f816c5?s=128

Aaron Snowberger

September 03, 2019
Tweet

Transcript

  1. Learn JavaScript by Building a Shopping App in CodePen

  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
  3. 1. Why JavaScript AKA “Why I think it’s cool…” Full

    app
  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
  5. 2. About this project AKA “How we’ll build this…”

  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
  7. HTML • Semantic markup ◦ <aside> vs. <div> ◦ 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
  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
  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
  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
  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
  12. “Just Keep Learning 12 Resources • MDN JavaScript • LinkedIn

    Learning • Udacity • Udemy • Stack Overflow (search) • CSS Tricks (CSS)
  13. Thanks! Any questions? You can find me at: ▰ @jekkilekki

    ▰ aaron.kr 13