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 = name
this.type = type
}
display(){}
displayMode(){}
}
class Mode{
constructor(app){
this.app = app
this.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 = name
this.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 ...