...

1. Build an App with Javascript & jQuery
May 2017
Wi-Fi Name: <Network Name>
Password: <Network Password>
http://bit.ly/thinkful-jquery-app

2. About me
Connor Ericson
Thinkful Alumnus
Instructor, Thinkful

3. About our TA
Jasjit Singh
GM, Thinkful Atlanta

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

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

6. About you
What's your name?
What's your goal?
What is your coding background?

7. This is what we're making

8. Agenda
Walkthrough HTML/CSS in starter code (5 min)
Learn key jQuery & Javascript concepts (25 min)
Build your app! (35 min)
Go over solutions (5 min)
Next steps (5 min)

9. Starter code
http://bit.ly/tf-shopping-list

10. Quick HTML/CSS Refersher
index.html
style.css
Result
<header class="title">Hello World!</header>
.title {
color: blue;
text-decoration: line-through;
}
Hello World!

11. Starter Code Walkthrough (HTML)

12. Starter Code Walkthrough (HTML)

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

14. What is Javascript? What is jQuery?
<input> <ul>
shopping-list
<button>
<li>
String
Cheese
<li>
Summer
Sausage
<li>
Chicken
Nuggets
<div>

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

16. Grabbing a section with "traversing"
$('.shopping-list').parent()
<div>
list-content
<input>
item-input
<ul>
shopping-list
<button>
add-item

17. Acting on grabbed section
$('.shopping-list').remove()
<div>
list-content
<input>
item-input
<ul>
shopping-list
<button>
add-item

18. Changing section appearance
$('.add-item').addClass("pink")
Result
.pink {
background: pink;
}
<button class="add-item pink">Add Item</button>

19. "Chaining" functions
$('.shopping-list').parent().addClass("pink")
<div class="pink">
list-content
<input>
item-input
<ul>
shopping-list
<button>
add-item

20. Attaching an "Event Listeners"
$('.add-item').on("click", function(event) {
alert("I clicked on this button");
});
Click

21. Using "this"
$('.add-item').on("click", function(event) {
$(this).addClass("pink");
});
Click

22. Real developers use Google... a lot

23. Let's start building our app!
http://bit.ly/tf-shopping-list

24. Challenge #1: Add item when button clicked
Add event listener when button is clicked (done)
Grab inputted text from ".item-input" (done)
Create HTML to add to ".shopping-list" (done)
Add HTML (itemHTML) to ".shopping-list"
Remove inputted text from ".item-input"

25. Solution

26. Ways to keep learning
More Structure
Less Structure
More SupportLess Support

27. 325+ mentors325+ mentors with an average of
10 years of experience10 years of experience in the
field

28. Support 'round the clock
Your Mentor
Q&A Sessions
Career Coach
In-person Workshops
Slack
Program Manager
YouYou

29. Our results
93%93%job-placement rate
Kaeside IwuagwuKaeside Iwuagwu
Link for the third party audit jobs report:
https://www.thinkful.com/bootcamp-jobs-https://www.thinkful.com/bootcamp-jobs-
statsstats
Frontend Developer
Sierra GreggSierra Gregg
Software Engineer
JP EarnestJP Earnest
Web Developer

30. Give Thinkful a try
Talk to me (or email jasjit@thinkful.com ) if you're interestedTalk to me (or email jasjit@thinkful.com ) if you're interested
Initial 2-week trial includes six
mentor sessions for $50
Learn HTML/CSS/Javascript
Option to continue into web
development bootcamp