We the best landscaping services

we the best

You'll be creating a simple, browser-based JavaScript game that utilizes user input and sends messages to the user using the DOM.

Learning Objectives

  • Putting everything you've learned so far together (arrays, loops, conditionals)

Prerequisites

  • JavaScript (arrays, loops, conditionals), CSS Specificity, DOM Manipulation

Scenario

Everyone knows DJ Khaled, and his trademark phrase We The Best, we also know DJ Khaled comes out with songs, but never sings and raps. He gets others to do the work for him lol. His Landscaping business is no different. DJ Khaled has hired you as the head of his landscaping enterprise. You'll start with nothing but your teeth and DJ Khaled's good name, but its up to you to truly make this business the best.

Getting Started

  1. Fork and clone https://git.generalassemb.ly/classwork/we_the_best_landscaping
  2. Connect your app.js file to your index.html file. Write some sort of console.log() in your app.js and open up your index.html file in the browser to check if you've connected your files correctly
  3. Now that you're all set up, using JavaScript, simluate the following simple game:

Landscaper

  1. Create a Class Called Tool and add the attributes name, earnings, purchasePrice

    class Tool {
// code here
}
🔴 Commit your work!
Your commit message should read something like:
"landscaper: created Tool Class"

  1. Create an array of tools that can be used in the lanscaping business

    const tools = [
new Tool('teeth', 1, 0),
new Tool('rusty scissors', 5, 5),
new Tool('old-timey push lawnmower', 25, 20),
new Tool('fancy battery powered lawnmower', 250, 100),
new Tool('starving students', 250, 500)
];
🔴 Commit your work!
Your commit message should read something like:
"landscaper: created Tool's list"
  1. Make a player Class with attributes money, tool
  2. Also give it the methods of resetPlayerData, nextTool which set player data back to beginning and nextTool which selects the next tool in the list
  3. For now we will use shift to handle grabbing the nextTool, but there are other ways to do this by keeping track of the index of tools
  4. Create an instance of the player class
  5. Create a startGame Function that will run to get the game started
class Player {
  // code here
}
const player = new Player(0)
const startGame = () => {
  // initialize a new player
  // automatically give player the new tool
  player.nextTool(tools)
  // alert('the game has started');
  // alerts are annoying - let's use a simple div and update the innerHTML as needed
  // message('the game has started');
  // renderStore();
};
🔴 Commit your work!
Your commit message should read something like:
"landscaper: created a player"
  1. Create a Message Function that can print out the game status in the DOM. It will print the following the current game message, Current Tool, Current Earning Potential and Player Bank Account

Imgur

🔴 Commit your work!
Your commit message should read something like:
"landscaper: created message function"
  1. Create a Render Store Function that shows the user what product is available for purchase next and if they have enough money let them purchase the product
  2. Use If/Else logic to decide when you should show the button to purchase and add the appropriate event listener behavior

Imgur

img

🔴 Commit your work!
Your commit message should read something like:
"landscaper: created renderStore function"
  1. Create a landscape function that increments the players bank account based on the current tools earnings
  2. Also make this function use the message and renderStore functions to keep the browser up to date
  3. Connect this to the appropriate button as an event listener
landscapeButton = document.querySelector('.landscape');
landscapeButton.addEventListener('click', landscape);

🔴 Commit your work!
Your commit message should read something like:
"landscaper: created landscape"

// Global Variables
let landscapeButton;

// Default Tools
class Tool {
  constructor(name, earnings, purchasePrice){
    this.name = name
    this.earnings = earnings
    this.purchasePrice = purchasePrice
  }
}

let tools = [
  new Tool('teeth', 1, 0),
  new Tool('rusty scissors', 5, 5),
  new Tool('old-timey push lawnmower', 25, 20),
  new Tool('fancy battery powered lawnmower', 250, 100),
  new Tool('starving students', 250, 500)
];

// player - default values

class Player {
  constructor(money, tool){
    this.money = money
    this.tool = tool
  }
  resetPlayerData(tools){
    this.money = 0
    this.tool = tools.shift()
  }
  nextTool(tools){
    this.tool = tools.shift()
  }
}

