This document provides instructions for a workshop on building a virtual pet with JavaScript. It includes the Wi-Fi network and password, a link to the starter code, an agenda for the workshop, and explanations of key JavaScript concepts like variables, objects, functions, and conditionals that will be used to build the virtual pet app. The workshop leader and TAs are introduced, and participants are asked to introduce themselves. The goal of the workshop is introduced as building an app where buttons can be clicked to feed, play with, and exercise a virtual pet, updating its weight and happiness levels.

1. Build a Virtual Pet with Javascript
January 2018
Wi-Fi Name: Deskhub-main
PW: stake2017!
http://bit.ly/virtual-pet-sd
1

2. Welcome to "Build a Virtual Pet with Javascript". The Wi-Fi network is X and the password is Y The website for this class is Z.
Speaker notes

3. Instructor
Jasmine Kim
Bootcamp Graduate
Soon to be System Engineer
Former Accountant
TA's
2

4. Let me start with a little about me. My name is X and my background is Y
I am working with Thinkful to teach this class because Z
Speaker notes

5. About you
What's your name?
What's your goal?
What is your coding background?
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.
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.
We believe making a career transition is hard and to be successful, you'll need a lot of personal support and learning that's grounded in real-world
experience. Our workshop today is designed with this view in mind.
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
5

10. To get the most out of this class, we have three suggestions for getting the most our of this experience.
The first 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

11. This is what we're making
6

12. Today we're building a simple virtual pet. We can click three different buttons to feed our pet, play with our bet, and have our pet do some exercise.
When we click on these buttons, we'll increase or decrease the weight or happiness of our pet.
Speaker notes

13. 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)
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 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

15. Starter code
http://bit.ly/virtual-pet-starter-code
8

16. 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 file you should see an overview of the project and the challenges you'll need to complete. The files we’ll be using today on the
left are client.js and index.html. You can ignore style.css, server.js, package.json and .env. At the bottom of the Readme file we've added some
helpful links for further help on particular concepts.
Lets look at the index.html file to see how our app is structured. We have an image which includes a picture of our pet. We're displaying the pet's
name, weight, and level of happiness. Below that are three buttons. One to give the pet a treat, increasing it's weight and happiness. One is to play
with our pet, decreasing it's weight and increasing it's happiness. The third is exercise which decreases it's weight and happiness.
All of the code you’ll be writing will be in client.js but you may need to refer to the html and css file to solve some of the problems. 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.
Speaker notes

17. Defining a variable with Javascript
var firstVariable = 20
Initialize variable
Name of variable
Value of variable
9

18. Let's start with reviewing variables in Javascript. Variables let us assign some value to a a string. We use variables to store information that we'll use
when our app is running.
To define a variable in Javascript, we start with the keyword "var". We then give our variable a name. The name should start with a letter. Try to
make sure your variable names are descriptive. It's ok if they are long.
Then we set that variable name equal to some value. That value can be any data structure in JS including numbers and strings.
Speaker notes

19. More about variables
10

20. Alright lets try writing this out. Add var firstVariable = 20. If we type firstVariable now, what is going to happen?
The number 20 is stored in the variable so every time we use that variable, we're referring to the 20.
With a number, we can also increment or decrement that number. Once we define the variable, we can re-define it as either more or less. So we
could do firstVariable = firstVariable + 1 to change our variable from 20 to 21. In this way, an equal sign in JS is different than in math. A single equal
sign means we're assigning a value, not saying two things are equal.
What other things can we store in a variable? In Javascript we can store pretty much everything in a variable. We can store booleans and strings as
well. Lets see examples of each of those.
Instead of a number, set firstVariable equal to a string. In JS, when we put a value in quotes, it assumes its a string. Let's console.log the string. We
can do the same with booleans.
Speaker notes

21. Introducing our pet "object"
Name
"Thinkpup"
Weight
6
Happiness
0
11

22. Lets say we want to store a bunch of different information in one variable, we can do that with a Javascript object. We'll be using a JS object
remember all the aspects of our virtual pet.
An object will basically have a list of "keys" and "values". So we can store all the information about our pet in one place. In this case, we'll have three
items in our "list". The name of our pet, which would be a string. The weight which would be a number. And how happy they are, which will also be a
number.
We can "get" and "set" our values by grabbing them from the object with the "key" which is always a string. In this case, our key for "Thinkpup" is
"name".
Speaker notes

23. Working with objects
12

24. Creating an object
Define an object with curly brackets. The "key" is always a string. The value can be whatever value we like. A Javascript object can hold all sorts of
values in one variable.
Retrieving a value
We can retrieve a value by saying pet_info.name or pet_info['name']
Changing a value
We can change a value by saying pet_inf['name'] = "Nala"
Speaker notes

25. Basic functions
13

26. 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.
To call a function, we simply write doSomething() and then the function is run.
Speaker notes

27. If, then, else
pet is hungry feed it
go to park
if true
if false
14

28. In all programming languages there exist a way to tell the computer that if X happens, do this, if y happens, do that. In Javascript we use if, then,
else statement. So we tell the computer, if this condition is true, say the pet is hungry, feed it. If it's not hungry (or that condition is false), go to the
park. After this, continue running the program.
Speaker notes

29. Conditionals example
15

30. This is how we'd write that concept in Javascript. We have an "if" keyword and then some condition that could either be True or False in
parentheses. If it's true, it would run the code in the first bracket. If it's not true, we'd run the code in the else block.
Speaker notes

31. Real developers use Google... a lot
16

32. With that you should be ready to start the challenges. One last note before we do the first challenge together.
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.
Speaker notes

33. Let's work on the first step together
http://bit.ly/tf-virtual-pet
17

34. Alright, with that let's start building our app.
On the left, you can see the files you'll be working on. The Readme will give you instructions. You'll be writing your code in client.js. You shouldn't
need to touch any of the other files.
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 first step together. So in this first step, we want to create our pet_info object with three keys. How would we do that? Feel free to
name your pet whatever you like and set it's starting happiness and weight to whatever you like.
(Assign TA's to different sections of class)
Speaker notes

35. Solution
18

36. Alright. Let's go over the solutions to the main challenges.
For each of the functions, we're going to do a version of the same thing. We're going to first grab the value from our object and then assign it to that
value plus or minus some number.
For our third step, we want to make sure weight can't go below zero. To do this, we add a function that checks weight before we update it in the
HTML. If weight is below one, it should equal one.
Speaker notes

37. Ways to keep learning
19

38. Thinkful's Free Resource
HTML, CSS and JavaScript
Unlimited mentor-led Q&A sessions
Personal Program Manager
OnlyOnly availableavailable during this eventduring this event
bit.ly/webdev-sd
20