This course is for JavaScript developers who are preparing for their interviews and want to learn about the types of design patterns. The course is divided into four sections, each explaining one category of the design pattern. The types covered in this course include creational, structural, behavioral, and architectural design patterns. Each pattern is explained with the help of examples and is followed by a challenge and its solution review.

Acing the JavaScript Design Patterns Interview

## Problem statement

In this challenge, you need to use the MVVM pattern to change the color of the "color" you write in the input field. 

In the `Model`, you need to define the following functions: 

* `subscribe`: Registers an observer.

* `notifyObservers`: Notifies the observer of a change.

* `getCurrentColor`: Returns the current color.

* `setColor`: Sets a new color.


In the `ViewModel`, you need to define the `bind` function, which reflects changes made in the view on the model and vice versa. It should do the following as well:

* If you write `green` in the input, the color of the text `green` should change to `red`.

* If you write `red` in the input, the color of the text `red` should change to `blue`.

* If you write `blue` in the input, the of the text `blue` should change to `green`.

The view is provided to you in the form of the HTML code. Study it carefully before writing the JavaScript code.

## Input

 The name of the color


## Output

The color of the text green, red, or blue changes according to the rules given

## Sample input
```
green
red
blue 
```

## Sample output


green

red

blue

## Challenge 
Take a close look and design a step-by-step solution before jumping on to the implementation. This problem is designed for your practice, so try to solve it on your own first. If you get stuck, you can always refer to the solution provided. Good Luck!

<html>
	<head>
	</head>
	<body>
		Color: <input type="text" name = "color" id="color"> 
	</body>
<html>

class Model{
	constructor(){
		this.model  = {color: "red"};
		this.observers = [];
	}
	subscribe(observer){
		//write definition here
	}

	notifyObservers(attrNm, newVal){
		//write definition here
	}

	getCurrentColor(key){
		//write definition here
	}
	
	setColor(key, value){
		//write definition here
	}
}

class ViewModel{
	constructor(model){
		this.bind = function(viewElement, modelElement){
		//write definition here
	  }
	}
}


var nameInput = document.getElementById('color');
var model = new Model()
var viewModel = new ViewModel(model);
viewModel.bind(nameInput, 'color');

codemirror

console

-----
Let’s discuss the solution in the next lesson.

# Problem statement

In this challenge, you need to use the MVVM pattern to change the color of the "color" you write in the input field. 

In the `Model`, you need to define the following functions: 

* `subscribe`: Registers an observer.

* `notifyObservers`: Notifies the observer of a change.

* `getCurrentColor`: Returns the current color.

* `setColor`: Sets a new color.


In the `ViewModel`, you need to define the `bind` function, which reflects changes made in the view on the model and vice versa. It should do the following as well:

* If you write `green` in the input, the color of the text `green` should change to `red`.

* If you write `red` in the input, the color of the text `red` should change to `blue`.

* If you write `blue` in the input, the of the text `blue` should change to `green`.

The view is provided to you in the form of the HTML code. Study it carefully before writing the JavaScript code.

# Input

 The name of the color


# Output

The color of the text green, red, or blue changes according to the rules given

# Sample input
```
green
red
blue 
```

# Sample output


green

red

blue

# Challenge 
Take a close look and design a step-by-step solution before jumping on to the implementation. This problem is designed for your practice, so try to solve it on your own first. If you get stuck, you can always refer to the solution provided. Good Luck!

# Problem statement

In this challenge, you need to use the MVVM pattern to change the color of the "color" you write in the input field. 

In the `Model`, you need to define the following functions: 

* `subscribe`: Registers an observer.

* `notifyObservers`: Notifies the observer of a change.

* `getCurrentColor`: Returns the current color.

* `setColor`: Sets a new color.


In the `ViewModel`, you need to define the `bind` function, which reflects changes made in the view on the model and vice versa. It should do the following as well:

* If you write `green` in the input, the color of the text `green` should change to `red`.

* If you write `red` in the input, the color of the text `red` should change to `blue`.

* If you write `blue` in the input, the of the text `blue` should change to `green`.

The view is provided to you in the form of the HTML code. Study it carefully before writing the JavaScript code.

# Input

 The name of the color


# Output

The color of the text green, red, or blue changes according to the rules given

# Sample input
```
green
red
blue 
```

# Sample output


green

red

blue

In this challenge, you have to implement the MVVM pattern to solve the given problem.

Introduction To Design Patterns

Creational Patterns

Structural Patterns

Behavioral Patterns

Architectural Patterns

Challenge: MVVM Pattern

Problem statement

Input

Output

Sample input

Sample output

Challenge #