prof3ssorSt3v3/app.js

## app.js
const APP = {
  currentPage: 'home',
  init() {
    //page has loaded
  },
  addListeners() {
    //add DOM listeners
  },
  navigate(page) {
    //navigate to a new page
  },
};

document.addEventListener('DOMContentLoaded', APP.init);

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SPA</title>
    <link rel="stylesheet" href="./css/main.css" />
    <script src="./js/app.js"></script>
  </head>
  <body class="home">
    <header>
      <p>
        <span class="back"> &lt; </span>
      </p>
      <h1>Some App</h1>
      <p>
        <span class="add"> + </span>
      </p>
    </header>
    <main id="home">
      <h2>The HOME screen</h2>
    </main>
    <main id="gorilla">
      <h2>The GORILLA screen</h2>
    </main>
    <main id="banana">
      <h2>The BANANA screen</h2>
    </main>
    <main id="water">
      <h2>The WATER screen</h2>
    </main>
  </body>
</html>

## main.css
:root {
  --homebg: #e4e4e4;
  --hometxt: #222;
  --gorillabg: #222;
  --gorillatxt: #e4e4e4;
  --bananabg: #f2f764;
  --bananatxt: #4c1c0f;
  --waterbg: #3398ef;
  --watertxt: #d6e3ee;
  --badass: #bada55;
  --defaultfontstack: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: 20px;
  font-family: var(--defaultfontstack);
  font-weight: 300;
}
body.home {
  background-color: var(--homebg);
  color: var(--hometxt);
}
body.gorilla {
  background-color: var(--gorillabg);
  color: var(--gorillatxt);
}
body.banana {
  background-color: var(--bananabg);
  color: var(--bananatxt);
}
body.water {
  background-color: var(--waterbg);
  color: var(--watertxt);
}
header {
  min-height: 4rem;
  background-color: var(--badass);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}
header span {
  font-size: 3rem;
  line-height: 3rem;
  height: 3rem;
  width: 3rem;
  display: grid;
  place-content: center;
  background-color: #eee;
  border-radius: 50%;
  cursor: pointer;
}
header h1 {
  font-size: 2rem;
  padding: 1rem 2rem;
  color: #222;
}
header p {
  display: grid;
  place-content: center;
  color: #222;
}
main {
  min-height: 100vh;
  display: none; /* default */
  padding: 5rem 1rem 1rem 1rem; /* 5rem to leave space for the header */
}
body.home main#home,
body.gorilla main#gorilla,
body.banana main#banana,
body.water main#water {
  display: block;
}

body.home header .back {
  display: none;
}
body.home header .add {
  display: grid;
}
body.gorilla header .back {
  display: grid;
}
body.gorilla header .add {
  display: none;
}
	const APP = {
	currentPage: 'home',
	init() {
	//page has loaded
	},
	addListeners() {
	//add DOM listeners
	},
	navigate(page) {
	//navigate to a new page
	},
	};

	document.addEventListener('DOMContentLoaded', APP.init);
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>SPA</title>
	<link rel="stylesheet" href="./css/main.css" />
	<script src="./js/app.js"></script>
	</head>
	<body class="home">
	<header>
	<p>
	<span class="back"> < </span>
	</p>
	<h1>Some App</h1>
	<p>
	<span class="add"> + </span>
	</p>
	</header>
	<main id="home">
	<h2>The HOME screen</h2>
	</main>
	<main id="gorilla">
	<h2>The GORILLA screen</h2>
	</main>
	<main id="banana">
	<h2>The BANANA screen</h2>
	</main>
	<main id="water">
	<h2>The WATER screen</h2>
	</main>
	</body>
	</html>
	:root {
	--homebg: #e4e4e4;
	--hometxt: #222;
	--gorillabg: #222;
	--gorillatxt: #e4e4e4;
	--bananabg: #f2f764;
	--bananatxt: #4c1c0f;
	--waterbg: #3398ef;
	--watertxt: #d6e3ee;
	--badass: #bada55;
	--defaultfontstack: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	}
	* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	}
	html {
	font-size: 20px;
	font-family: var(--defaultfontstack);
	font-weight: 300;
	}
	body.home {
	background-color: var(--homebg);
	color: var(--hometxt);
	}
	body.gorilla {
	background-color: var(--gorillabg);
	color: var(--gorillatxt);
	}
	body.banana {
	background-color: var(--bananabg);
	color: var(--bananatxt);
	}
	body.water {
	background-color: var(--waterbg);
	color: var(--watertxt);
	}
	header {
	min-height: 4rem;
	background-color: var(--badass);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: center;
	}
	header span {
	font-size: 3rem;
	line-height: 3rem;
	height: 3rem;
	width: 3rem;
	display: grid;
	place-content: center;
	background-color: #eee;
	border-radius: 50%;
	cursor: pointer;
	}
	header h1 {
	font-size: 2rem;
	padding: 1rem 2rem;
	color: #222;
	}
	header p {
	display: grid;
	place-content: center;
	color: #222;
	}
	main {
	min-height: 100vh;
	display: none; /* default */
	padding: 5rem 1rem 1rem 1rem; /* 5rem to leave space for the header */
	}
	body.home main#home,
	body.gorilla main#gorilla,
	body.banana main#banana,
	body.water main#water {
	display: block;
	}

	body.home header .back {
	display: none;
	}
	body.home header .add {
	display: grid;
	}
	body.gorilla header .back {
	display: grid;
	}
	body.gorilla header .add {
	display: none;
	}