4. Let me start with a little about me. My name is X and my background is Y. We have some TA's that will be helping us today. I'm going to go around
and have them introduce themselves.
Speaker notes
5. About you
What's your name?
What brought you here today?
What is your programming experience?
bit.ly/web-app-la
3
6. I'd love to learn a little more about you guys. So can we go around the room and can everyone give us your name, what your goal is for attending
the class and your programming background?
Speaker notes
7. 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.
bit.ly/web-app-la
4
8. Thinkful is hosting the event tonight. Thinkful is a coding bootcamp built on a belief in one-on-one mentorship and project based learning. This
workshop today is designed using this approach. The bulk of the workshop will be you guys working one-on-one with our TAās to build a real project.
Speaker notes
9. 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
bit.ly/web-app-la
5
10. To get the most out of this class, we have three suggestions for getting the most our of this experience.
The ļ¬rst suggestion is to realize we're building something real and accept that's going to be messy. There will be many right answers and a good
project is never done. There will always be ways you can make it better.
Whatever your level, we're going to push you so it's a little hard. Even basic addition was hard at one point. Struggle is a part of mastery. Try not to
get discouraged.
Finally, we're here to help. Take advantage of that support, make sure to ask questions during lecture when you're confused. Make sure you call
your TA when you need help. When coding, be resourceful. Always!
Speaker notes
12. Today we're building a shopping list app. This app does three things. First you can type the list of an item to add and click the "add item" button to
add it to your shopping list. Second you can click on an item to check it off the list. Third you can click the X to remove the item altogether.
Speaker notes
13. 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)
bit.ly/web-app-la
7
14. Iāll start by walking you through the HTML/CSS starter code so you have a reference of what youāll be working with. Then Iāll go over important
Javascript and jQuery concepts that youāll need to complete the app. Youāll then build the app during which time the TAās and myself will be walking
around to help you guys out. At the end weāll go over solutions and then cover next steps for continuing your learning.
Speaker notes
16. HTML deļ¬nes the content and the structure of a page. We use "tags" to divide our HTML into sections. Each section of HTML has an opening tag,
and a closing tag (demonstrate).
In our HTML, we can create labels for our sections. We create labels by adding a "class=" some name in our opening tag. These labels help us
"grab" these sections both to add styles. But also as we'll see with jQuery, to manipulate our HTML with Javascript.
Lets start with adding styles. We add styles with CSS. We can basically grab a section using it's class. Then we can deļ¬ne different aspects of the
section we want to change. (demonstrate)
In this case, we are going to grab the "title" section, then make it blue and put a line through it.
Speaker notes
18. Alright, now let's dive into the starter code. Go ahead and go to this url to get the starter code. Weāre using a online code editor called Glitch which
will let us see the result of our code really quickly.
On the README.MD ļ¬le you should see an overview of the project and the challenges you'll be completing. The ļ¬les weāll be using today on the left
are client.js, style.css, and index.html. You can ignore server.js, package.json and .env. Once youāve written some code, click the āShow Liveā button
at the top to open a new tab that will automatically update as you edit your code.
Next let's go over the starter code so you guys know whatās going on. At the top of our index.html, we have a head element. This element is different
from most others because what it contains wonāt actually show up on the page. The main purpose of the head section is to pull other ļ¬les into our
app. This is known as āimportingā. You can see here that we're importing our styles.css, our client.js, and jQuery which will be discussing soon.
We generally put the content of our HTML, the stuff people might see, in the "body" section of our HTML (versus the "head" section).
The "list-content" section houses the three main components of our app. The ļ¬rst component is the text box where a user will type in their shopping
list item. The second component is a list where we will add items to our shopping cart. It's empty for now but as we add items to our list, it will show
up here. The third component is a button called Add Item. When people click on this button, the item they type in will be added to the list.
Speaker notes
19. Think of our HTML as a "tree"
<form>
list-content
<input>
item-input
<ul>
shopping-list
<button>
add-item
bit.ly/web-app-la
10
20. We can visualize these HTML components as a tree. We have a list-content section but inside that section, we have three smaller sections: our text
input, our shopping list, and our button.
In HTML, we call this tree the DOM or the "Document Object Model". In this system, list-content is the "parent" to the three components and the
three components are the "children" to list-content.
Speaker notes
21. What is Javascript? What is jQuery?
<input>
<ul>
shopping-list <button>
<li>
String
cheese
<li>
Summer
sausage
<li>
Chicken
nuggets
11
<div>
bit.ly/web-app-la
22. jQuery is an extension of Javascript. jQuery does a bunch of things one of which is to make it easy to add, modify and remove items from our DOM.
70% of websites use jQuery.
For this app, what we want to do is add sections to our shopping list after someone adds a grocery item to the input box and then taps the button. So
when someone taps the button, we'll add a new section to the shopping list section, one section for each item added. Those items will be children to
shopping list, which is a child to list-content.
Speaker notes
23. "Grabbing" a section directly
$('.shopping-list')
jQuery always starts with this
Element to grab
bit.ly/web-app-la
12
24. jQuery makes it really easy to add, change, and remove sections from our HTML.
In this case we want to add to a section. The ļ¬rst thing we must do is to tell the computer which section we want to grab.
In jQuery, the ļ¬rst thing we'll do is start our line of code with a "$". This tells the computer we're writing a jQuery command. Then inside the
parentheses, we add the "class" of the section we want to grab. So in this case, "shopping-list" but starting with a ".".
Speaker notes
26. NOTE: All lines for the walkthrough are accessible in the Javascript tab of the demo.
Once we grab the right section, we can then use jQuery to perform some action: to add, change, or remove, that section.
Lets start by seeing how we can use jQuery to add and remove sections from our app. To add a section, the ļ¬rst thing we want to do is grab the
section we want to add to. In this case, we want to add our shopping items to the shopping-list section. So we'll $('.shopping-list'). Then we want to
perform an add action. One add action is .append. So lets say we want to add an apple to our shopping list we can do this:
$('.shopping-list').append("
apples
")
Now we've added this item and given it a label "item". To remove the items we added, we can then do this:
$('.item').remove()
Another thing we can use jQuery for is to change how a section looks. There are a number of ways to do this but the best way to do this is to deļ¬ne
a new class in your CSS and then add or remove those "labels" or "classes" to sections. (enable the CSS tab for this section)
Lets say we wanted to use jQuery to change the background color of our header section to pink. In this case, we'd deļ¬ne a new class called "pink".
When we add "pink" as a class to the header section, background color will change to pink.
$('header').addClass('pink')
You can see here that in this case, header is not a class, but the name of a tag. To grab all sections with a speciļ¬c HTML tag, we just give the tag
name without the period in front.
With jQuery, we can "chain" actions together. So once we grab a section, we can perform action after action on it in a particular order. Here's an
example of using chaining to change the button.
$('.add-item').text("Add Shopping Item").css("background", "pink")
Finally, you can use jQuery to "traverse" or move up and down the HTML tree to select elements. The easiest way to grab an element is to grab it
directly via it's class label. But in some cases, you might not know the class label you want to grab, just where it is in relation to another section. In
those cases, you can "traverse" the tree to grab the right section before acting on it. Here's an example:
Speaker notes
29. jQuery also lets us manage what happens when some event occurs, say when someone clicks on our button. We do this by attaching a "listener" on
a section. A section would then listen, for say, a "click" and then execute the actions we tell it to once that section is clicked.
The code will run every time it "hears" that event. The easiest way to attach a listener is when a section has been loaded. There are, however, ways
to add listeners to sections that we expect will be loaded but haven't yet.
In this case, we want to add an event listener to our button so when someone clicks on it, the text of the button changes and as well as the
background color of the button.
We see here that we've added a listener to add-item and then we grab add-item again. Instead of repeating ourselves, jQuery lets us refer to thing
that was clicked by just saying event.currentTarget. This is an important concept that you'll build on later as you do more programming.
Speaker notes
31. Google is an everyday part of being a developer. A key part of becoming a developer is getting comfortable using Google to learn and look up things.
The more you code, the more you will use Google, not the other way around. When you get stuck tonight, or whenever, make sure to Google it ļ¬rst!
Speaker notes
32. Let's work on the ļ¬rst step together
https://repl.it/Kon8
bit.ly/web-app-la
16
33. Alright, with that let's start building our app.
On the left, you can see the ļ¬les you'll be working on. The Readme will give you instructions. You'll be writing your code in client.js but referring to
style.css and index.html. You shouldn't need to touch any of the other ļ¬les.
After you write your code, it will automatically be saved. At any point you can hit "Show Live" to see a live version of your app.
Let's start the ļ¬rst step together. So in this ļ¬rst step, we're adding an event listener to the add-item button so when it's clicked, we're going to
execute this code which should grab the text in the input box and add that item to our shopping list.
The ļ¬rst thing we want to do is grab the value in our input box. How would we grab that element? (Ultimately ļ¬ll in answer)
Alright, once we grab that element, how might we pull out the text inside it? We haven't shown you this yet so I want you guys to Google "getting a
value out of an input box with jQuery". Does anyone know the right function to use? (Ultimately ļ¬ll in the answer)
Alright so now we've stored the text from our input box in this variable listItem. So when we write listItem, that value will show up. We've combined
that listItem with some HTML to add to our shopping list. Then once you're done with that, we want to zero out the text in our input box. Take it from
here!
(Assign TA's to different sections of class)
Speaker notes
35. Alright. Let's go over the solutions to the main challenges.
The ļ¬rst task was to add HTML to the shopping list. We do that with the "prepend" or "append" action. In the parentheses we just give the computer
the HTML we want to add. To zero-out the input box, we grab the item-input section and use the .val function to set the box to "".
For the second challenge, the user will click on the X button. When we try to remove it, it just removed the X. What we need to do is "traverse" to the
parent of the X which is the entire section and remove that. We can chain these actions together.
Finally, when we click on the checkbox next to the item, we want to add or remove the "complete" class to add and remove the checkmark. We can
do this pretty easily with the toggleClass function.
Speaker notes
37. Thinkful's free resources
Talk to one of us and email noel@thinkful.com to learn more
Covers HTML, CSS and JavaScript
Unlimited mentor-led Q&A sessions
Personal Program Manager to help you
set goals and navigate resources
bit.ly/tf-free-coursebit.ly/tf-free-course
19
38. Thinkful graduates in LA...
80%80%as full-time developers/engineers
Ben Johnson
Link for the third party audit jobs report:
https://www.thinkful.com/bootcamp-jobs-stats
Software Engineer
Cody Berlin
Fullstack Developer
Mark Pinero
Frontend Developer
placed in tech careers
92%92%
20
39. Link for the third party audit jobs report:
https://www.thinkful.com/bootcamp-jobs-stats
...and around the country & world
21