const player = new Player(0)
const startGame = () => {
  // initialize a new player
  // automatically give player the new tool
  player.nextTool(tools)
  // alert('the game has started');
  // alerts are annoying - let's use a simple div and update the innerHTML as needed
  message('the game has started');
  renderStore();
};

const message = (str) => {
  const info = document.querySelector('.messages');
  info.innerHTML = `
  <h5>${str}</h5>
  <h6>Current tool: <span> ${player.tool.name}</span></h6>
  <h6>Current earnings: <span>${player.tool.earnings}</span></h6>
  <h6>Player bank account: <span> ${player.money}</span></h6>
  `;
  if (player.money >= 1000) {
    document.querySelector('.messages').innerHTML =
    `<h2> You did it! You won!</h2>`;

  }
};

const renderStore = () => {
  const store = document.querySelector('.store');
  if (tools.length > 0) {
    store.innerHTML = `
      <h5> Item available for purchase</h5>
      <h6> ${tools[0].name}</h6>
      <h6> Purchase price: ${tools[0].purchasePrice}</h6>
    `;
    store.innerHTML += (player.money >= tools[0].purchasePrice) ? `<button class='purchase'> Purchase </button>` : `<p>You can't afford this yet</p>`;
    const makePurchase = document.querySelector('.purchase');
    if (makePurchase) {
      makePurchase.addEventListener('click', () => {
        player.nextTool(tools);
        player.money -= player.tool.purchasePrice
        renderStore();
        message('You have upgraded!');
      });
    }
  } else {
    store.innerHTML = `<h5> You have purchased all upgrades</h5>`;
  }
};

// A function for landscaping
const landscape = () => {
  // start with a simple console log
  // console.log('i am landscaping');
  // every time landscaped need to increase bank account by tool earnings, then update the message
  player.money += player.tool.earnings;
  message('You are working hard and making progress');
  renderStore();
};


  startGame();
  landscapeButton = document.querySelector('.landscape');
  landscapeButton.addEventListener('click', landscape);

Verify that all following situations work

  1. Using just your teeth, you can spend the day cutting lawns and make $1. You can do this as much as you want.
// landscaper: user can use teeth to cut grass
🔴 Commit your work!
Your commit message should read something like:
"landscaper: user can use teeth to cut grass"
  1. At any point, if you are currently using your teeth, you can buy a pair of rusty scissors for $5. You can do this, assuming you have enough money.
// landscaper: user can use teeth to cut grass
// landscaper: user can buy scissors
🔴 Add A Comment to your JS and then Add & Commit your work!
Your commit message should read something like:
"landscaper: user can buy scissors"
  1. Using the rusty scissors, you can spend the day cutting lawns and make $5. You can do this as much as you want.
// landscaper: user can use teeth to cut grass
// landscaper: user can buy scissors
// Landscaper App: user can use scissors to cut grass
🔴 Commit:
"Landscaper App: user can use scissors to cut grass"
  1. At any point, if you are currently using rusty scissors, you can buy an old-timey push lawnmower for $25. You can do this once, assuming you have enough money.
// landscaper: user can use teeth to cut grass
// landscaper: user can buy scissors
// Landscaper App: user can use scissors to cut grass
// landscaper: user can buy push lawnmower
🔴 Add A Comment to your JS and then Add & Commit your work!
Your commit message should read something like:
"landscaper: user can buy push lawnmower"
  1. Using the old-timey push lawnmower, you can spend the day cutting lawns and make $50. You can do this as much as you want.
// landscaper: user can use teeth to cut grass
// landscaper: user can buy scissors
// Landscaper App: user can use scissors to cut grass
// landscaper: user can buy push lawnmower
// landscaper: user can use push lawnmower to cut grass
🔴 Add A Comment to your JS and then Add & Commit your work!
Your commit message should read something like:
"landscaper: user can use push lawnmower to cut grass"
  1. At any point, if you are currently using the old-timey push lawnmower, you can buy a fancy battery-powered lawnmower for $250. You can do this once, assuming you have enough money.
