# Architecture: MVC

### Intoduction

MVC is a widely used architecture in web and desktop applications because it is useful for dividing the responsibilities of the code.

### Purpose

The objective of the MCV pattern is to facilitate the management of an application by splitting it into three parts: model, view, and controller.

### Method

The code will be divided in three concepts:

Model: It functions like a database. In this component, you will store all the data of your app.

Controller: It serves as the application core. This is where the logic resides that connects the data with the interface.

View: It represents the application's user interface. It includes forms, texts, buttons, and other related elements.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1686600610613/e1fd87de-7634-4321-a3a1-e573ea3c48ed.jpeg align="center")

### Code example

Model

```javascript
const model = {
    darkMode= false
};
```

Controller

```javascript
const controller = {
    getDarkMode: ()=> model.darkMode,
    toggleDarkMode: () => model.darkMode = !model.darkMode,
};
```

View

```javascript
const body = document.body;
const darkButton = document.createElement('button');
darkButton.textContent = 'darkMode';
darkButton.addEventListener("click", ()=> {
    controler.toggleDarkMode();
    refresh();
});

body.appendChild();

const refresh = ()=> {
    if(controler.getDarkMode()) {
        darkButton.classList.add('day');
    } else {
        darkButton.classList.add('night');
    }
}
refresh();
```