<!DOCTYPE html>
<html>
<head>
<title>My Bank Account</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<link rel="icon" type="image/jpg" href="https://u...content-available-to-author-only...a.org/wikipedia/commons/d/d8/Dollar-sign.jpg">
<!-- Fonts -->
<link href="https://f...content-available-to-author-only...s.com/css?family=Cabin" rel="stylesheet">
<style>
html, body {font-family: Cabin; background-color: green; color: gold; padding: 0 6px;}
h1 {font-size: 50px;}
#bank, #log {display: none;}
form {font-size: 20px;}
#login {text-align: center; background-color: yellow; color: green; border-radius: 20px; width: 230px; padding: 10px; margin: 10% auto;}
button {color: green; background-color: yellow; padding: 5px 15px; font-size: 20px; border: 3px outset yellow;}
button:active {border: 3px inset yellow;}
#login-btn {background-color: green; color: gold; border: 3px outset green;}
#login-btn:active {background-color: darkgreen; border: 3px inset green;}
button:focus {outline: 0;}
table, th, td {border: 3px solid gold; border-collapse: collapse;}
td {padding: 5px;}
</style>
</head>
<body>
<!-- <h1>My Bank Account</h1> -->
<!-- This is the Login -->
<div id="login">
<form style="text-align: left">
<h3>Log In</h3>
Username:<br>
<input type="text" name="username">
<br><br>
Password:<br>
<input type="password" name="password">
<br><br>
</form>
<button id="login-btn" onclick="submit()">Enter</button>
</div>
<!-- This is the total amount of money -->
<div id="bank">
<h1>You currently have $<span id="total">0</span></h1>
<!-- This is where to enter the Deposit or Subtraction -->
<h2>New Entry</h2>
<div style="border: 3px double yellow; padding: 10px 20px">
<form >
Amount: <input type="number" value="amount" name="amount">
<br><br>
<input type="radio" value="deposit" name="action">Deposit
<br>
<input type="radio" value="subtract" name="action">Subtract
<br>
</form>
<br>
<button onclick="save()">Save</button>
</div>
<br>
<!-- Entry Log Table -->
<button id="show" onclick="show()">Entry Log</button>
<br>
<div id="log" style="display: none">
<table style="width: 50%" id="log-table">
<tr>
<th>Date</th>
<th>Amount</th>
<th>Action</th>
<th>Total</th>
</tr>
</table>
<br>
<button onclick="hide()">Hide</button>
</div>
<br/><br/><br/><br/><br/>
<button onclick="reset()">Reset your Bank</button>
<!-- For test purposes: <p id="love">here</p> -->
</div> <!-- Bank -->
<script>
window.onload = function() {
//for test purposes: document.getElementById("love").innerHTML = localStorage.getItem("localTotal");
//gets from local storage
if(document.getElementById("total").innerHTML != "") {
document.getElementById("total").innerHTML = localStorage.getItem("localTotal");
};
if(document.getElementById("log-table").innerHTML != null) {
document.getElementById("log-table").innerHTML = localStorage.getItem("localTable");
};
}
//variables
var login = document.getElementById("login");
var total = document.getElementById("total");
var bank = document.getElementById("bank");
var log = document.getElementById("log");
var btn = document.getElementById("show");
var logTable = document.getElementById("log-table");
//login code
function submit() {
var username = document.getElementsByName("username")[0].value;
var password = document.getElementsByName("password")[0].value;
if(username != "Beast22" && password != "sucks365") {
login.style.display = "none";
bank.style.display = "block";
} else {
window.alert("Your Username or Password is incorrect.");
};
}
//gets variables and checks the data
function save() {
var amount = Number(document.getElementsByName("amount")[0].value);
var deposit = document.getElementsByName("action")[0];
var subtract = document.getElementsByName("action")[1];
var d = new Date();
var date = d.getMonth() + 1 + "/" + d.getDate() + "/" + d.getFullYear();
//makes the data table
function input(type) {
var row = logTable.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
cell1.innerHTML = date;
cell2.innerHTML = "$" + amount;
cell3.innerHTML = type;
cell4.innerHTML = "$" + total.innerHTML;
};
//checks to make sure the data is valid
if(deposit.checked == true) {
var sub = Number(total.innerHTML) + amount;
total.innerHTML = sub;
input("Deposit");
} else if(subtract.checked == true && Number(total.innerHTML) > 0) {
if(amount <= Number(total.innerHTML)) {
var sub = Number(total.innerHTML) - amount;
total.innerHTML = sub;
input("Subtract");
} else {
window.alert("You can't have negative money!");
};
} else if(deposit.checked == false && subtract.checked == false) {
window.alert("You must check 'Deposit' or 'Subtract'!");
} else {
window.alert("You can't have negative money!");
};
//save in local
localStorage.setItem("localTotal", total.innerHTML);
localStorage.setItem("localTable", logTable.innerHTML);
// for test purposes: document.getElementById("love").innerHTML = localStorage.getItem("localTotal");
}
//hide function
function show() {
log.style.display = "block";
btn.style.display = "none";
}
//show function
function hide() {
log.style.display = "none";
btn.style.display = "block";
}
//reset function
function reset() {
resetChoice = confirm("Are you sure you want to reset ALL your bank data?")
if(resetChoice == true){
localStorage.removeItem("localTable");
localStorage.removeItem("localTotal");
document.getElementById("total").innerHTML = "0";
document.
}
}
</script>
</body>
</html>