Being trapped indoors has me wanting for some new TV series to watch. Let's build something using Object Oriented JavaScript to make a playlist of stuff I should binge while social distancing.
Here are some helpful resources to look at while you answer these questions:
- MDN Docs - "Classes"
- JAVASCRIPT.INFO - "Classes"
- JS in Plain English - Introduction to JavaScript: Classes
- JavaScript For Beginners - The βnewβ operator
- MDN Docs - "new" operator
- MDN Docs - Inheritance and the prototype chain
- JAVASCRIPT.INFO - "Prototypes"
NOTE: You can use the boilerplate files to test your code.
- Create a TV Series class in JavaScript. It should initialize with the following properties: title, number of seasons, streaming service, genre, years.
- How is
this
being used above? What object does it reference?
- Create an instance method in the class called
prettyPrint
that returns a string formatted like this:Stranger Things, Science Fiction, 3 seasons, available on Netflix, 2016-2019
- Create an instance method that returns the following HTML. Give it an appropriate name.
<div>
<h1>Stranger Things</h1>
<h3>Science Fiction</h3>
<p>3 Seasons</p>
<p>2016-2019</p>
<p>Netflix</p>
</div>
- Create an instance method called
render
that accepts a DOM node as an argument and appends the div from above onto it.
- Create a class method called
all
that returns all the TV Series that have been created. (Hint: how will you have to modify the constructor?)
- Write a function separate from the class that, when given an array of object literals representing TV Series, returns an array of pretty printed strings.
- Write a function separate from the class that will render all the TV series that have been created onto a page with the following HTML.
<div id="container"></div>
- What is a
prototype
? What purpose does it serve in JavaScript? What is the difference between__proto__
andprototype
?
- What will be the return of the following expression? Why?
let strangerThings = new tvSeries({
title: "Stranger Things",
numberOfSeason: 3,
service: "Netflix",
genre: "Science Fiction", years: "2016-2019"
})
strangerThings.__proto__ === tvSeries.prototype // what will the return of this expression be?
I'm also getting into gaming during this period of isolation. Let's start building a role playing game for me to play while I'm bored.
- Let's shift our domain to video games. Create a
Hero
class with a constructor that acceptsname
,age
, anddamagePoints
properites.
- Create a
Warrior
class that inherits fromHero
. Its constructor should accept the same parameters asHero
in addition toweaponType
(e.g., sword, battle axe, spear, club, etc.).
- Create a
Mage
class that inherits fromHero
. Its constructor should accept the same parameters asHero
in addition totalisman
(e.g., staff, wand, rabbit foot, I don't know...).
- Create a function that allows any given hero to attack an enemy. The function should return a string like this:
Conan the Barbian has attacked you with a needlessly large sword! You have receive 10 damage points!
. (Hint: Where will this method go? How will you make it work for any given subclass, including ones we might add in the future - e.g. dwarf, dark elf, baker, etc.)