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