nezumi/javascript-training
1
0
Fork 0
mirror of https://github.com/Nezumi-2711/javascript-training.git synced 2026-09-22 13:38:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'feat/javascript-practice' into feat/add-wallet-method

Browse Source
This commit is contained in:
nezumi
2023-09-12 17:15:55 +07:00
parent 84b439eb13 eb87bf17f1
commit e3ee8ece2c
4 changed files with 31 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
javascript-practice/src/js/views/commonView.js
+16 -14
View File
@@ -34,10 +34,10 @@ export default class CommonView {
initElementToast() { initElementToast() {
this.toastDialog = document.querySelector('.dialog'); this.toastDialog = document.querySelector('.dialog');
this.toast = document.querySelector('.toast'); this.toast = document.querySelector('.toast');
this.toastIcon = document.querySelector('.mark'); this.toastIcon = this.toast.querySelector('.mark');
this.toastBtn = document.querySelector('.toast__redirect-btn'); this.toastBtn = this.toast.querySelector('.toast__redirect-btn');
this.toastTitle = document.querySelector('.toast__title'); this.toastTitle = this.toast.querySelector('.toast__title');
this.toastContent = document.querySelector('.toast__message'); this.toastContent = this.toast.querySelector('.toast__message');
} }
/** /**
@@ -56,18 +56,14 @@ export default class CommonView {
*/ */
initToastContent(typeToast, title, content, btnContent) { initToastContent(typeToast, title, content, btnContent) {
// Remove old typeToast class if haved // Remove old typeToast class if haved
this.toast.classList.forEach((classItem) => Object.keys(TYPE_TOAST).forEach((value) => {
classItem === TYPE_TOAST.success || classItem === TYPE_TOAST.error CommonView.removeClassElement(value, this.toast);
? this.toast.classList.remove(classItem) });
: '',
);
// Remove old icon toast if haved // Remove old icon toast if haved
this.toastIcon.classList.forEach((classItem) => Object.keys(MARK_ICON).forEach((value) => {
classItem === MARK_ICON.success || classItem === MARK_ICON.error CommonView.removeClassElement(value, this.toastIcon);
? this.toastIcon.classList.remove(classItem) });
: '',
);
// Init content toast // Init content toast
this.toast.classList.add( this.toast.classList.add(
@@ -81,6 +77,12 @@ export default class CommonView {
this.toastBtn.textContent = btnContent; this.toastBtn.textContent = btnContent;
} }
static removeClassElement(classEl, el) {
if (el.classList.contains(classEl)) {
el.classList.remove(classEl);
}
}
/** /**
* Add event listener for toast * Add event listener for toast
*/ */
javascript-practice/src/js/views/homeView.js
+4 -4
View File
@@ -13,7 +13,6 @@ export default class HomeView extends CommonView {
this.addBudgetBtn = document.getElementById('addBudget'); this.addBudgetBtn = document.getElementById('addBudget');
this.saveBtn = document.querySelectorAll('.form__save-btn'); this.saveBtn = document.querySelectorAll('.form__save-btn');
this.dialogs = document.querySelectorAll('.dialog'); this.dialogs = document.querySelectorAll('.dialog');
this.cancelBtn = document.querySelectorAll('.form__cancel-btn');
this.categoryField = document.getElementById('selectCategory'); this.categoryField = document.getElementById('selectCategory');
this.closeIcon = document.querySelector('.close-icon'); this.closeIcon = document.querySelector('.close-icon');
@@ -130,13 +129,14 @@ export default class HomeView extends CommonView {
*/ */
handlerTabsTransfer() { handlerTabsTransfer() {
this.tabs.forEach((tab, index) => { this.tabs.forEach((tab, index) => {
tab.addEventListener('click', (e) => { tab.addEventListener('click', () => {
this.removeActiveTab(); this.removeActiveTab();
tab.classList.add('active'); tab.classList.add('active');
const line = document.querySelector('.app__line'); const line = document.querySelector('.app__line');
line.style.width = `${e.target.offsetWidth}px`;
line.style.left = `${e.target.offsetLeft}px`; line.classList.toggle('right', line.classList.contains('left'));
line.classList.toggle('left', !line.classList.contains('right'));
this.allContent.forEach((content) => { this.allContent.forEach((content) => {
content.classList.remove('active'); content.classList.remove('active');
javascript-practice/src/pages/index.html
+1 -1
View File
@@ -306,7 +306,7 @@
<div class="app__tabs"> <div class="app__tabs">
<button class="app__tab-item active">SUMMARY</button> <button class="app__tab-item active">SUMMARY</button>
<button class="app__tab-item">TRANSACTION DETAILS</button> <button class="app__tab-item">TRANSACTION DETAILS</button>
<div class="app__line"></div> <div class="app__line left"></div>
</div> </div>
<!-- Start content app --> <!-- Start content app -->
<div class="app__contents"> <div class="app__contents">
javascript-practice/src/styles/pages/_index.scss
+10 -2
View File
@@ -109,12 +109,20 @@
&__line { &__line {
position: absolute; position: absolute;
top: 66px; top: 66px;
left: 150px;
width: 115px;
height: 2px; height: 2px;
background-color: $primary-color; background-color: $primary-color;
border-radius: 10px; border-radius: 10px;
transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
&.left {
left: 152px;
width: 116px;
}
&.right {
left: 272px;
width: 200px;
}
} }
} }