Skip to content

PR for storing and retrieving values from localstorage. #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mdwiltfong wants to merge 6 commits into
base: main
Choose a base branch
from
Open

PR for storing and retrieving values from localstorage. #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
15cfb14
App can render new user info and save in localstorage
mdwiltfong Dec 3, 2022
ff3e7ce
localstorage loads on render
mdwiltfong Dec 3, 2022
cee50bc
Made div responsive for saved users
mdwiltfong Dec 3, 2022
6b9f055
comments
mdwiltfong Dec 4, 2022
8a8e2c9
Merge branch 'main' into main
mdwiltfong Dec 4, 2022
3c35fcb
Merge branch 'main' into main
mdwiltfong Dec 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
301 changes: 142 additions & 159 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,166 +1,148 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="shortcut icon" type="image/png" href="./src/img/icon.png" />

<link
href="https://fonts.googleapis.com/css?family=Poppins:400,500,600&display=swap"
rel="stylesheet"
/>

<link rel="stylesheet" href="./src/css/style.css" />
<title>Vactor Bank</title>
</head>
<body>
<!-- TOP NAVIGATION -->
<nav>
<p class="welcome">Log in to get started</p>
<img src="./src/img/logo.png" alt="Logo" class="logo" />
<form class="login">
<input
type="text"
placeholder="user"
class="login__input login__input--user"
/>
<!-- In practice, use type="password" -->
<input
type="text"
placeholder="PIN"
maxlength="4"
class="login__input login__input--pin"
/>
<button class="login__btn">&rarr;</button>
</form>
</nav>

<main class="app">
<!-- BALANCE -->
<div class="balance">
<div>
<p class="balance__label">Current balance</p>
<p class="balance__date">
As of <span class="date">05/03/2037</span>
</p>
</div>
<p class="balance__value">0000€</p>
</div>

<!-- MOVEMENTS -->
<div class="movements">
<div class="movements__row">
<div class="movements__type movements__type--deposit">2 deposit</div>
<div class="movements__date">3 days ago</div>
<div class="movements__value">4 000€</div>
</div>
<div class="movements__row">
<div class="movements__type movements__type--withdrawal">
1 withdrawal
</div>
<div class="movements__date">24/01/2037</div>
<div class="movements__value">-378€</div>
</div>
</div>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="shortcut icon" type="image/png" href="./src/img/icon.png" />

<!-- SUMMARY -->
<div class="summary">
<p class="summary__label">In</p>
<p class="summary__value summary__value--in">0000€</p>
<p class="summary__label">Out</p>
<p class="summary__value summary__value--out">0000€</p>
<p class="summary__label">Interest</p>
<p class="summary__value summary__value--interest">0000€</p>
<button class="btn--sort">&downarrow; SORT</button>
</div>
<link href="https://fonts.googleapis.com/css?family=Poppins:400,500,600&display=swap" rel="stylesheet" />

<!-- OPERATION: TRANSFERS -->
<div class="operation operation--transfer">
<h2>Transfer money</h2>
<form class="form form--transfer">
<input type="text" class="form__input form__input--to" />
<input type="number" class="form__input form__input--amount" />
<button class="form__btn form__btn--transfer">&rarr;</button>
<label class="form__label label__deposit">Transfer to</label>
<label class="form__label">Amount</label>
</form>
</div>
<link rel="stylesheet" href="./src/css/style.css" />
<title>Vactor Bank</title>
</head>

<!-- OPERATION: LOAN -->
<div class="operation operation--loan">
<h2>Request loan</h2>
<form class="form form--loan">
<input type="number" class="form__input form__input--loan--amount" />
<button class="form__btn form__btn--loan">&rarr;</button>
<label class="form__label form__label--loan">Amount</label>
</form>
</div>
<body>
<!-- TOP NAVIGATION -->
<nav>
<p class="welcome">Log in to get started</p>
<img src="./src/img/logo.png" alt="Logo" class="logo" />
<form class="login">
<input type="text" placeholder="user" class="login__input login__input--user" />
<!-- In practice, use type="password" -->
<input type="text" placeholder="PIN" maxlength="4" class="login__input login__input--pin" />
<button class="login__btn">&rarr;</button>
</form>
</nav>

<!-- OPERATION: WITHDRAWAL -->
<div class="operation operation--withdrawal">
<h2>Request Withdrawal</h2>
<form class="form form--withdrawal">
<input type="number" class="form__input form__input--withdrawal--amount" />
<input
type="password"
maxlength="4"
class="form__input form__input--withdrawal--pin"
/>
<button class="form__btn form__btn--withdrawal">&rarr;</button>
<label class="form__label">Amount</label>
<label class="form__label">Confirm PIN</label>
</form>
<main class="app">
<!-- BALANCE -->
<div class="balance">
<div>
<p class="balance__label">Current balance</p>
<p class="balance__date">
As of <span class="date">05/03/2037</span>
</p>
</div>
<p class="balance__value">0000€</p>
</div>

<!-- DEPOSIT -->
<div class="operation operation--deposit">
<h2>Deposit</h2>
<form class="form form--deposit">
<input type="number" class="form__input form__input--deposit--amount" />
<button class="form__btn form__btn--deposit">&rarr;</button>
<label class="form__label form__label--deposit">Amount</label>
</form>
<!-- MOVEMENTS -->
<div class="movements">
<div class="movements__row">
<div class="movements__type movements__type--deposit">2 deposit</div>
<div class="movements__date">3 days ago</div>
<div class="movements__value">4 000€</div>
</div>

