Build an App with JavaScript & jQuery

1. Build an App with Javascript & jQuery
Sept 2017
WIFI: In3Guest
http://bit.ly/dc-web-app
1

2. Instructor
Sonja Duric
Full-Time Thinkful Student
SANS Lethal Forensicator
PSL Enthusiast
WiFi: In3Guest http://bit.ly/dc-web-app
2

3. About you
What's your name?
Why do you want to learn JavaScript/jQuery?
What's your programming experience?
WiFi: In3Guest http://bit.ly/dc-web-app
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.
WiFi: In3Guest http://bit.ly/dc-web-app
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
WiFi: In3Guest http://bit.ly/dc-web-app
5

6. This is what we're making
WiFi: In3Guest http://bit.ly/dc-web-app
6

7. Agenda
Go over starter code (10 min)
Learn key jQuery & Javascript concepts (30 min)
Build your app! (30 min)
Go over solutions (10 min)
Next steps (10 min)
WiFi: In3Guest http://bit.ly/dc-web-app
7

8. Quick HTML/CSS Refresher
WiFi: In3Guest http://bit.ly/dc-web-app
8

9. Starter code walkthrough
https://repl.it/Kon8
WiFi: In3Guest http://bit.ly/dc-web-app
9

10. Think of our HTML as a "tree"
<form>
list-content
<input>
item-input
<ul>
shopping-list
<button>
add-item
10
WiFi: In3Guest http://bit.ly/dc-web-app

11. Why do we use Javascript and jQuery?
<input> <button>
<form>
WiFi: In3Guest
<ul>
http://bit.ly/dc-web-app
11

12. Why do we use Javascript and jQuery?
<input>
<ul>
shopping-list <button>
<li>
String
cheese
<li>
Summer
sausage
<li>
Chicken
nuggets
12
<form>
WiFi: In3Guest http://bit.ly/dc-web-app

13. "Grabbing" a section directly
$('.shopping-list')
jQuery always starts with this
Element to grab
WiFi: In3Guest http://bit.ly/dc-web-app
13

14. Attaching an "Event Listener"
WiFi: In3Guest http://bit.ly/dc-web-app
14

15. jQuery walkthrough
WiFi: In3Guest http://bit.ly/dc-web-app
15

16. Real developers use Google... a lot
WiFi: In3Guest http://bit.ly/dc-web-app
16

17. Let's work on the first step together
https://repl.it/Kon8
WiFi: In3Guest http://bit.ly/dc-web-app
17

18. Solution
WiFi: In3Guest http://bit.ly/dc-web-app
18

19. Ways to keep learning
19

20. For aspiring developers, bootcamps fill the gap
20

21. 91%91%
job-placement rate + job guarantee
Link for the third party audit jobs report:
https://www.thinkful.com/bootcamp-jobs-statshttps://www.thinkful.com/bootcamp-jobs-stats
Thinkful's track record of getting students jobs
21

22. Our students receive unprecedented support
Learning Mentor
Career MentorProgram Manager
Local Community
You
22

23. Mentorship enables flexible learning
Learn anywhere,
anytime, & at your own
pace
You don't have to quitYou don't have to quit
your job to startyour job to start
career transitioncareer transition
23

24. Thinkful Two-Week Trial
Talk to one of us and email benjy@thinkful.combenjy@thinkful.com to learn more
Two-week Free Course Trial
Start with HTML, CSS and JavaScript
Unlimited Q&A sessions
Option to continue with full bootcamp
Financing & scholarships available
Offer valid for one week after eventOffer valid for one week after event
Benjy
Ed Advisor
24