Build a Virtual Pet with Javascript
August 2017
Wi-Fi Name: Digital Ignition
Wi-Fi Password: Countdown54321
http://bit.ly/virtual-pet-tf
1
Instructor
Chris Keen
Thinkful Mentor
Founder at Keen Concepts
TA's
http://bit.ly/virtual-pet-tf
Wi-Fi: Digital Ignition
PW: Countdown54321 2
About you
What's your name?
What's your goal?
What is your coding background?
http://bit.ly/virtual-pet-tf
Wi-Fi: Digital Ignition
PW: Countdown54321 3
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.
http://bit.ly/virtual-pet-tf
Wi-Fi: Digital Ignition
PW: Countdown54321 4
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
http://bit.ly/virtual-pet-tf
Wi-Fi: Digital Ignition
PW: Countdown54321 5
This is what we're making
http://bit.ly/virtual-pet-tf
Wi-Fi: Digital Ignition
PW: Countdown54321 6
Agenda
Starter code review (5 min)
Learn key Javascript concepts (25 min)
Build your app! (40 min)
Go over solutions (10 min)
Next steps (10 min)
http://bit.ly/virtual-pet-tf
Wi-Fi: Digital Ignition
PW: Countdown54321 7
Starter code
http://bit.ly/virtual-pet-starter-code
http://bit.ly/virtual-pet-tf
Wi-Fi: Digital Ignition
PW: Countdown54321 8
Defining a variable with Javascript
var firstVariable = 20
Initialize variable
Name of variable
Value of variable
http://bit.ly/virtual-pet-tf
Wi-Fi: Digital Ignition
PW: Countdown54321 9
More about variables
http://www.loremipsum.com/example
Wi-Fi: orem Ipsum
PW: orem Ipsum
L
L
http://bit.ly/virtual-pet-tf
Wi-Fi: TechSquare Labs
PW: bu1ldsometh1ngb1g
http://bit.ly/virtual-pet-tf
Wi-Fi: Digital Ignition
PW: Countdown54321 10
Introducing our pet "object"
Name
"Thinkpup"
Weight
6
Happiness
0
http://www.loremipsum.com/example
Wi-Fi: orem Ipsum
PW: orem Ipsum
L
L
http://bit.ly/virtual-pet-tf
Wi-Fi: TechSquare Labs
PW: bu1ldsometh1ngb1g 11
http://bit.ly/virtual-pet-tf
Wi-Fi: Digital Ignition
PW: Countdown54321
Working with objects
http://www.loremipsum.com/example
Wi-Fi: orem Ipsum
PW: orem Ipsum
L
L
http://bit.ly/virtual-pet-tf
Wi-Fi: TechSquare Labs
PW: bu1ldsometh1ngb1g
http://bit.ly/virtual-pet-tf
Wi-Fi: Digital Ignition
PW: Countdown54321 12
Basic functions
http://www.loremipsum.com/example
Wi-Fi: orem Ipsum
PW: orem Ipsum
L
L
http://bit.ly/virtual-pet-tf
Wi-Fi: TechSquare Labs
PW: bu1ldsometh1ngb1g
http://bit.ly/virtual-pet-tf
Wi-Fi: Digital Ignition
PW: Countdown54321 13
If, then, else
pet is hungry feed it
go to park
if true
if false
http://www.loremipsum.com/example
Wi-Fi: orem Ipsum
PW: orem Ipsum
L
L
http://bit.ly/virtual-pet-tf
Wi-Fi: TechSquare Labs
PW: bu1ldsometh1ngb1g 14
http://bit.ly/virtual-pet-tf
Wi-Fi: Digital Ignition
PW: Countdown54321
Conditionals example
http://www.loremipsum.com/example
Wi-Fi: orem Ipsum
PW: orem Ipsum
L
L
Wi-Fi: TechSquare Labs
PW: bu1ldsometh1ngb1g
http://bit.ly/virtual-pet-tf
Wi-Fi: Digital Ignition
PW: Countdown54321 15
Real developers use Google... a lot
http://www.loremipsum.com/example
Wi-Fi: orem Ipsum
PW: orem Ipsum
L
L
http://bit.ly/virtual-pet-tf
Wi-Fi: TechSquare Labs
PW: bu1ldsometh1ngb1g
http://bit.ly/virtual-pet-tf
Wi-Fi: Digital Ignition
PW: Countdown54321 16
Let's work on the first step together
http://bit.ly/tf-virtual-pet
http://www.loremipsum.com/example
Wi-Fi: orem Ipsum
PW: orem Ipsum
L
L
http://bit.ly/virtual-pet-tf
Wi-Fi: TechSquare Labs
PW: bu1ldsometh1ngb1g
http://bit.ly/virtual-pet-tf
Wi-Fi: Digital Ignition
PW: Countdown54321 17
Solution
http://www.loremipsum.com/example
Wi-Fi: orem Ipsum
PW: orem Ipsum
L
L
http://bit.ly/virtual-pet-tf
Wi-Fi: TechSquare Labs
PW: bu1ldsometh1ngb1g http://bit.ly/virtual-pet-tf
Wi-Fi: Digital Ignition
18
Ways to keep learning
More Structure
Less Structure
More SupportLess Support
19
325+ mentors325+ mentors with an average of
10 years of experience10 years of experience in the
field
20
Support 'round the clock
Your Mentor
Q&A Sessions
Career Coach
In-person Workshops
Slack
Program Manager
YouYou
21
Our results
93%93%job-placement rate + job guarantee
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
22
Try us out!
Talk to me (or email jasjit@thinkful.com ) if you're interested
Learn HTML/CSS and JavaScript
Initial 2-week trial includes
six mentor sessions for $50
Option to continue onto web
development boothcamp
23
http://bit.ly/atl-feedback
August 2017
24

