From 15cfb143b3c69b1b4f7b8d4464bb39af1fff7255 Mon Sep 17 00:00:00 2001 From: mdwiltfong Date: Sat, 3 Dec 2022 15:28:13 -0500 Subject: [PATCH 1/4] App can render new user info and save in localstorage --- src/js/user.js | 200 ++++++++++++++++++++++++++++++------------------- 1 file changed, 122 insertions(+), 78 deletions(-) diff --git a/src/js/user.js b/src/js/user.js index 9673787..ff97789 100644 --- a/src/js/user.js +++ b/src/js/user.js @@ -1,75 +1,103 @@ -//buttons -const submitButton = document.querySelector('.form__btn---submit--signup'); +class LocalStorageWrapper { + static storage = this.#getStorage(); + static users = this.storage.accounts; // Object of Users + constructor() {} + static #getStorage() { + const clientStorage = localStorage.getItem("vectorBank"); + if (clientStorage == null) { + this.storage = { + accounts: [], + }; + return this.#setLocalstorage(); + } else { + return JSON.stringify(clientStorage); + } + } + static #setLocalstorage() { + localStorage.setItem("vectorBank", JSON.stringify(this.storage)); + return this.storage; + } + static pushUser(userObj) { + this.storage.accounts.push(userObj); + this.#setLocalstorage(); + } +} +class User { + 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`) + ); + } + } + addMove(mov) { + this.movements.push(mov); + } +} +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'); +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') +const containerShowUser = document.querySelector(".show__user"); +const showUserInfo = document.querySelector(".show__user---container"); //array to store the users const users = []; const usersObject = {}; //Main class - creating the user -class User { - interestRate = 1; //1% - - 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 (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) - } -} + //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)) -} +/* 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; +/* let currentUser; const createUser = (userFullName, depositValue, userPin) => { - currentUser = new User(userFullName, depositValue, userPin) - users.push(currentUser); - - addUserObject(currentUser); -} + currentUser = new User(userFullName, depositValue, userPin); + users.push(currentUser); -//users for test -const alphaUser = new User(['Alpha','Alpha'], 500, 8888); -const omegaUser = new User(['Omega','Omega'], 1000, 9999); + addUserObject(currentUser); +}; */ +/* //users for test addUserObject(alphaUser); -addUserObject(omegaUser); +addUserObject(omegaUser); */ const showUserInformation = (owner, id, pin, deposit) => { - const userInfo = ` + const userInfo = `

User Information

