diff --git a/index.html b/index.html index d9ab1b4..2ea2bec 100644 --- a/index.html +++ b/index.html @@ -1,166 +1,148 @@ - - - - - - - - - - Vactor Bank - - - - - -
- -
-
-

Current balance

-

- As of 05/03/2037 -

-
-

0000€

-
- -
-
-
2 deposit
-
3 days ago
-
4 000€
-
-
-
- 1 withdrawal -
-
24/01/2037
-
-378€
-
-
+ + + + + - -
-

In

-

0000€

-

Out

-

0000€

-

Interest

-

0000€

- -
+ - -
-

Transfer money

-
- - - - - -
-
+ + Vactor Bank + - -
-

Request loan

-
- - - -
-
+ + + - -
-

Request Withdrawal

-
- - - - - -
+
+ +
+
+

Current balance

+

+ As of 05/03/2037 +

+

0000€

+
- -
-

Deposit

-
- - - -
+ +
+
+
2 deposit
+
3 days ago
+
4 000€
- - -
-

Close account

-
- - - - - -
+
+
+ 1 withdrawal +
+
24/01/2037
+
-378€
+
+ + +
+

In

+

0000€

+

Out

+

0000€

+

Interest

+

0000€

+ +
+ + +
+

Transfer money

+
+ + + + + +
+
- -

- You will be logged out in 05:00 -

-
- -
+ +
+

Create User

