Challenge: Solution Review
This lesson will explain the solution to the problem from the previous coding challenge.
We'll cover the following...
Solution #
Press + to interact
class Applications{constructor(name, type){this.name = namethis.type = type}display(){}displayMode(){}}class Mode{constructor(app){this.app = appthis.lightMode = function(){this.app.setLightMode()}this.darkMode = function(){this.app.setDarkMode()}}}class Facebook extends Applications{constructor(name,type){super(name,type)this.mode = "light"this.setLightMode = function(){this.mode = "light"}this.setDarkMode = function(){this.mode = "dark"}}display(){console.log(`Welcome to Facebook for ${this.type}.`)}displayMode(){console.log(`You are using facebook in ${this.mode} mode.`)}}class WhatsApp extends Applications{constructor(name,type){super(name,type)this.setLightMode = function(){this.mode = "light"}this.setDarkMode = function(){this.mode = "dark"}}display(){console.log(`Welcome to Whatsapp for ${this.type}.`)}displayMode(){console.log(`You are using whatsapp in ${this.mode} mode.`)}}const fb = new Facebook("Facebook", "Social Networking")const mode = new Mode(fb)mode.darkMode()fb.displayMode()const whatsapp = new WhatsApp("Whatsapp", "Chatting")const mode2 = new Mode(whatsapp)mode2.lightMode()whatsapp.displayMode()
Explanation
Let’s start by looking at the code we had originally:
Press + to interact
class Applications{constructor(name, type){this.name = namethis.type = type}display(){}displayMode(){}}class FacebookLightMode extends Applications{constructor(name,type){super(name,type)}display(){console.log(`Welcome to Facebook for ${this.type}.`)}displayMode(){console.log("You are using facebook in light mode.")}}class FacebookDarkMode extends Applications{constructor(name,type){super(name,type)}display(){console.log(`Welcome to Facebook for ${this.type}.`)}displayMode(){console.log("You are using facebook in dark mode.")}}class WhatsAppLightMode extends Applications{constructor(name,type){super(name,type)}display(){console.log(`Welcome to Whatsapp for ${this.type}.`)}displayMode(){console.log("You are using whatsapp in light mode.")}}class WhatsAppDarkMode extends Applications{constructor(name,type){super(name,type)}display(){console.log(`Welcome to Whatsapp for ${this.type}.`)}displayMode(){console.log("You are using whatsapp in dark mode.")}}const fbLight = new FacebookLightMode("Facebook", "Social Networking")const whatsappDark = new WhatsAppDarkMode("Whatsapp", "Chatting")fbLight.display()fbLight.displayMode()whatsappDark.display()whatsappDark.displayMode()
As you can see, there is a parent class Applications
. It has four child classes:
-
FacebookLightMode
-
FacebookDarkMode
-
WhatsAppLightMode
-
WhatsAppDarkMode
The definitions of these classes are simple. Apart from initializing the application name
and type
, each class also defines the following functions:
-
display
-
displayMode
...