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 of JavaScript and jQuery, building the app, reviewing solutions, and discussing next steps. Attendees will learn how to grab and manipulate elements of HTML using jQuery and attach event listeners to make their app interactive. The instructor and TA will provide support as attendees work to build their first step of the shopping list app.

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

2. Instructor
TA
Sean Jun
Thinkful Graduate
Software Developer, Intel
Jessica Cottrell
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