JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>

	</head>
	<body>

		<div id="app"></div>

		<script>
			class View {
				constructor() {
					this.input = document.createElement('input');
					this.addButton = document.createElement('button');
					this.addButton.style.marginLeft = '15px';
					this.mainBlock = document.querySelector('#app');
					this.taskList = document.createElement('ul');
					this.showButton = document.createElement('button');
					this.showButton.style.marginLeft = '15px';
					this.returnButton = document.createElement('button');           //5
					this.returnButton.style.marginLeft = '15px';                    //6
				}

				initRender() {
					this.mainBlock.append(this.input, this.addButton, this.showButton); //Добавить this.taskList
					this.addButton.innerHTML = 'ADD';
					this.showButton.innerHTML = 'SHOW';
				}

				renderTask(task) {
					let item = document.createElement('li');
					item.innerHTML = task;
					this.taskList.appendChild(item);
					this.input.value = '';
				}

				removeTask() {                                                    //3
					this.mainBlock.append(this.returnButton, this.taskList);
					this.returnButton.innerHTML = 'RETURN';                         //4
					this.showButton.remove();
					this.addButton.remove();
					this.input.remove();
				}

				returnTasks() {                                                   //7
					this.returnButton.remove();
					this.taskList.innerHTML = "";
					this.initRender();
				}


			}


			class Controller {
				constructor(model, view) {
					this.model = model;
					this.view = view;
				}

				addData = () => {
					let value = this.view.input.value;
					this.model.addTask(value);
					this.view.renderTask(value);
				}

				showList = () => {                                                //2
					let newPage =...