+
+ + + + + + + + + +
+
+ + -
-
- + + + + + + + - - - - + \ No newline at end of file diff --git a/src/css/style.css b/src/css/style.css index 3776e35..f1e33df 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -248,7 +248,8 @@ h2 { } /* Exceptions for interst */ -.form.form--loan, .form.form--deposit { +.form.form--loan, +.form.form--deposit { grid-template-columns: 2.5fr 1fr 2.5fr; } .form__label--loan { @@ -334,7 +335,7 @@ h2 { .form__signup { display: grid; padding: 0 12rem 5rem 12rem; - grid-template-columns: repeat(2, 2fr) ; + grid-template-columns: repeat(2, 2fr); grid-template-rows: repeat(5, 3rem); gap: 5px; max-width: calc(600px + 24rem); @@ -342,11 +343,13 @@ h2 { } .form__btn---submit--signup { - grid-column: 1 / span 2 ; + grid-column: 1 / span 2; } - -.show__user{ - height: 250px; +/* +By changing the height to 100%, the height of the div is not fixed. +*/ +.show__user { + height: 100%; background-color: #f3f3f3; padding: 5rem 12rem 5rem 12rem; display: flex; @@ -367,17 +370,16 @@ h2 { font-size: 2rem; } -.show__user table{ +.show__user table { font-size: 1.5rem; width: 50%; - } -.show__user table td:first-child{ +.show__user table td:first-child { font-weight: 700; /* text-align: end; */ } -.show__user table td:nth-child(2){ +.show__user table td:nth-child(2) { text-align: end; -} \ No newline at end of file +} diff --git a/src/js/user.js b/src/js/user.js index c5d61de..b5c030e 100644 --- a/src/js/user.js +++ b/src/js/user.js @@ -1,83 +1,105 @@ -//buttons -const submitButton = document.querySelector('.form__btn---submit--signup'); +/* + A wrapper class that will be used to interact with the browser's localstorage. + The class will try to retrieve data from the browser's storage. In the event there is nothing, + it will set the storage with a default object looking like this: + { + accounts:[] + } + The key for this object will be vector_bank. The wrapper wil also set the local storage when new users are created. -//inputs -const inputFullName = []; -const inputFirstName = document.querySelector('.form__input--firstName'); -const inputLastName = document.querySelector('.form__input--lastName'); -const inputDeposit = document.querySelector('.form__deposit'); -const inputPin = document.querySelector('.form__pin'); -//containers -const containerShowUser = document.querySelector('.show__user') -const showUserInfo = document.querySelector('.show__user---container') +*/ +class LocalStorageWrapper { + static storage = this.#getStorage(); + static users = this.storage.accounts; // Object of Users + static #getStorage() { + const clientStorage = localStorage.getItem("vectorBank"); + if (clientStorage == null) { + this.storage = { + accounts: [], + }; + return this.#setLocalstorage(); + } else { + return JSON.parse(clientStorage); + } + } + static #setLocalstorage() { + localStorage.setItem("vectorBank", JSON.stringify(this.storage)); + return this.storage; + } + static pushUser(userObj) { + this.storage.accounts.push(userObj); + this.#setLocalstorage(); + } +} -//array to store the users -const users = []; -const usersObject = {}; +/* +A wrapper class for creating new users/accounts. The class has a private property called "users". This property will contain the array of users that are stored in the client's localstorage. -//Main class - creating the user +Upon creating a new users, the class will assign it a new id through the `createOwner()` function. +Each instance of the user class will have an `addMove` function. This function is for future functionality to +add additional transaction history. +*/ class User { - interestRate = 1; //1% - - constructor(ownerName, mov, pin){ - this.createOwner(ownerName); - this.pin = pin; - this.movements = []; - this.movementsDates = []; - this.addMove(mov); - this.createUser(ownerName) - this.addDate() + interestRate = 1; //1% + id; + owner; + #users = LocalStorageWrapper.users; //users[] + constructor(ownerName, mov, pin) { + this.#createOwner(ownerName); + this.pin = pin; + this.movements = []; + this.addMove(mov); + this.#createUser(ownerName); + } + #createOwner(ownerName) { + this.owner = ownerName.join(" "); + } + #createUser(ownerN) { + const uId = ownerN + .map((char) => char[0]) + .join("") + .toLowerCase(); + if (this.#users.length === 0) { + this.id = uId; + } else { + const newUser = this.#users.find((userId) => + userId.id !== uId ? (this.id = uId) : (this.id = `${uId}vb`) + ); } - createOwner(ownerName) { - this.owner = ownerName.join(" "); - } - createUser (ownerN){ - const uId = ownerN.map(char => char[0]).join("").toLowerCase(); - if (users.length === 0) { - this.id = uId; - } else { - users.find(userId => userId.id !== uId ? this.id = uId : this.id = (`${uId}vb`)); - } - } - addMove(mov) { - this.movements.push(mov) - } - addDate() { - this.movementsDates.push(new Date()) - } -} -//adding user to the Users Object in the localStorage -const addUserObject = acc => { - usersObject[acc.id] = acc; - const key = acc.id; - const value = acc; - localStorage.setItem(key, JSON.stringify(value)) - // const teste = JSON.parse(localStorage.getItem(key)) -} -// localStorage.clear(); - -//creating the user -let currentUser; -const createUser = (userFullName, depositValue, userPin) => { - currentUser = new User(userFullName, depositValue, userPin) - users.push(currentUser); + } + addMove(mov) { + this.movements.push(mov); + } - addUserObject(currentUser); } -//users for test -const alphaUser = new User(['Alpha','Alpha'], 500, 8888); -const omegaUser = new User(['Omega','Omega'], 1000, 9999); -alphaUser.movements.push(100, -200, 500); -alphaUser.movementsDates.push(new Date('December 2, 2022'), new Date('November 18, 2022'), new Date('September 3, 2022'),); -console.log(alphaUser) -addUserObject(alphaUser); -addUserObject(omegaUser); +const submitButton = document.querySelector(".form__btn---submit--signup"); + +//inputs +const inputFullName = []; +const inputFirstName = document.querySelector(".form__input--firstName"); +const inputLastName = document.querySelector(".form__input--lastName"); +const inputDeposit = document.querySelector(".form__deposit"); +const inputPin = document.querySelector(".form__pin"); +//containers +const containerShowUser = document.querySelector(".show__user"); +const showUserInfo = document.querySelector(".show__user---container"); +/* +As soon as the window is done loading, this event listener will retrieve any users from the browser's localstorage, and then render them onto the page. +*/ +window.onload = () => { + if (LocalStorageWrapper.users) { + const { users } = LocalStorageWrapper; + users.forEach((user) => { + showUserInformation(user.owner, user.id, user.pin, user.movements[0]); + }); + } +}; const showUserInformation = (owner, id, pin, deposit) => { - const userInfo = ` + const userInfo = `

User Information

@@ -91,7 +113,7 @@ const showUserInformation = (owner, id, pin, deposit) => { - + @@ -99,24 +121,41 @@ const showUserInformation = (owner, id, pin, deposit) => {
User pin${String(pin).slice(-1).padStart(4, '*')}${String(pin).slice(-1).padStart(4, "*")}
Initial Deposit
- ` - containerShowUser.insertAdjacentHTML('afterbegin', userInfo) -} + `; + containerShowUser.insertAdjacentHTML("afterbegin", userInfo); +}; + //submit button -submitButton.addEventListener('click', function(e) { - e.preventDefault(); - //creating user - createUser([inputFirstName.value, inputLastName.value], Number(inputDeposit.value), Number(inputPin.value)); - //clear input - inputFirstName.blur() - inputLastName.blur() - inputDeposit.blur() - inputPin.blur() - inputFirstName.value = inputLastName.value = inputDeposit.value = inputPin.value = ""; - //showing information - showUserInformation(currentUser.owner, currentUser.id, currentUser.pin, currentUser.movements[0]) -}) +submitButton.addEventListener("click", function (e) { + e.preventDefault(); + + const newUser = new User( + [inputFirstName.value, inputLastName.value], + Number(inputDeposit.value), + Number(inputPin.value) + ); + + LocalStorageWrapper.pushUser(newUser); + + //clear input + inputFirstName.blur(); + inputLastName.blur(); + inputDeposit.blur(); + inputPin.blur(); + inputFirstName.value = + inputLastName.value = + inputDeposit.value = + inputPin.value = + ""; + //showing information + showUserInformation( + newUser.owner, + newUser.id, + newUser.pin, + newUser.movements[0] + ); +}); // --------- 0. Create a Sign Up page; // --------- 1. Get the user name from the inputs (name, lastName) of the Sign Up page; @@ -131,4 +170,4 @@ submitButton.addEventListener('click', function(e) { // --------- 6. Create a function to implement Dates on the movements // ------------ 6.1 Show the current day for movements on the current day // ------------ 6.2 For movements a day earlier, show 'yesterday' (string) -// ------------ 6.2 For days past longer than 1 day, show 'n days ago' +// ------------ 6.2 For days past longer than 1 day, show 'n days ago' \ No newline at end of file