Barbies Wardrobe & Tomagotchi

In this lesson you will review how to create classes and use the alongside your DOM Manipulation to build full applications

Walkthrough

  1. Fork and Clone Barbies Wardrobe to your homework folder
  2. Open the folder in vs code
  3. Observe the starter code
  4. View the HTML, CSS and JS
  5. Review the logic behind each event listener

Update HTML, CSS & JS

Red Bottoms

  1. Make a button in the HTML with the id of red-bottoms
  2. Add Functionality to the button so that whenever we click the button Barbie Buys Red Bottom Shoes
  3. Style the button so that whenever we hover the red-bottoms button it turns red
  4. Use Git add and commit to save this update

Barbie Makes Money Moves

  1. Barbie is a boss, she doesn't only buy Birkins and Red Bottoms
  2. Make it so Barbie can buy rental properties
  3. Make a rental property cost 50,000 and make it add 500$ to Barbie Income
  4. Use Git add and commit to save this update

Barbie be flippin' on Posh Mark

  1. The great business woman that Barbie is, she knows that she can sell her purses and shoes
  2. Make it so Barbie can sell her items in her closet
  3. Make is so when Barbie sells an item it randomly chooses a price she sells it for between 70% and 200% of the original price.
  4. Use Git add and commit to save this update

Barbie needs a car

  1. Make it so Barbie can Buy A Tesla for 50k
  2. Use Git add and commit to save this update

Think of other things that Barbie can do to make things interesting

GA Logo

Tomagotchi Code Along

Description

Let's use our front-end web development skills to create a "living" pet! We'll use HTML, CSS, and JavaScript to interact with our pet.

Here is a live example of what we are going to build

Learning Objectives

Today's lesson will be focused on building out interactivity in the DOM. This will enable us to take the games we have been building and combine them with user interactivity.

Along the way, we will be learning about some common UI and how to build them. These include:

Guidelines

:pencil: Style the page.

:pencil: Add a Modal to start the game.

:pencil: Add a Carousel of images for user to choose the background.

:pencil: Create a Class ( for your tomagotchi

  • Instatiate your Tomagotchi
  • Display a character of your choice on the screen to represent your pet
  • Increase your pet's age every x minutes
  • Increase your pet's Hunger, Sleepiness, and Bored metrics on an interval of your choosing.
  • You pet should die if Hunger, Boredom, or Sleepiness hits 10.
  • Morph your pet at certain ages.

:pencil: Display the following metrics for your pet:

  • Hunger (1-10 scale)
  • Sleepiness (1-10 scale)
  • Boredom (1-10 scale)
  • Age
  • Name

:pencil: Add buttons to the screen to feed your pet, turn off the lights, and play with your pet.

  • Animate your pet across the screen while it's alive.

Extras

  • Animate your pet across the screen while it's alive.
  • Add anything you can think of... use your imagination!