// landscaper: user can use teeth to cut grass
// landscaper: user can buy scissors
// Landscaper App: user can use scissors to cut grass
// landscaper: user can buy push lawnmower
// landscaper: user can use push lawnmower to cut grass
// landscaper: user can buy battery-powered lawnmower
🔴 Add A Comment to your JS and then Add & Commit your work!
Your commit message should read something like:
"landscaper: user can buy battery-powered lawnmower"
  1. Using the the fancy battery-powered lawnmower, you can spend the day cutting lawns and make $100. You can do this as much as you want.
// landscaper: user can use teeth to cut grass
// landscaper: user can buy scissors
// Landscaper App: user can use scissors to cut grass
// landscaper: user can buy push lawnmower
// landscaper: user can use push lawnmower to cut grass
// landscaper: user can buy battery-powered lawnmower
// landscaper: user can use battery-powered lawnmower to cut grass
🔴 Add A Comment to your JS and then Add & Commit your work!
Your commit message should read something like:
"landscaper: user can use battery-powered lawnmower to cut grass"
  1. At any point, if you are currently using the fancy battery-powered lawnmower, you can hire a team of starving students for $500. You can do this once, assuming you have enough money.
// landscaper: user can use teeth to cut grass
// landscaper: user can buy scissors
// Landscaper App: user can use scissors to cut grass
// landscaper: user can buy push lawnmower
// landscaper: user can use push lawnmower to cut grass
// landscaper: user can buy battery-powered lawnmower
// landscaper: user can use battery-powered lawnmower to cut grass
// landscaper: user can hire a team
🔴 Add A Comment to your JS and then Add & Commit your work!
Your commit message should read something like:
"landscaper: user can hire a team"
  1. Using the the team of starving students, you can spend the day cutting lawns and make $250. You can do this as much as you want.
// landscaper: user can use teeth to cut grass
// landscaper: user can buy scissors
// Landscaper App: user can use scissors to cut grass
// landscaper: user can buy push lawnmower
// landscaper: user can use push lawnmower to cut grass
// landscaper: user can buy battery-powered lawnmower
// landscaper: user can use battery-powered lawnmower to cut grass
// landscaper: user can hire a team
// landscaper: user can use a team to cut grass
🔴 Add A Comment to your JS and then Add & Commit your work!
Your commit message should read something like:
"landscaper: user can use a team to cut grass"
  1. You win the game when you have a team of starving students and $1000. In this situation, send a message to the user telling them, they've won.
// landscaper: user can use teeth to cut grass
// landscaper: user can buy scissors
// Landscaper App: user can use scissors to cut grass
// landscaper: user can buy push lawnmower
// landscaper: user can use push lawnmower to cut grass
// landscaper: user can buy battery-powered lawnmower
// landscaper: user can use battery-powered lawnmower to cut grass
// landscaper: user can hire a team
// landscaper: user can use a team to cut grass
// landscaper: win scenario
🔴 Add A Comment to your JS and then Add & Commit your work!
Your commit message should read something like:
"landscaper: win scenario"

Deliverables

For this section of the homework, inside the landscaper folder you should have an index.html and app.js that simulates the landscaper game outlined above. Your app must have:

  • The ability to take user input
  • The ability for the user to earn money
  • The ability to buy tools and use the new tool

  • The ability to win the game and end it

    • Hint: Try setting the win amount to $10 frst, then $50, and etc. until you get to the end to allow for easier testing!

Technical Requirements

  1. Your landscaper game must run on first load with no syntax errors
  2. If there are errors you can't solve, comment them out and leave a comment above it explaining what is wrong

Submission Guidelines

  • Submit your homework via github issues and please don't forget to fill out the form!

Hungry for More?

  1. Add the ability to reset the game at any point so that you can play again
  2. Make it so that a user can have multiple tools, and money earned each day is increased appropriately (e.g. 2 scissors, and an old-timey push lawnmower means you earn $60/day )
  3. Once you've implemented multiple tools, make it so you can sell tools for half price
Student One

first screen

buying tools

end

Student Two

first screen

options

more options

buying tools

more options

end

Student Three