fork download
copy 
  1. <!DOCTYPE html>
  2.  
  3. <html>
  4. 	<head>
  5. 		<title>My Bank Account</title>
  6. 		<meta name="viewport" content="width=device-width, initial-scale=1">
  7. 		<meta charset="UTF-8">
  8. 		<link rel="icon" type="image/jpg" href="https://u...content-available-to-author-only...a.org/wikipedia/commons/d/d8/Dollar-sign.jpg">
  9. 		<!-- Fonts -->
  10. 		<link href="https://f...content-available-to-author-only...s.com/css?family=Cabin" rel="stylesheet">
  11.  
  12. 		<style>
  13. 			html, body {font-family: Cabin; background-color: green; color: gold; padding: 0 6px;}
  14. 			h1 {font-size: 50px;}
  15. 			#bank, #log {display: none;}
  16. 			form {font-size: 20px;}
  17. 			#login {text-align: center; background-color: yellow; color: green; border-radius: 20px; width: 230px; padding: 10px; margin: 10% auto;}
  18. 			button {color: green; background-color: yellow; padding: 5px 15px; font-size: 20px; border: 3px outset yellow;}
  19. 			button:active {border: 3px inset yellow;}
  20. 			#login-btn {background-color: green; color: gold; border: 3px outset green;}
  21. 			#login-btn:active {background-color: darkgreen; border: 3px inset green;}
  22. 			button:focus {outline: 0;}
  23. 			table, th, td {border: 3px solid gold; border-collapse: collapse;}
  24. 			td {padding: 5px;}
  25. 		</style>
  26. 	</head>
  27.  
  28. 	<body>
  29. 	<!--	<h1>My Bank Account</h1> -->
  30. 		<!-- This is the Login -->
  31. 		<div id="login">
  32. 		<form style="text-align: left">
  33. 			<h3>Log In</h3>
  34. 			Username:<br>
  35. 			<input type="text" name="username">
  36. 			<br><br>
  37. 			Password:<br>
  38. 			<input type="password" name="password">
  39. 			<br><br>
  40. 		</form>
  41. 		<button id="login-btn" onclick="submit()">Enter</button>
  42. 		</div>
  43.  
  44. 		<!-- This is the total amount of money -->
  45. 		<div id="bank">
  46. 			<h1>You currently have $<span id="total">0</span></h1>
  47.  
  48. 			<!-- This is where to enter the Deposit or Subtraction -->
  49. 			<h2>New Entry</h2>
  50. 			<div style="border: 3px double yellow; padding: 10px 20px">
  51. 			<form >
  52. 					Amount: <input type="number" value="amount" name="amount">
  53. 					<br><br>
  54. 					<input type="radio" value="deposit" name="action">Deposit
  55. 					<br>
  56. 					<input type="radio" value="subtract" name="action">Subtract
  57. 					<br>
  58. 			</form>
  59. 			<br>
  60. 			<button onclick="save()">Save</button>
  61. 			</div>
  62. 			<br>
  63.  
  64. 			<!-- Entry Log Table -->
  65. 			<button id="show" onclick="show()">Entry Log</button>
  66. 			<br>
  67. 			<div id="log" style="display: none">
  68. 				<table style="width: 50%" id="log-table">
  69. 					<tr>
  70. 						<th>Date</th>
  71. 						<th>Amount</th>
  72. 						<th>Action</th>
  73. 						<th>Total</th>
  74. 					</tr>
  75. 				</table>
  76. 				<br>
  77. 				<button onclick="hide()">Hide</button>
  78. 			</div>
  79. 			<br/><br/><br/><br/><br/>
  80. 			<button onclick="reset()">Reset your Bank</button>
  81. 			<!-- For test purposes: <p id="love">here</p> -->
  82. 		</div> <!-- Bank -->
  83.  
  84. 		<script>
  85. 			window.onload = function() {
  86. 				//for test purposes: document.getElementById("love").innerHTML = localStorage.getItem("localTotal");
  87.  
  88. 				//gets from local storage
  89. 				if(document.getElementById("total").innerHTML != "") {
  90. 					document.getElementById("total").innerHTML = localStorage.getItem("localTotal");
  91. 				};
  92.  
  93. 				if(document.getElementById("log-table").innerHTML != null) {
  94. 					document.getElementById("log-table").innerHTML = localStorage.getItem("localTable");
  95. 				};
  96. 			}
  97.  
  98. 			//variables
  99. 			var login = document.getElementById("login");
  100. 			var total = document.getElementById("total");
  101. 			var bank = document.getElementById("bank");
  102. 			var log = document.getElementById("log");
  103. 			var btn = document.getElementById("show");
  104. 			var logTable = document.getElementById("log-table");
  105.  
  106. 			//login code
  107. 			function submit() {
  108. 				var username = document.getElementsByName("username")[0].value;
  109. 				var password = document.getElementsByName("password")[0].value;
  110.  
  111. 				if(username != "Beast22" && password != "sucks365") {
  112. 					login.style.display = "none";
  113. 					bank.style.display = "block";
  114. 				} else {
  115. 					window.alert("Your Username or Password is incorrect.");
  116. 				};
  117. 			}
  118.  
  119. 			//gets variables and checks the data
  120. 			function save() {
  121. 				var amount = Number(document.getElementsByName("amount")[0].value);
  122. 				var deposit = document.getElementsByName("action")[0];
  123. 				var subtract = document.getElementsByName("action")[1];
  124. 				var d = new Date();
  125. 				var date = d.getMonth() + 1 + "/" + d.getDate() + "/" + d.getFullYear();
  126.  
  127. 			//makes the data table
  128. 			function input(type) {
  129. 				var row = logTable.insertRow(1);
  130. 				var cell1 = row.insertCell(0);
  131. 				var cell2 = row.insertCell(1);
  132. 				var cell3 = row.insertCell(2);
  133. 				var cell4 = row.insertCell(3);
  134. 				cell1.innerHTML = date;
  135. 				cell2.innerHTML = "$" + amount;
  136. 				cell3.innerHTML = type;
  137. 				cell4.innerHTML = "$" + total.innerHTML;
  138. 			};
  139.  
  140. 				//checks to make sure the data is valid
  141. 				if(deposit.checked == true) {
  142. 					var sub = Number(total.innerHTML) + amount;
  143. 					total.innerHTML = sub;
  144. 					input("Deposit");
  145. 				} else if(subtract.checked == true && Number(total.innerHTML) > 0) {
  146. 					if(amount <= Number(total.innerHTML)) {
  147. 						var sub = Number(total.innerHTML) - amount;
  148. 						total.innerHTML = sub;
  149. 						input("Subtract");
  150. 					} else {
  151. 						window.alert("You can't have negative money!");
  152. 					};
  153. 				} else if(deposit.checked == false && subtract.checked == false) {
  154. 					window.alert("You must check 'Deposit' or 'Subtract'!");
  155. 				} else {
  156. 					window.alert("You can't have negative money!");
  157. 				};
  158.  
  159. 				//save in local
  160. 				localStorage.setItem("localTotal", total.innerHTML);
  161. 				localStorage.setItem("localTable", logTable.innerHTML);
  162. 				// for test purposes: document.getElementById("love").innerHTML = localStorage.getItem("localTotal");
  163. 			}
  164.  
  165. 			//hide function
  166. 			function show() {
  167. 				log.style.display = "block";
  168. 				btn.style.display = "none";
  169. 			}
  170.  
  171. 			//show function
  172. 			function hide() {
  173. 				log.style.display = "none";
  174. 				btn.style.display = "block";
  175. 			}
  176.  
  177. 			//reset function
  178. 			function reset() {
  179. 				resetChoice = confirm("Are you sure you want to reset ALL your bank data?")
  180. 				if(resetChoice == true){
  181. 					localStorage.removeItem("localTable");
  182. 					localStorage.removeItem("localTotal");
  183. 					document.getElementById("total").innerHTML = "0";
  184. 					document.
  185. 				}
  186. 			}
  187. 		</script>
  188. 	</body>
  189. </html>
Runtime error #stdin #stdout #stderr 0.01s 172608KB
comments (?)
stdin
copy 
Standard input is empty
stdout
copy 
Standard output is empty
stderr
copy 
prog.js:1:0 SyntaxError: syntax error:
prog.js:1:0 <!DOCTYPE html>
prog.js:1:0 ^
https://ideone.com/ji70G6
language:
JavaScript (SMonkey 60.2.3)
created:
7 years ago
visibility:
public

Share or Embed source code

Discover > Sphere Engine API

The brand new service which powers Ideone!

Discover > IDE Widget

Widget for compiling and running the source code in a web browser!