From 6468ec08a3132cca54f6ecff8883c8d61c503f57 Mon Sep 17 00:00:00 2001 From: Rohit Reddy <5668.rohit@gmail.com> Date: Sat, 1 Mar 2025 00:27:30 +0530 Subject: [PATCH 01/11] Create folder --- bank-solution/.vscode/settings.json | 3 +++ bank-solution/app.js | 8 ++++++ bank-solution/index.html | 40 +++++++++++++++++++++++++++++ 3 files changed, 51 insertions(+) create mode 100644 bank-solution/.vscode/settings.json create mode 100644 bank-solution/app.js create mode 100644 bank-solution/index.html diff --git a/bank-solution/.vscode/settings.json b/bank-solution/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/bank-solution/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/bank-solution/app.js b/bank-solution/app.js new file mode 100644 index 0000000..8e7dadb --- /dev/null +++ b/bank-solution/app.js @@ -0,0 +1,8 @@ +function updateRoute(templateId) { + const template = document.getElementById(templateId); + const view = template.content.cloneNode(true); + const app = document.getElementById('app'); + app.innerHTML = ''; + app.appendChild(view); + } +updateRoute('Login'); \ No newline at end of file diff --git a/bank-solution/index.html b/bank-solution/index.html new file mode 100644 index 0000000..eedcdf5 --- /dev/null +++ b/bank-solution/index.html @@ -0,0 +1,40 @@ + + + + + + Bank App + + + +
Loading.....
+ + + + \ No newline at end of file From 75cf434232962ced8681a653ecb2e62f306f5111 Mon Sep 17 00:00:00 2001 From: Rohit Reddy <5668.rohit@gmail.com> Date: Sat, 1 Mar 2025 03:32:21 +0530 Subject: [PATCH 02/11] Create folder --- bank-solution/app.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/bank-solution/app.js b/bank-solution/app.js index 8e7dadb..b2499a3 100644 --- a/bank-solution/app.js +++ b/bank-solution/app.js @@ -5,4 +5,9 @@ function updateRoute(templateId) { app.innerHTML = ''; app.appendChild(view); } -updateRoute('Login'); \ No newline at end of file +updateRoute('Login'); + +const routes = { + '/login': { templateId: 'login' }, + '/dashboard': { templateId: 'dashboard' }, +}; \ No newline at end of file From 4a2546b7e8f9389bf9a600fa465c2b74a516fa6a Mon Sep 17 00:00:00 2001 From: Rohit Reddy <5668.rohit@gmail.com> Date: Sat, 1 Mar 2025 12:14:16 +0530 Subject: [PATCH 03/11] Updated code --- bank-solution/app.js | 48 ++++++++++++++++++++++++++++++++++------ bank-solution/index.html | 22 ++++++++++++------ 2 files changed, 56 insertions(+), 14 deletions(-) diff --git a/bank-solution/app.js b/bank-solution/app.js index b2499a3..a38c796 100644 --- a/bank-solution/app.js +++ b/bank-solution/app.js @@ -1,13 +1,47 @@ -function updateRoute(templateId) { - const template = document.getElementById(templateId); +const routes = { + '/login': { + templateId: 'login' , + title: 'Login Page' + }, + '/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'); + } + + const template = document.getElementById(route.templateId); const view = template.content.cloneNode(true); const app = document.getElementById('app'); + document.title = route.title; + console.log(`${route.title} is shown`); app.innerHTML = ''; app.appendChild(view); } -updateRoute('Login'); -const routes = { - '/login': { templateId: 'login' }, - '/dashboard': { templateId: 'dashboard' }, -}; \ No newline at end of file + +updateRoute('login'); + +function navigate(path) { + window.history.pushState({}, path, path); + updateRoute(); +} + +function onLinkClick(event) { + event.preventDefault(); + navigate(event.target.href); + } + +window.onpopstate = () => updateRoute(); +updateRoute(); \ No newline at end of file diff --git a/bank-solution/index.html b/bank-solution/index.html index eedcdf5..3ce2106 100644 --- a/bank-solution/index.html +++ b/bank-solution/index.html @@ -3,21 +3,22 @@ - Bank App - + +
Loading.....
- + + + \ No newline at end of file From 864ad7454d26f0b0b72d52fb39c3c35912270366 Mon Sep 17 00:00:00 2001 From: Rohit Reddy <5668.rohit@gmail.com> Date: Sun, 2 Mar 2025 03:35:30 +0530 Subject: [PATCH 04/11] CREATE solution.md --- solution.md | 51 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 51 insertions(+) create mode 100644 solution.md diff --git a/solution.md b/solution.md new file mode 100644 index 0000000..af0b234 --- /dev/null +++ b/solution.md @@ -0,0 +1,51 @@ +# 4-Bank-Project + +## 1-template-route + +### Assignment + +The routes object defines available routes in the application which establishes a connection between the url and your templates.Currently our routes declaration contains only the template ID to use. Modify your routes object to include a title for your template and later, we will include our command which gives a title to the document depending on which template is opened. After this, we can observe a change in document title as and when a template is opened. + +```javascript +const routes = { + '/login': { + templateId: 'login' , + title: 'Login Page' + }, + '/dashboard': { + templateId: 'dashboard', + title: 'Dashboard' + }, + '/credits': { + templateId: 'credits', + title: 'credits' + }, +}; +``` +Now add this code in your updateRoute function to update the title of the browser and print the message in the console everytime a template is opened. + +For example, The message 'Dashboard is shown' in the console every time the dashboard page is opened. + +```javascript +document.title = route.title; +console.log(`${route.title} is shown`); +``` +### Challenge + +I just had to repeat and apply whatever I had learnt till now. First, I added the following code to my html file just below the dashboard template to create another template called credits. + +```html + +``` +After creating the template, my next step was to add the template to my routes object, which established a connection between my url and credits template. I also added a link in the header element of my dashboard template to navigate between the templates. + +```html +Credits +``` + From 86b5eabcbc63a44c3f474fb248b01d2258d3b884 Mon Sep 17 00:00:00 2001 From: Rohit Reddy <5668.rohit@gmail.com> Date: Mon, 3 Mar 2025 23:37:37 +0530 Subject: [PATCH 05/11] index.html --- bank-solution/index.html | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/bank-solution/index.html b/bank-solution/index.html index 3ce2106..8cb7881 100644 --- a/bank-solution/index.html +++ b/bank-solution/index.html @@ -11,7 +11,25 @@ + +
+

ADD TRANSACTION

+
+
+
+
+
+
+
+
+ + + +
+
+