JavaScript Classes and Constructors Homework

By now you should have a decent grasp of classes and constructors, and how to make and build one. The following exercises should help you solidify your understanding of classes and constructors in JavaScript.

Popcorn Hack 1

  1. The class TennisPlayer has been defined for you. Create a constructor with the arguements name, rank, and rankPoints.
  2. Call the class with the arguments Novak Djokovic, 1, 16000.
  3. Add one or more of the following arguments to the initial constructor: age, tournamentsPlayed, titlesWon. Add this as part of the profile output.
%%html

<p>Tennis Player Profiles</p>

<div id="outputPH1">Results will appear here:<br></div>

<script>
(() => {

    const outputDiv = document.getElementById("outputPH1");

    class TennisPlayer {
        constructor(name, rank, rankPoints, age = null, tournamentsPlayed = null, titlesWon = null) {
            this.name = name;
            this.rank = rank;
            this.rankPoints = rankPoints;
            this.age = age;
            this.tournamentsPlayed = tournamentsPlayed;
            this.titlesWon = titlesWon;
        }

        profile() {
            let text = `Hi, my name is ${this.name}, my rank is ${this.rank}, and I have ${this.rankPoints} ranking points.`;
            if (this.age !== null) text += ` I am ${this.age} years old.`;
            if (this.tournamentsPlayed !== null) text += ` I have played ${this.tournamentsPlayed} tournaments.`;
            if (this.titlesWon !== null) text += ` I have won ${this.titlesWon} titles.`;

            console.log(text);
            const p = document.createElement("p");
            p.textContent = text;
            outputDiv.appendChild(p);
        }
    }

    const players = [
        new TennisPlayer("Novak Djokovic", 1, 16000, 36, 100, 90),
        new TennisPlayer("Rafael Nadal", 2, 12000, 37, 110, 88),
        new TennisPlayer("Carlos Alcaraz", 3, 9000, 21, 40, 12),
        new TennisPlayer("Simona Halep", 5, 7800, 31, 22, 22),
        new TennisPlayer("Iga Swiatek", 8, 9000, 22, 50, 18)
    ];

    players.forEach(player => player.profile());

})();
</script>

Tennis Player Profiles

Results will appear here:

Popcorn Hack 2

  1. Create a class called library
  2. Within library create a class called book with a constructors that allows the two methods - add book and remove book
  3. Add another inner class called computers - and have it output the number of computers on

Below is the starter code to get you started

%%html

<p>Library System</p>
<div id="libraryOutput"></div>

<script>
(() => {

    const outputDiv = document.getElementById("libraryOutput");

    class Library {
        constructor(name) {
            this.name = name;
            const text = `Welcome to the ${this.name} Library!`;
            console.log(text);
            const p = document.createElement("p");
            p.textContent = text;
            outputDiv.appendChild(p);
        }

        static Book = class {
            constructor() {
                this.books = [];
            }

            addBook(title) {
                this.books.push(title);
                console.log(`Added "${title}" to the library.`);
                const p = document.createElement("p");
                p.textContent = `Added "${title}" to the library.`;
                outputDiv.appendChild(p);
            }

            removeBook(title) {
                const index = this.books.indexOf(title);
                if (index > -1) {
                    this.books.splice(index, 1);
                    console.log(`Removed "${title}" from the library.`);
                    const p = document.createElement("p");
                    p.textContent = `Removed "${title}" from the library.`;
                    outputDiv.appendChild(p);
                } else {
                    console.log(`"${title}" not found in the library.`);
                    const p = document.createElement("p");
                    p.textContent = `"${title}" not found in the library.`;
                    outputDiv.appendChild(p);
                }
            }
        }

        static Computers = class {
            constructor(computersOn) {
                this.computersOn = computersOn;
            }

            showComputersOn() {
                const text = `There are currently ${this.computersOn} computers on.`;
                console.log(text);
                const p = document.createElement("p");
                p.textContent = text;
                outputDiv.appendChild(p);
            }
        }
    }

    // Example usage
    const myLibrary = new Library("Downtown");
    const bookManager = new Library.Book();
    const techRoom = new Library.Computers(8);

    bookManager.addBook("The Hobbit");
    bookManager.addBook("1984");
    bookManager.removeBook("The Hobbit");
    techRoom.showComputersOn();

})();
</script>

Library System

Homework

Create and expand the Cookie Clicker project:

  1. Fill out the cookies and cookiesPerClick variables.
  2. Define what should happen upon clicking the cookie.
  3. Create an Upgrade class that multiplies cookies per click, and expand the original cookieclicker class to integrate upgardes.
  4. Print how each upgrade changes the total cookie output.
  5. Add a cookie type variable which sets the specific type of cookie (ex: Chocolate chip, Oatmeal, etc.) The following code is to help you get started.

Extra credit: Up to 0.03 points

  • Create a new cell, apply the ALL of the above changes to a blank cookie clicker project, and submit that code for the cookie clicker project.
%%html

<h2>Cookie Clicker</h2>
<div id="outputCookies">Click the cookie to start!</div>
<button id="cookieBtn">🍪 Click Me!</button>
<button id="upgradeBtn">Upgrade Cookie</button>

<script>
(() => {
    const outputDiv = document.getElementById("outputCookies");
    const cookieBtn = document.getElementById("cookieBtn");
    const upgradeBtn = document.getElementById("upgradeBtn");

    class Upgrade {
        constructor(name, multiplier) {
            this.name = name;
            this.multiplier = multiplier;
        }
    }

    class CookieClicker {
        constructor(cookies = 0, cookiesPerClick = 1, cookieType = "Chocolate Chip") {
            this.cookies = cookies;
            this.cookiesPerClick = cookiesPerClick;
            this.cookieType = cookieType;
        }

        click() {
            this.cookies += this.cookiesPerClick;
            this.updateDisplay();
        }

        applyUpgrade(upgrade) {
            this.cookiesPerClick *= upgrade.multiplier;
            const text = `Applied upgrade "${upgrade.name}". Cookies per click is now ${this.cookiesPerClick.toFixed(2)}.`;
            console.log(text);
            const p = document.createElement("p");
            p.textContent = text;
            outputDiv.appendChild(p);
        }

        updateDisplay() {
            const text = `You have ${this.cookies.toFixed(2)} ${this.cookieType} cookies.`;
            console.log(text);
            outputDiv.textContent = text;
        }
    }

    const game = new CookieClicker(0, 1, "Oatmeal");

    cookieBtn.addEventListener("click", () => game.click());

    const upgrade = new Upgrade("Double Power", 2);
    upgradeBtn.addEventListener("click", () => game.applyUpgrade(upgrade));
})();
</script>

Cookie Clicker

Click the cookie to start!

This is where you will find homework: Github Homework Link