Build an App with JavaScript & jQuery

Build an App with JavaScript & jQuery

• 1.
  Build an Appwith JavaScript & jQuery September 2017 WIFI: In3 - Guest bit.ly/dc-web-app 1
• 2.
  Instructor TA TJ StalcupTJ Stalcup LeadMentor, Thinkful API Evangelist, WealthEngine PokemonGO! Enthusiast WiFi: In3-Guest | bit.ly/dc-web-app 2
• 3.
  About you What's yourname? Why do you want to learn JavaScript/jQuery? What is your programming experience? http://www.loremipsum.com/example Wi-Fi: orem Ipsum PW: orem Ipsum L L WiFi: In3-Guest | bit.ly/dc-web-app 3
• 4.
  About Thinkful Thinkful helpspeople become developers or data scientists through one-on-one mentorship and project-based learning. These workshops are built using this approach. WiFi: In3-Guest | bit.ly/dc-web-app 4
• 5.
  Suggestions for learning Don'ttreat 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: In3-Guest | bit.ly/dc-web-app 5
• 6.
  This is whatwe're making: https://honey-pan.glitch.me/ http://www.loremipsum.com/example Wi-Fi: orem Ipsum PW: orem Ipsum L L WiFi: In3-Guest | bit.ly/dc-web-app 6
• 7.
  Agenda Go over startercode (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 WiFi: In3-Guest | bit.ly/dc-web-app 7
• 8.
  Quick HTML/CSS Refersher WiFi:In3-Guest | bit.ly/dc-web-app 8
• 9.
  Starter code walkthrough http://bit.ly/tf-shopping-list bit.ly/web-app-laWiFi:In3-Guest | bit.ly/dc-web-app 9
• 10.
  Think of ourHTML as a "tree" <form> list-content <input> item-input <ul> shopping-list <button> add-item 10 WiFi: In3-Guest | bit.ly/dc-web-app
• 11.
  What is JavaScript?What is jQuery? <input> <ul> shopping-list <button> <li> String cheese <li> Summer sausage <li> Chicken nuggets 11 <div> WiFi: In3-Guest | bit.ly/dc-web-app
• 12.
  "Grabbing" a sectiondirectly $('.shopping-list') jQuery always starts with this Element to grab WiFi: In3-Guest | bit.ly/dc-web-app 12
• 13.
  jQuery walkthrough WiFi: In3-Guest| bit.ly/dc-web-app 13
• 14.
  Attaching an "EventListener" http://www.loremipsum.com/example Wi-Fi: orem Ipsum PW: orem Ipsum L L WiFi: In3-Guest | bit.ly/dc-web-app 14
• 15.
  Real developers useGoogle... a lot WiFi: In3-Guest | bit.ly/dc-web-app 15
• 16.
  Let's work onthe first step together http://bit.ly/tf-shopping-list http://www.loremipsum.com/example Wi-Fi: orem Ipsum PW: orem Ipsum L L WiFi: In3-Guest | bit.ly/dc-web-app 16
• 17.
  Solution http://bit.ly/tf-app-solution WiFi: In3-Guest |bit.ly/dc-web-app 17
• 18.
  18
• 19.
  19
• 20.
  20
• 21.
  Our students receiveunprecedented support 1-on-1 Learning Mentor 1-on-1 Career MentorProgram Manager Los Angeles Community You 21
• 22.
  22
• 23.
  Thinkful Two-Week Trial Talkto one of us and email benjy@thinkful.combenjy@thinkful.com to learn more Two-week Free Course Trial Start with HTML, CSS and JavaScript Option to continue with full bootcamp Financing & scholarships available Offer valid for one week after eventOffer valid for one week after event BenjyBenjy SchechnerSchechner Education Advisor 23