.

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

2. Instructor
TA
Dave Hoel
Thinkful Graduate
Full Stack Web Developer
Coding Instructor
Dixon Begay
2

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

4. Suggestions for learning
We're making something real!
The struggle is real!
Take full advantage of our support!
4

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

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

7. Quick HTML/CSS Refresher
7

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

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

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

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

12. jQuery walkthrough
12

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

14. Real developers use Google... a lot
14

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

16. Solution
16

17. 17

18. 18

19. 19

20. 20

21. 21