diff --git a/javascript-practice/src/js/app.js b/javascript-practice/src/js/app.js
index c3f6fc3..80e6a3e 100644
--- a/javascript-practice/src/js/app.js
+++ b/javascript-practice/src/js/app.js
@@ -12,5 +12,6 @@ export default class App {
start() {
this.controller.registerController.init();
this.controller.loginController.init();
+ this.controller.homeController.init();
}
}
diff --git a/javascript-practice/src/js/constants/constant.js b/javascript-practice/src/js/constants/constant.js
index 002a37b..3397fc0 100644
--- a/javascript-practice/src/js/constants/constant.js
+++ b/javascript-practice/src/js/constants/constant.js
@@ -15,7 +15,7 @@ export const MESSAGE = {
export const URL = {
LOGIN: 'login',
REGISTER: 'register',
- HOME: 'home',
+ HOME: '',
};
export const BTN_CONTENT = {
diff --git a/javascript-practice/src/js/controllers/controller.js b/javascript-practice/src/js/controllers/controller.js
index 1434739..1b81f42 100644
--- a/javascript-practice/src/js/controllers/controller.js
+++ b/javascript-practice/src/js/controllers/controller.js
@@ -1,3 +1,4 @@
+import HomeController from './homeController';
import LoginController from './loginController';
import RegisterController from './registerController';
@@ -5,5 +6,6 @@ export default class Controller {
constructor(service, view) {
this.registerController = new RegisterController(service, view);
this.loginController = new LoginController(service, view);
+ this.homeController = new HomeController(service, view);
}
}
diff --git a/javascript-practice/src/js/controllers/homeController.js b/javascript-practice/src/js/controllers/homeController.js
new file mode 100644
index 0000000..18ac55f
--- /dev/null
+++ b/javascript-practice/src/js/controllers/homeController.js
@@ -0,0 +1,14 @@
+export default class HomeController {
+ constructor(service, view) {
+ this.service = service;
+ this.homeView = view.homeView;
+ }
+
+ init() {
+ if (this.homeView) {
+ this.homeView.handlerTabsTransfer();
+ this.homeView.addCommonEventPage();
+ this.homeView.addEventSelectCategoryDialog();
+ }
+ }
+}
diff --git a/javascript-practice/src/js/views/commonView.js b/javascript-practice/src/js/views/commonView.js
index 083f01f..933b6fb 100644
--- a/javascript-practice/src/js/views/commonView.js
+++ b/javascript-practice/src/js/views/commonView.js
@@ -96,7 +96,21 @@ export default class CommonView {
*/
handleEventBtnPopupAndOverlay() {
this.popupBtn.addEventListener('click', this.tooglePopupForm.bind(this));
- this.overlay.addEventListener('click', this.tooglePopupForm.bind(this));
+ this.overlay.addEventListener('click', this.toogleDialog.bind(this));
+ }
+
+ toogleDialog() {
+ this.overlay.classList.toggle('active');
+ if (this.dialog.length) {
+ // If it have more dialog
+ this.dialog.forEach((item) => {
+ if (item.classList.contains('active')) {
+ item.classList.remove('active');
+ }
+ });
+ } else {
+ this.dialog.classList.toggle('active');
+ }
}
/**
diff --git a/javascript-practice/src/js/views/homeView.js b/javascript-practice/src/js/views/homeView.js
new file mode 100644
index 0000000..3d3b9fb
--- /dev/null
+++ b/javascript-practice/src/js/views/homeView.js
@@ -0,0 +1,116 @@
+import CommonView from './commonView';
+
+export default class HomeView extends CommonView {
+ constructor() {
+ super();
+
+ this.tabs = document.querySelectorAll('.app__tab-item');
+ this.allContent = document.querySelectorAll('.app__content-item');
+ this.addTransactionBtn = document.getElementById('addTransaction');
+ this.addBudgetBtn = document.getElementById('addBudget');
+ this.overlay = document.querySelector('.overlay');
+ this.darkOverlay = document.querySelector('.dark-overlay');
+ this.dialog = document.querySelectorAll('.dialog');
+ this.cancelBtn = document.querySelectorAll('.form__cancel-btn');
+ this.categoryField = document.getElementById('selectCategory');
+ this.closeIcon = document.querySelector('.close-icon');
+
+ this.budgetForm = document.getElementById('budgetForm');
+ this.transactionForm = document.getElementById('transactionForm');
+ this.categoryForm = document.getElementById('categoryForm');
+
+ this.homePage = document.URL.includes('/');
+ }
+
+ /**
+ * Handle event when click on tabs
+ */
+ handlerTabsTransfer() {
+ this.tabs.forEach((tab, index) => {
+ tab.addEventListener('click', (e) => {
+ this.removeActiveTab();
+ tab.classList.add('active');
+
+ const line = document.querySelector('.app__line');
+ line.style.width = `${e.target.offsetWidth}px`;
+ line.style.left = `${e.target.offsetLeft}px`;
+
+ this.allContent.forEach((content) => {
+ content.classList.remove('active');
+ });
+ this.allContent[index].classList.add('active');
+ });
+ });
+ }
+
+ addCommonEventPage() {
+ this.addTransactionBtn.addEventListener('click', () => {
+ this.transactionForm.classList.add('active');
+ this.toggleActiveOverlay();
+ });
+
+ this.addBudgetBtn.addEventListener('click', () => {
+ this.budgetForm.classList.add('active');
+ this.toggleActiveOverlay();
+ });
+
+ this.cancelBtn.forEach((item) => {
+ item.addEventListener('click', () => {
+ this.hideDialog();
+ this.toggleActiveOverlay();
+ });
+ });
+
+ this.overlay.addEventListener('click', () => {
+ this.hideDialog();
+ });
+ }
+
+ addEventSelectCategoryDialog() {
+ this.categoryField.addEventListener('click', () => {
+ this.categoryForm.classList.add('active');
+ this.toggleDarkOverlayActive();
+ });
+
+ this.closeIcon.addEventListener(
+ 'click',
+ this.hideSelectCategoryForm.bind(this),
+ );
+
+ this.darkOverlay.addEventListener(
+ 'click',
+ this.hideSelectCategoryForm.bind(this),
+ );
+ }
+
+ hideSelectCategoryForm() {
+ this.categoryForm.classList.remove('active');
+ this.toggleDarkOverlayActive();
+ }
+
+ toggleDarkOverlayActive() {
+ this.darkOverlay.classList.toggle('active');
+ }
+
+ hideDialog() {
+ this.dialog.forEach((item) => {
+ if (item.classList.contains('active')) {
+ item.classList.remove('active');
+ }
+ });
+ }
+
+ toggleActiveOverlay() {
+ this.overlay.classList.toggle('active');
+ }
+
+ removeActiveTab() {
+ this.tabs.forEach((tab) => {
+ tab.classList.remove('active');
+ });
+ }
+
+ isHomePage() {
+ return this.homePage;
+ }
+}
diff --git a/javascript-practice/src/js/views/loginView.js b/javascript-practice/src/js/views/loginView.js
index 0733561..1b4ca34 100644
--- a/javascript-practice/src/js/views/loginView.js
+++ b/javascript-practice/src/js/views/loginView.js
@@ -7,6 +7,7 @@ export default class LoginView extends CommonLoginRegisterView {
this.parentElement = document.querySelector('.form');
this.loginPage = document.URL.includes('/login');
+ this.dialog = document.querySelector('.modal-box');
}
/**
diff --git a/javascript-practice/src/js/views/registerView.js b/javascript-practice/src/js/views/registerView.js
index 7470dd2..7de66a8 100644
--- a/javascript-practice/src/js/views/registerView.js
+++ b/javascript-practice/src/js/views/registerView.js
@@ -7,6 +7,7 @@ export default class RegisterView extends CommonLoginRegisterView {
super();
this.registerPage = document.URL.includes('/register');
+ this.dialog = document.querySelector('.modal-box');
}
/**
diff --git a/javascript-practice/src/js/views/view.js b/javascript-practice/src/js/views/view.js
index e9e04d5..a2bd49b 100644
--- a/javascript-practice/src/js/views/view.js
+++ b/javascript-practice/src/js/views/view.js
@@ -2,6 +2,7 @@ import RegisterView from './registerView';
import LoginView from './loginView';
import { getURL } from '../helpers/helpers';
import { URL } from '../constants/constant';
+import HomeView from './homeView';
export default class View {
constructor() {
@@ -12,6 +13,9 @@ export default class View {
case URL.REGISTER:
this.registerView = new RegisterView();
break;
+ case URL.HOME:
+ this.homeView = new HomeView();
+ break;
default:
}
}
diff --git a/javascript-practice/src/pages/index.html b/javascript-practice/src/pages/index.html
index e534cc3..1457d43 100644
--- a/javascript-practice/src/pages/index.html
+++ b/javascript-practice/src/pages/index.html
@@ -8,7 +8,6 @@
Money Lover Web
-
-