Build a virtual pet using JavaScript!

1. May 2017
Build a Virtual Pet with Javascript
WIFI: Cross Campus Events
bit.ly/js-pet-la

2. About us
We train developers and data scientists
through 1-on-1 mentorship and career
prep programs

3. About me
• Nassir Zeinu
• Full-stack JavaScript
developer
• Mentor for Thinkful’s
web development
bootcamp

4. About you
• What are your programming goals?
• I’d like to become a developer
• I have an idea I’d like to build
• I’d like to work better with developer
• What is your programming experience?
• First lines of code will be written tonight!
• Been self-teaching for 1-3 months
• Been at this for longer than 3 months

5. Roadmap for today
• Build a function virtual pet - emphasis on build
• Practice solving problems like real developers
• Learn JavaScript fundamentals
• Homework. Just kidding. Ways to keep learning!

6. What is programming?
Programming is writing instructions for a computer to
execute. Programming is problem-solving.

7. Programming is a process
1. Defining problems
2. Finding solutions to those problems
3. Implementing those solutions in a language your
computer can understand

8. Perception

9. Reality

10. Brief history of JavaScript
• Written by Brendan Eich in 1995 for Netscape
• Initial version written in 10 days
• Completely unrelated to Java, named as a
marketing stunt because Java was “hot” at the
time
• Continues to evolve under guidance of ECMA
International, driven by browser makers

11. Javascript today
JavaScript is the most commonly used programming language on earth. Even Back-
End developers are more likely to use it than any other language.

12. What are we going to build?
We’re going to build a virtual pet (like a tomigachi). In
our initial version, we’ll be able to change our pet’s
settings and feed our pet

13. Note on where to write you code
When working as a programmer, you’ll use a text editor
or an “Integrated Development Environment” (IDE).
Tonight we’re using JSBin so we can skip setup, see
results immediately and easily share code

14. Here’s the starter code
http://bit.ly/tf-vir-pet

15. Javascript 101 — Variables
• A variable is a name that is attached to a value
• Gives us a shorthand way to refer to it elsewhere
• Can be string, number, boolean, objects, and arrays…
var firstVariable = “hello world”;

16. Javascript 101: Objects
• Data structure with a “key” and a “value”
• Define an object by writing an opening curly branch and a
closed curly brace
• The “key” is always a string, “value” can by any anything*
• Keys and value pairs are separated by commas
• Can have many different kinds of values in the same object
with as many key-value pairs are you'd like
var pet = { “name”: “Fluffy”, “age”: 10 }

17. Javascript 101: Objects
• To add an item to an object: pet[‘weight’] = 5
• To retrieve name of pet: pet.name or pet[‘name’]
var pet = { “name”: “Fluffy”, “age”: 10 }

18. Quick challenge
• In a new JSBin file, create an object with the name “pet”
• Initialize the object with a key “name” and provide a name for
your pet
• Add keys for “hungry”, “weight”, “age”, and “photo”
• Set “hungry” to true
• Feel free to use the example above :)
var pet = {
'name' : "",
'hungry' : true,
'weight' : 0,
'age' : 0,
'photo': "",
};

19. Starter code walkthrough
Our pet will be an object. We’ll save that object to a variable

20. Challenge
• Add a name for your pet
• Add an age & weight to your pet object
• Add a “photo” (we’ve given some options at the top)
• Retrieve the name of your pet (use the console)

21. Javascript Functions
function doSomething () {
alert(“it’s done”);
};
doSomething();
A function lets you separate your code into bite-sized
pieces which you can use over again.
When you write a function to use later, you are
“declaring” it. When you use (or run) that function you
are “calling” it.

22. Javascript Functions — Parameters and Return
function addTwoNumbers (numberOne, numberTwo) {
return numberOne + numberTwo;
};
addTwoNumbers(2, 3);
•We sometimes pass a parameter and return a value.
Parameters let us call a function multiple times with
different inputs in order to get different outputs.
•return sends back a value to wherever the function
was called from

23. Javascript If/Else Statements
• Enables program to do different things based on conditions
• You can use if, else if or else
• If the statement in parentheses is true, it will execute that block
• Otherwise the program will move to the next block
if (turn == “O”) {
console.log(“It’s O’s turn”);
} else if (turn == “X”) {
console.log(“It’s X’s turn”);
} else {
console.log(“It’s no one’s turn”);
}

24. Challenge
• Complete the feed(pet) function in the starter code
• When your pet is hungry, you should print out to the console
(console.log) a statement saying your pet is full
• Change your pet’s hunger from true to false

25. More challenges
•Write a function called “exercise” which reduces
your pet’s weight
•Write a function that returns your pet’s bio

26. General learning tips for coding
• Google is your friend
• Practice at the edge of your abilities
• Ignore the hot new thing — depth matters more than breadth

27. Ways to keep learningLevelofsupport
Learning methods

28. 1-on-1 mentorship enables flexibility
325+ mentors with an average of 10
years of experience in the field

29. Support ‘round the clock

30. Our results
Job Titles after GraduationMonths until Employed

31. Try us out!
• Initial 2-week trial
includes six mentor
sessions for $50
• Learn HTML/CSS and
JavaScript
• Option to continue
onto web
development
bootcamp
• Talk to me (or email
noel@thinkful.com) if
you’re interested