Deck 4-67

  • 1.
    Build a VirtualPet with Javascript August 2017 Wi-Fi Name: Digital Ignition Wi-Fi Password: Countdown54321 http://bit.ly/virtual-pet-tf 1
  • 2.
    Instructor Chris Keen Thinkful Mentor Founderat Keen Concepts TA's http://bit.ly/virtual-pet-tf Wi-Fi: Digital Ignition PW: Countdown54321 2
  • 3.
    About you What's yourname? What's your goal? What is your coding background? http://bit.ly/virtual-pet-tf Wi-Fi: Digital Ignition PW: Countdown54321 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. http://bit.ly/virtual-pet-tf Wi-Fi: Digital Ignition PW: Countdown54321 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 http://bit.ly/virtual-pet-tf Wi-Fi: Digital Ignition PW: Countdown54321 5
  • 6.
    This is whatwe're making http://bit.ly/virtual-pet-tf Wi-Fi: Digital Ignition PW: Countdown54321 6
  • 7.
    Agenda Starter code review(5 min) Learn key Javascript concepts (25 min) Build your app! (40 min) Go over solutions (10 min) Next steps (10 min) http://bit.ly/virtual-pet-tf Wi-Fi: Digital Ignition PW: Countdown54321 7
  • 8.
  • 9.
    Defining a variablewith Javascript var firstVariable = 20 Initialize variable Name of variable Value of variable http://bit.ly/virtual-pet-tf Wi-Fi: Digital Ignition PW: Countdown54321 9
  • 10.
    More about variables http://www.loremipsum.com/example Wi-Fi:orem Ipsum PW: orem Ipsum L L http://bit.ly/virtual-pet-tf Wi-Fi: TechSquare Labs PW: bu1ldsometh1ngb1g http://bit.ly/virtual-pet-tf Wi-Fi: Digital Ignition PW: Countdown54321 10
  • 11.
    Introducing our pet"object" Name "Thinkpup" Weight 6 Happiness 0 http://www.loremipsum.com/example Wi-Fi: orem Ipsum PW: orem Ipsum L L http://bit.ly/virtual-pet-tf Wi-Fi: TechSquare Labs PW: bu1ldsometh1ngb1g 11 http://bit.ly/virtual-pet-tf Wi-Fi: Digital Ignition PW: Countdown54321
  • 12.
    Working with objects http://www.loremipsum.com/example Wi-Fi:orem Ipsum PW: orem Ipsum L L http://bit.ly/virtual-pet-tf Wi-Fi: TechSquare Labs PW: bu1ldsometh1ngb1g http://bit.ly/virtual-pet-tf Wi-Fi: Digital Ignition PW: Countdown54321 12
  • 13.
    Basic functions http://www.loremipsum.com/example Wi-Fi: oremIpsum PW: orem Ipsum L L http://bit.ly/virtual-pet-tf Wi-Fi: TechSquare Labs PW: bu1ldsometh1ngb1g http://bit.ly/virtual-pet-tf Wi-Fi: Digital Ignition PW: Countdown54321 13
  • 14.
    If, then, else petis hungry feed it go to park if true if false http://www.loremipsum.com/example Wi-Fi: orem Ipsum PW: orem Ipsum L L http://bit.ly/virtual-pet-tf Wi-Fi: TechSquare Labs PW: bu1ldsometh1ngb1g 14 http://bit.ly/virtual-pet-tf Wi-Fi: Digital Ignition PW: Countdown54321
  • 15.
    Conditionals example http://www.loremipsum.com/example Wi-Fi: oremIpsum PW: orem Ipsum L L Wi-Fi: TechSquare Labs PW: bu1ldsometh1ngb1g http://bit.ly/virtual-pet-tf Wi-Fi: Digital Ignition PW: Countdown54321 15
  • 16.
    Real developers useGoogle... a lot http://www.loremipsum.com/example Wi-Fi: orem Ipsum PW: orem Ipsum L L http://bit.ly/virtual-pet-tf Wi-Fi: TechSquare Labs PW: bu1ldsometh1ngb1g http://bit.ly/virtual-pet-tf Wi-Fi: Digital Ignition PW: Countdown54321 16
  • 17.
    Let's work onthe first step together http://bit.ly/tf-virtual-pet http://www.loremipsum.com/example Wi-Fi: orem Ipsum PW: orem Ipsum L L http://bit.ly/virtual-pet-tf Wi-Fi: TechSquare Labs PW: bu1ldsometh1ngb1g http://bit.ly/virtual-pet-tf Wi-Fi: Digital Ignition PW: Countdown54321 17
  • 18.
    Solution http://www.loremipsum.com/example Wi-Fi: orem Ipsum PW:orem Ipsum L L http://bit.ly/virtual-pet-tf Wi-Fi: TechSquare Labs PW: bu1ldsometh1ngb1g http://bit.ly/virtual-pet-tf Wi-Fi: Digital Ignition 18
  • 19.
    Ways to keeplearning More Structure Less Structure More SupportLess Support 19
  • 20.
    325+ mentors325+ mentorswith an average of 10 years of experience10 years of experience in the field 20
  • 21.
    Support 'round theclock Your Mentor Q&A Sessions Career Coach In-person Workshops Slack Program Manager YouYou 21
  • 22.
    Our results 93%93%job-placement rate+ job guarantee 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 22
  • 23.
    Try us out! Talkto me (or email jasjit@thinkful.com ) if you're interested Learn HTML/CSS and JavaScript Initial 2-week trial includes six mentor sessions for $50 Option to continue onto web development boothcamp 23
  • 24.