@@ -83,7 +111,7 @@ const showUserInformation = (owner, id, pin, deposit) => { - + @@ -91,35 +119,53 @@ 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); + //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( + newUser.owner, + newUser.id, + newUser.pin, + newUser.movements[0] + ); +}); // users.push(new User(['Helton', 'Oliveira'], 100, 1111)); - //------ Add movement function - // let currentAccount; - // const addMov = transaction => { - // currentAccount.addMove(transaction) - // } +// let currentAccount; +// const addMov = transaction => { +// currentAccount.addMove(transaction) +// } // console.log(users) - // --------- 0. Create a Sign Up page; // --------- 1. Get the user name from the inputs (name, lastName) of the Sign Up page; // ------------ 1.1 Store the 'name' and 'lastName' in a array; @@ -135,10 +181,8 @@ submitButton.addEventListener('click', function(e) { // ------------ 6.2 For movements a day earlier, show 'yesterday' (string) // ------------ 6.2 For days past longer than 1 day, show 'n days ago' - - // creating the logic to store the users in the localStorage // console.log(usersObject) -// console.log(usersObject = {(currentAccount.id), }) \ No newline at end of file +// console.log(usersObject = {(currentAccount.id), }) From ff3e7cebc3854051d4d82a0da574ea3198c286c7 Mon Sep 17 00:00:00 2001 From: mdwiltfong Date: Sat, 3 Dec 2022 16:53:24 -0500 Subject: [PATCH 2/4] localstorage loads on render --- src/js/user.js | 38 ++++++++++++-------------------------- 1 file changed, 12 insertions(+), 26 deletions(-) diff --git a/src/js/user.js b/src/js/user.js index ff97789..23f3104 100644 --- a/src/js/user.js +++ b/src/js/user.js @@ -10,7 +10,7 @@ class LocalStorageWrapper { }; return this.#setLocalstorage(); } else { - return JSON.stringify(clientStorage); + return JSON.parse(clientStorage); } } static #setLocalstorage() { @@ -71,31 +71,14 @@ const showUserInfo = document.querySelector(".show__user---container"); //array to store the users const users = []; const usersObject = {}; - -//Main class - creating the user - -//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); - - addUserObject(currentUser); -}; */ -/* //users for test -addUserObject(alphaUser); -addUserObject(omegaUser); */ - +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 = `
@@ -122,6 +105,9 @@ const showUserInformation = (owner, id, pin, deposit) => { `; containerShowUser.insertAdjacentHTML("afterbegin", userInfo); }; + +//onload Render Users in LocalStorage + //submit button submitButton.addEventListener("click", function (e) { e.preventDefault(); From cee50bc8d61d7d4bacb5951146a65f5dd4a96be5 Mon Sep 17 00:00:00 2001 From: mdwiltfong Date: Sat, 3 Dec 2022 17:03:07 -0500 Subject: [PATCH 3/4] Made div responsive for saved users --- index.html | 301 ++++++++++++++++++++++------------------------ src/css/style.css | 20 +-- 2 files changed, 152 insertions(+), 169 deletions(-) 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 -

-
- -
+ + -
- 2022 © by Helton Oliveira. -
+
+ +
+ 2022 © by Helton Oliveira. +
+ + + + - - - - + \ No newline at end of file diff --git a/src/css/style.css b/src/css/style.css index 3776e35..1487ae0 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,11 @@ h2 { } .form__btn---submit--signup { - grid-column: 1 / span 2 ; + grid-column: 1 / span 2; } -.show__user{ - height: 250px; +.show__user { + height: 100%; background-color: #f3f3f3; padding: 5rem 12rem 5rem 12rem; display: flex; @@ -367,17 +368,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 +} From 6b9f0553bfdbab225b64b68dd547ca1d67c5b7bc Mon Sep 17 00:00:00 2001 From: mdwiltfong Date: Sat, 3 Dec 2022 19:50:20 -0500 Subject: [PATCH 4/4] comments --- src/css/style.css | 4 +++- src/js/user.js | 44 ++++++++++++++++++++++++++++---------------- 2 files changed, 31 insertions(+), 17 deletions(-) diff --git a/src/css/style.css b/src/css/style.css index 1487ae0..f1e33df 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -345,7 +345,9 @@ h2 { .form__btn---submit--signup { grid-column: 1 / span 2; } - +/* +By changing the height to 100%, the height of the div is not fixed. +*/ .show__user { height: 100%; background-color: #f3f3f3; diff --git a/src/js/user.js b/src/js/user.js index 23f3104..6d835b1 100644 --- a/src/js/user.js +++ b/src/js/user.js @@ -1,7 +1,18 @@ +/* + 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. + + +*/ class LocalStorageWrapper { static storage = this.#getStorage(); static users = this.storage.accounts; // Object of Users - constructor() {} static #getStorage() { const clientStorage = localStorage.getItem("vectorBank"); if (clientStorage == null) { @@ -22,22 +33,30 @@ class LocalStorageWrapper { this.#setLocalstorage(); } } + +/* +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. + +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% id; owner; #users = LocalStorageWrapper.users; //users[] constructor(ownerName, mov, pin) { - this.createOwner(ownerName); + this.#createOwner(ownerName); this.pin = pin; this.movements = []; this.addMove(mov); - this.createUser(ownerName); + this.#createUser(ownerName); } - createOwner(ownerName) { + #createOwner(ownerName) { this.owner = ownerName.join(" "); } - createUser(ownerN) { + #createUser(ownerN) { const uId = ownerN .map((char) => char[0]) .join("") @@ -67,10 +86,10 @@ 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. -//array to store the users -const users = []; -const usersObject = {}; +*/ window.onload = () => { if (LocalStorageWrapper.users) { const { users } = LocalStorageWrapper; @@ -106,8 +125,6 @@ const showUserInformation = (owner, id, pin, deposit) => { containerShowUser.insertAdjacentHTML("afterbegin", userInfo); }; -//onload Render Users in LocalStorage - //submit button submitButton.addEventListener("click", function (e) { e.preventDefault(); @@ -119,12 +136,7 @@ submitButton.addEventListener("click", function (e) { ); LocalStorageWrapper.pushUser(newUser); - //creating user - /* createUser( - [inputFirstName.value, inputLastName.value], - Number(inputDeposit.value), - Number(inputPin.value) - ); */ + //clear input inputFirstName.blur(); inputLastName.blur();