This document outlines an agenda for a workshop to build an app with JavaScript and jQuery. The agenda includes going over starter code, learning key concepts, building the app, reviewing solutions, and discussing next steps. Thinkful will help participants become developers through mentorship and project-based learning. Suggestions are made to treat the workshop as a chance to build something real, not get discouraged, and take advantage of support.

1. Build an App with JavaScript & jQuery
September 2017
WIFI: The Department Guest
phxbit.ly/web-app-
1

2. Instructor
TA
Sean Jun
Thinkful Graduate
Software Developer, Intel
2

3. About you
What's your name?
Why do you want to learn JavaScript/jQuery?
http://www.loremipsum.com/example
Wi-Fi: orem Ipsum
PW: orem Ipsum
L
L 3

4. About Thinkful
Thinkful helps people become developers or data scientists
through one-on-one mentorship and project-based
learning.
These workshops are built using this approach.
4

5. Suggestions for learning
Don't treat this as a drill, we're making something real
Don't get discouraged, struggle leads to mastery
Don't be shy, take full advantage of our support
5

6. This is what we're making
http://www.loremipsum.com/example
Wi-Fi: orem Ipsum
PW: orem Ipsum
L
L 6

7. Agenda
Go over starter code (10 min)
Learn key jQuery & JavaScript concepts (20 min)
Build your app! (30 min)
Go over solutions (10 min)
Next steps (10 min)
http://www.loremipsum.com/example
Wi-Fi: orem Ipsum
PW: orem Ipsum
L
L 7

8. Quick HTML/CSS Refersher
8

9. Starter code walkthrough
http://bit.ly/tf-shopping-list
bit.ly/web-app-la
9

10. Think of our HTML as a "tree"
<form>
list-content
<input>
item-input
<ul>
shopping-list
<button>
add-item
10

11. What is JavaScript? What is jQuery?
<input>
<ul>
shopping-list <button>
<li>
String
cheese
<li>
Summer
sausage
<li>
Chicken
nuggets
11
<div>

12. "Grabbing" a section directly
$('.shopping-list')
jQuery always starts with this
Element to grab
12

13. jQuery walkthrough
13

14. Attaching an "Event Listener"
http://www.loremipsum.com/example
Wi-Fi: orem Ipsum
PW: orem Ipsum
L
L 14

15. Real developers use Google... a lot
15

16. Let's work on the first step together
http://bit.ly/tf-shopping-list
http://www.loremipsum.com/example
Wi-Fi: orem Ipsum
PW: orem Ipsum
L
L 16

17. Solution
17

18. 18

19. 19

20. 20

21. 21

22. 22

23. 23