mnichols08/app.js Secret

## app.js
// Define a Controller class
class Controller {
  // Initialize the controller
  init = () => {
    // Initialize the view
    app.view.init();
  }
}

// Define a View class
class View {
    // Constructor for the View class
    constructor(tag, innerHTML, parentElement) {
        // Create a new HTML element with the given tag
        this.element = document.createElement(tag);
        // Set the inner HTML of the element to the given HTML
        this.element.innerHTML = innerHTML;
        // Append the new element to the given parent element
        parentElement.append(this.element);
    }
    init = () =>
        // Create a new View instance
        new View(
            "main",
            `
            <h1>I hope you are having fun!</h1>
            <h2>Welcome to the app.</h2>
    `,
            this.element
        );
}

// Define a Model class
class Model {
    // Constructor for the Model class
    constructor() {
        // Initialize the state with a title and count
        this.state = {
            title: "Hello World!",
            count: 0,
        };
        // Create a new View instance with a div element, no inner HTML, and append it to the body of the document
        this.view = new View("div", "", document.body);
        // Create a new Controller instance and pass the view instance to it
        this.controller = new Controller(this.view);
    }
}
// Create a new instance of the Model class and assign it to the constant "app"
const app = new Model();
// Call the init method on the controller property of the app instance
// This initializes the view and adds event listeners to the HTML elements
document.onload = app.controller.init();

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Model View Controller Exercise</title>
    <link rel="stylesheet" href="./styles.css">
    <script src="./app.js" defer></script>
</head>
<body>
    <noscript>
        <h1>Sorry, but JavaScript must be enable to view this application.</h1>
    </noscript>
</body>
</html>

## styles.css
body {
    background: linear-gradient(45deg, #080404, #020606);
    height: 100%;
    color: #fff;
    text-align: center;
    font-family: monospace;
}h1 {
    font-size: 2.5em;
    font-weight: bold;
    color: #FF6347;
    text-shadow: 2px 2px 4px #000000;
}
h3 {
    display: inline-block;
}
p:nth-of-type(2),p:nth-of-type(4){
    display: inline;
}

p {
    font-size: 1.2em;
    line-height: 1.6;
    color: #ddd;
    text-align: justify;
    margin: 0 auto;
    max-width: 800px;
}

button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    transition-duration: 0.4s;
    cursor: pointer;
    transition: all .2s;
}

button:hover {
    background-color: #473599;
    color: white;
    transform: scale(1.1) rotate3d(1, 1, 1, -10deg) translate(10px, 10px);
    border-radius: 10px;
}
	// Define a Controller class
	class Controller {
	// Initialize the controller
	init = () => {
	// Initialize the view
	app.view.init();
	}
	}

	// Define a View class
	class View {
	// Constructor for the View class
	constructor(tag, innerHTML, parentElement) {
	// Create a new HTML element with the given tag
	this.element = document.createElement(tag);
	// Set the inner HTML of the element to the given HTML
	this.element.innerHTML = innerHTML;
	// Append the new element to the given parent element
	parentElement.append(this.element);
	}
	init = () =>
	// Create a new View instance
	new View(
	"main",
	`
	<h1>I hope you are having fun!</h1>
	<h2>Welcome to the app.</h2>
	`,
	this.element
	);
	}

	// Define a Model class
	class Model {
	// Constructor for the Model class
	constructor() {
	// Initialize the state with a title and count
	this.state = {
	title: "Hello World!",
	count: 0,
	};
	// Create a new View instance with a div element, no inner HTML, and append it to the body of the document
	this.view = new View("div", "", document.body);
	// Create a new Controller instance and pass the view instance to it
	this.controller = new Controller(this.view);
	}
	}
	// Create a new instance of the Model class and assign it to the constant "app"
	const app = new Model();
	// Call the init method on the controller property of the app instance
	// This initializes the view and adds event listeners to the HTML elements
	document.onload = app.controller.init();
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Model View Controller Exercise</title>
	<link rel="stylesheet" href="./styles.css">
	<script src="./app.js" defer></script>
	</head>
	<body>
	<noscript>
	<h1>Sorry, but JavaScript must be enable to view this application.</h1>
	</noscript>
	</body>
	</html>
	body {
	background: linear-gradient(45deg, #080404, #020606);
	height: 100%;
	color: #fff;
	text-align: center;
	font-family: monospace;
	}h1 {
	font-size: 2.5em;
	font-weight: bold;
	color: #FF6347;
	text-shadow: 2px 2px 4px #000000;
	}
	h3 {
	display: inline-block;
	}
	p:nth-of-type(2),p:nth-of-type(4){
	display: inline;
	}

	p {
	font-size: 1.2em;
	line-height: 1.6;
	color: #ddd;
	text-align: justify;
	margin: 0 auto;
	max-width: 800px;
	}

	button {
	background-color: #4CAF50;
	border: none;
	color: white;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 4px 2px;
	transition-duration: 0.4s;
	cursor: pointer;
	transition: all .2s;
	}

	button:hover {
	background-color: #473599;
	color: white;
	transform: scale(1.1) rotate3d(1, 1, 1, -10deg) translate(10px, 10px);
	border-radius: 10px;
	}