<!-- OPERATION: CLOSE -->
<div class="operation operation--close">
<h2>Close account</h2>
<form class="form form--close">
<input type="text" class="form__input form__input--user" />
<input
type="password"
maxlength="4"
class="form__input form__input--pin"
/>
<button class="form__btn form__btn--close">&rarr;</button>
<label class="form__label">Confirm user</label>
<label class="form__label">Confirm PIN</label>
</form>
<div class="movements__row">
<div class="movements__type movements__type--withdrawal">
1 withdrawal
</div>
<div class="movements__date">24/01/2037</div>
<div class="movements__value">-378€</div>
</div>
</div>

<!-- SUMMARY -->
<div class="summary">
<p class="summary__label">In</p>
<p class="summary__value summary__value--in">0000€</p>
<p class="summary__label">Out</p>
<p class="summary__value summary__value--out">0000€</p>
<p class="summary__label">Interest</p>
<p class="summary__value summary__value--interest">0000€</p>
<button class="btn--sort">&downarrow; SORT</button>
</div>

<!-- OPERATION: TRANSFERS -->
<div class="operation operation--transfer">
<h2>Transfer money</h2>
<form class="form form--transfer">
<input type="text" class="form__input form__input--to" />
<input type="number" class="form__input form__input--amount" />
<button class="form__btn form__btn--transfer">&rarr;</button>
<label class="form__label label__deposit">Transfer to</label>
<label class="form__label">Amount</label>
</form>
</div>

<!-- LOGOUT TIMER -->
<p class="logout-timer">
You will be logged out in <span class="timer">05:00</span>
</p>
</main>

<div class="signup signup__z-index">
<h2>Create User</h2>
<form class="form__signup">
<input type="text" class="form__input--firstName">
<input type="text" class="form__input--lastName">
<label class="form__label">First Name</label>
<label class="form__label">Last Name</label>
<input type="password" maxlength="4" class="form__pin">
<input type="number" class="form__deposit">
<label class="form__label">PIN</label>
<label class="form__label">Initial Deposit</label>
<button class="form__btn---submit--signup">&rarr;</button>
<!-- OPERATION: LOAN -->
<div class="operation operation--loan">
<h2>Request loan</h2>
<form class="form form--loan">
<input type="number" class="form__input form__input--loan--amount" />
<button class="form__btn form__btn--loan">&rarr;</button>
<label class="form__label form__label--loan">Amount</label>
</form>
<div class="show__user">
<!-- insert adjacent html -->
<!-- <div class="show__user--container">
</div>

<!-- OPERATION: WITHDRAWAL -->
<div class="operation operation--withdrawal">
<h2>Request Withdrawal</h2>
<form class="form form--withdrawal">
<input type="number" class="form__input form__input--withdrawal--amount" />
<input type="password" maxlength="4" class="form__input form__input--withdrawal--pin" />
<button class="form__btn form__btn--withdrawal">&rarr;</button>
<label class="form__label">Amount</label>
<label class="form__label">Confirm PIN</label>
</form>
</div>

<!-- DEPOSIT -->
<div class="operation operation--deposit">
<h2>Deposit</h2>
<form class="form form--deposit">
<input type="number" class="form__input form__input--deposit--amount" />
<button class="form__btn form__btn--deposit">&rarr;</button>
<label class="form__label form__label--deposit">Amount</label>
</form>
</div>

<!-- OPERATION: CLOSE -->
<div class="operation operation--close">
<h2>Close account</h2>
<form class="form form--close">
<input type="text" class="form__input form__input--user" />
<input type="password" maxlength="4" class="form__input form__input--pin" />
<button class="form__btn form__btn--close">&rarr;</button>
<label class="form__label">Confirm user</label>
<label class="form__label">Confirm PIN</label>
</form>
</div>

<!-- LOGOUT TIMER -->
<p class="logout-timer">
You will be logged out in <span class="timer">05:00</span>
</p>
</main>

<div class="signup signup__z-index">
<h2>Create User</h2>
<form class="form__signup">
<input type="text" class="form__input--firstName">
<input type="text" class="form__input--lastName">
<label class="form__label">First Name</label>
<label class="form__label">Last Name</label>
<input type="password" maxlength="4" class="form__pin">
<input type="number" class="form__deposit">
<label class="form__label">PIN</label>
<label class="form__label">Initial Deposit</label>
<button class="form__btn---submit--signup">&rarr;</button>
</form>
<div class="show__user">
<!-- insert adjacent html -->
<!-- <div class="show__user--container">
<h3>User Information</h3>
<table>
<tr>
Expand All @@ -181,15 +163,16 @@ <h3>User Information</h3>
</tr>
</table>
</div> -->
</div>

</div>

<footer>
2022 &copy; by Helton Oliveira.
</footer>
</div>

<footer>
2022 &copy; by Helton Oliveira.
</footer>

<script src="./src/js/script.js"></script>
<script src="./src/js/user.js"></script>
</body>

<script src="./src/js/script.js"></script>
<script src="./src/js/user.js"></script>
</body>
</html>
</html>
24 changes: 13 additions & 11 deletions src/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -334,19 +335,21 @@ 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);
margin: 0 auto;
}

.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;
Expand All @@ -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;
}
}
Loading