amfoss · Iron-56 · Mar 3, 2025
diff --git a/4-bank-project/1-template-route/SOLUTION.md b/4-bank-project/1-template-route/SOLUTION.md
@@ -0,0 +1,17 @@
+## Assignment
+
+```javascript
+document.title = route.title;
+```
+This code in the updateRoute function sets the title of the window when template changes.
+In the same function we can write code to do the necessary template specific functions.
+We can also set a specific function to the route by passing the function pointer (without parenthesis) and call the function here if it exists.
+```
+if (route.templateId == 'dashboard') {
+	console.log('Dashboard is shown');
+}
+```
+
+## Challenge
+
+Using a new template I was able to easily show the credit page.
diff --git a/4-bank-project/1-template-route/app.js b/4-bank-project/1-template-route/app.js
@@ -0,0 +1,43 @@
+
+const routes = {
+	'/login': { templateId: 'login', title: 'Login' },
+	'/dashboard': { templateId: 'dashboard', title: 'Dashboard' },
+	'/credits': { templateId: 'credits', title: 'Credits' },
+};
+
+function updateRoute() {
+	const path = window.location.pathname;
+	const route = routes[path];
+
+	if (!route) {
+		return navigate('/login');
+	}
+
+	document.title = route.title;
+
+	if (route.templateId == 'dashboard') {
+		console.log('Dashboard is shown');
+	}
+
+	const template = document.getElementById(route.templateId);
+	const view = template.content.cloneNode(true);
+	const app = document.getElementById('app');
+	app.innerHTML = '';
+	app.appendChild(view);
+}
+
+function navigate(path) {
+	window.history.pushState({}, path, path);
+
+	updateRoute();
+}
+
+function onLinkClick(event) {
+	event.preventDefault();
+	navigate(event.target.href);
+}
+
+window.onpopstate = () => updateRoute();
+updateRoute();
+
+// updateRoute('login');
diff --git a/4-bank-project/1-template-route/index.html b/4-bank-project/1-template-route/index.html
@@ -0,0 +1,164 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<title>Bank App</title>
+		<script src="app.js" defer></script>
+	</head>
+	<body>
+		<div id="app">Loading...</div>
+		<template id="login">
+			<h1>Bank App</h1>
+			<section>
+				<a href="/dashboard" onclick="onLinkClick(event)">Login</a>
+			</section>
+			<section>
+				<a href="/credits" onclick="onLinkClick(event)">Credits</a>
+			</section>
+		</template>
+		<template id="credits">
+			<h1>Credits</h1>
+			<div class='wrapper'>
+				<div class='movie'>
+				Welcome</div>
+				<div class='job'>
+				Myscript2010</div>
+				<div class='name'>
+				LEARN EDITING SCRIPT</div>
+				<div class='job'>
+				WITH CODE</div>
+				<div class='name'>
+				CSS HTML EFFECT</div>
+				<div class='job'>
+				SOURCES CODE</div>
+				<div class='name'>
+				CODEPEN GITHUB</div>
+				<div class='job'>
+				SOURCE NEXT</div>
+				<div class='name'>
+				ALL SOURCES CODE</div>
+				<div class='job'>
+				CODE EFFECT</div>
+				<div class='name'>
+				EFFECT SHINE</div>
+				<div class='job'>
+				CODE EFFECT</div>
+				<div class='name'>
+				EFFECT ROTATE</div>
+				<div class='job'>
+				CODE EFFECT</div>
+				<div class='name'>
+				EFFECT SLIDE</div>
+				<div class='job'>
+				CODE EFFECT</div>
+				<div class='name'>
+				EFFECT HOVER</div>
+				<div class='job'>
+				CODE EFFECT</div>
+				<div class='name'>
+				EFFECT TRANSISI</div>
+				<div class='job'>
+				CODE EFFECT</div>
+				<div class='name'>
+				EFFECT FLIP</div>
+				<div class='job'>
+				CODE EFFECT</div>
+				<div class='name'>
+				EFFECT TOOLTIP</div>
+				<div class='job'>
+				CODE EFFECT</div>
+				<div class='name'>
+				EFFECT RADIAL</div>
+				<div class='job'>
+				CODE EFFECT</div>
+				<div class='name'>
+				EFFECT MULTIPLE</div>
+				<div class='job'>
+				CODE EFFECT</div>
+				<div class='name'>
+				EFFECT ANIMATED</div>
+				<div class='job'>
+				CODE EFFECT</div>
+				<div class='name'>
+				EFFECT EXPANDING</div>
+				<div class='job'>
+				CODE EFFECT</div>
+				<div class='name'>
+				EFFECT TRANSFORMS</div>
+				<div class='job'>
+				CODE EFFECT</div>
+				<div class='name'>
+				EFFECT OVERLAY</div>
+				<div class='job'>
+				CODE EFFECT</div>
+				<div class='name'>
+				EFFECT LOADING</div>
+				<div class='job'>
+				CODE EFFECT</div>
+				<div class='name'>
+				EFFECT CIRCLE</div>
+				<div class='job'>
+				CODE EFFECT</div>
+				<div class='name'>
+				EFFECT NAPIGATION</div>
+				<div class='job'>
+				CODE EFFECT</div>
+				<div class='name'>
+				EFFECT DROPDOWN</div>
+				<div class='job'>
+				CODE EFFECT</div>
+				<div class='name'>
+				EFFECT LIGHTING</div>
+				<div class='job'>
+				CODE EFFECT</div>
+				<div class='name'>
+				EFFECT ZOOM</div>
+				<div class='job'>
+				CODE EFFECT</div>
+				<div class='name'>
+				EFFECT SCALE</div>
+				<div class='job'>
+				CODE EFFECT</div>
+				<div class='name'>
+				EFFECT OPACITY</div>
+				<div class='job'>
+				CODE EFFECT</div>
+				<div class='name'>
+				EFFECT FLASHING</div>
+				<div class='job'>
+				CODE EFFECT</div>
+				<div class='name'>
+				EFFCET SMOKE</div>
+				<div class='job'>
+				CODE EDITED BY.</div>
+				<div class='name'>
+				MYSCRIPT2010</div>
+				<div class='job'>
+				</div>
+			</div>
+		</template>
+		<template id="dashboard">
+			<header>
+				<h1>Bank App</h1>
+				<a href="/login" onclick="onLinkClick(event)">Logout</a>
+			</header>
+			<section>
+				Balance: 100$
+			</section>
+			<section>
+				<h2>Transactions</h2>
+				<table>
+					<thead>
+						<tr>
+							<th>Date</th>
+							<th>Object</th>
+							<th>Amount</th>
+						</tr>
+					</thead>
+					<tbody></tbody>
+				</table>
+			</section>
+		</template>
+	</body>
+</html>
diff --git a/4-bank-project/2-forms/SOLUTION.md b/4-bank-project/2-forms/SOLUTION.md
@@ -0,0 +1,8 @@
+## Assignment
+
+I first added the css file for each page in routes so that when document loads, the javascript will just change the current href of the link tag.
+I was able to make a movie like credits scene from a project in codepen.
+
+## Challenge
+
+I created a div which would be initially hidden and when the user enters an existing username, I check the error in result of register function. 
diff --git a/4-bank-project/2-forms/app.js b/4-bank-project/2-forms/app.js
@@ -0,0 +1,75 @@
+
+const routes = {
+	'/login': { templateId: 'login', title: 'Login', style: 'style.css' },
+	'/dashboard': { templateId: 'dashboard', title: 'Dashboard' },
+	'/credits': { templateId: 'credits', title: 'Credits', style: 'credits.css' },
+};
+
+async function register() {
+	const registerForm = document.getElementById('registerForm');
+	const formData = new FormData(registerForm);
+	const data = Object.fromEntries(formData);
+	const jsonData = JSON.stringify(data);
+	const result = await createAccount(jsonData);
+	if (result.error == "User already exists")
+	{
+		document.getElementById('userError').hidden = false;
+	} else {
+		console.log('Account created!', result);
+	}
+}
+
+async function createAccount(account) {
+	try {
+		const response = await fetch('//localhost:5000/api/accounts', {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: account
+		});
+		return await response.json();
+	} catch (error) {
+		return { error: error.message || 'Unknown error' };
+	}
+}
+
+function updateRoute() {
+	const path = window.location.pathname;
+	const route = routes[path];
+
+	if (!route) {
+		return navigate('/login');
+	}
+
+	if (route.style) {
+		const style = document.getElementById('stylesheet');
+		style.href = route.style;
+	}
+
+	document.title = route.title;
+
+	if (route.templateId == 'dashboard') {
+		console.log('Dashboard is shown');
+	}
+
+	const template = document.getElementById(route.templateId);
+	const view = template.content.cloneNode(true);
+	const app = document.getElementById('app');
+	app.innerHTML = '';
+	app.appendChild(view);
+}
+
+function navigate(path) {
+	window.history.pushState({}, path, path);
+
+	updateRoute();
+}
+
+function onLinkClick(event) {
+	event.preventDefault();
+	navigate(event.target.href);
+}
+
+window.onpopstate = () => updateRoute();
+updateRoute();
+
+// updateRoute('login');
diff --git a/4-bank-project/2-forms/credits.css b/4-bank-project/2-forms/credits.css
@@ -0,0 +1,52 @@
+.wrapper {
+	position: absolute;
+	top: 100%;
+	left: 50%;
+	width: 400px;
+	margin-left: -200px;
+	text-align: center;
+	text-transform: uppercase;
+	color: white;
+	animation: 60s credits linear infinite;
+}
+
+h1 {
+	color: white;
+}
+
+* {
+	font: 300 30px/1 'Open Sans Condensed', sans-serif;
+}
+
+.movie {
+	margin-bottom: 50px;
+	font-size: 50px;
+}
+
+.job {
+	margin-bottom: 5px;
+	font-size: 18px;
+}
+
+.name {
+	margin-bottom: 50px;
+	font-size: 35px;
+}
+
+@keyframes credits {
+	0% {
+		top: 100%;
+	}
+	100% {
+		top: -500%;
+	}
+}
+
+html, body {
+	height: 100%;
+}
+
+body {
+	background: radial-gradient(ellipse at top left, #334455 0%, #112233 100%);
+	overflow: hidden;
+}