Skip to content

Instantly share code, notes, and snippets.

Last active March 16, 2024 00:47
Show Gist options
  • Save mnichols08/0a97779be41b1539bcea74d89aeadf8b to your computer and use it in GitHub Desktop.
Save mnichols08/0a97779be41b1539bcea74d89aeadf8b to your computer and use it in GitHub Desktop.
Stage 1/3 of MVC Example
// Define a Controller class
class Controller {
// Initialize the controller
init = () => {
// Initialize the view
// 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
init = () =>
// Create a new View instance
new View(
<h1>I hope you are having fun!</h1>
<h2>Welcome to the app.</h2>
// 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">
<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>
<h1>Sorry, but JavaScript must be enable to view this application.</h1>
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;
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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment