Start with Python

2015-07-22 16:44:07 -04:00
parent 94031a251f
commit 57cb3981a0
100 changed files with 2085 additions and 0 deletions
--- a/javascript/11-bank-accounts-dom/README.md
+++ b/javascript/11-bank-accounts-dom/README.md
@ -0,0 +1,18 @@
+Bank Accounts 2
+===============
+
+In this assignment, you will be taking your code from Bank Accounts 1 and applying it to the DOM.  
+This is not an easy assignment. Work together and ask for help.  
+* Take a look through the code and see what you've been given so far. There is a modal ready to use in the html. You will be using it later in the assignment.  
+* You have a form on the left to create a bank account. Make a bank account object using the inputs from the form.
+* Append the bank account name to the 'Bank Accounts' list.
+* When you click on the name of a bank account, it should show the modal, and hide the container.
+* In the modal, show the user's account name and balance in their respective divs (given to you in the html)
+* Use the deposit and withdrawal forms to do their respective functions to the bank account.
+* Upon deposit, withdrawal, or 'I'm done', hide the modal, and show the container again.
+* _stretch_: When the modal pops up, rather than hiding the container, make it fall to the background and be less visible (opacity, visibility, color... your choice). Add error checking. Clear the forms after submit. See if there is any other functionality you think this page should have. Show off.  
+
+Here is some code to create account numbers:  
+```
+this.accountNumber = (Math.floor(Math.random() * (9999999999 - 1000000000)) + 1000000000).toString()
+```
--- a/javascript/11-bank-accounts-dom/application.js
+++ b/javascript/11-bank-accounts-dom/application.js
@ -0,0 +1,9 @@
+(function($, window, document) {
+  $(function(){
+    var Bank = {}
+    $('#account-modal').hide()
+    // your code here
+  });
+}(window.jQuery, window, document));
+
+// your code from bank accounts 1 here
--- a/javascript/11-bank-accounts-dom/index.html
+++ b/javascript/11-bank-accounts-dom/index.html
@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<link rel="stylesheet" type="text/css" href="main.css">
+	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+	<script type="text/javascript" src="application.js"></script>
+</head>
+<body>
+	<div id="container">
+		<form id="create-account" action="#" method="post">
+			<h2>Make An Account</h2>
+			<input type="text" name="accountName" placeholder="Enter your account name (camelCase plz (: )"><br><br>
+			<input type="text" name="accountBalance" placeholder="Enter your starting balance"><br><br>
+			<input type="submit" class="button" value="Submit">
+		</form>
+		<div id="bank">
+			<h2>Bank Accounts</h2>
+			<ul id="account-list"></ul>
+		</div>
+	</div>
+
+	<div id="account-modal">
+		<div id="account-name"></div>
+		<div id="account-balance"></div>
+
+		<form id="deposit">
+			<input type="text" name="deposit-amount" placeholder="Deposit amount">
+			<input type="submit" class="button" value="Deposit into account">
+		</form>
+		<br>
+		<form id="withdrawal">
+			<input type="text" name="withdrawal-amount" placeholder="Withdrawal amount">
+			<input type="submit" class="button" value="Withdraw from account">
+		</form>
+		<br>
+		<button id="cancel-modal">I'm done</button>
+	</div>
+</body>
+</html>
--- a/javascript/11-bank-accounts-dom/main.css
+++ b/javascript/11-bank-accounts-dom/main.css
@ -0,0 +1,71 @@
+body {
+  margin: 0 auto;
+  font-size: 20px;
+}
+
+#container {
+  margin: 5% 10%;
+}
+
+li {
+  list-style: none;
+  margin-bottom: 1em;
+}
+
+input[type=text] {
+  width: 300px;
+  height: 24px;
+}
+
+#create-account {
+  float: left;
+  width: 45%;
+}
+
+#bank {
+  float: left;
+  width: 40%;
+  text-align: center;
+}
+
+#account {
+  float: left;
+  width: 30%;
+}
+
+#account-name {
+  float: left;
+  width: 20%;
+  padding: 2em 0 0 4em;
+}
+
+#account-balance {
+  float: left;
+  width: 20%;
+  padding: 2em 0 0 4em;
+}
+
+#account-modal {
+  position: absolute;
+  width: 50%;
+  top: 15%;
+  left: 25%;
+  border: 1px #222 solid;
+}
+
+#deposit {
+  clear: both;
+  padding: 4em 0 0 4em;
+}
+
+#withdrawal {
+  padding: 4em 0 0 4em;
+  padding-top: 10%;
+}
+
+#cancel-modal {
+  clear: both;
+  float: right;
+  margin: 2em 10% 2em 0;
+  font-size: 1.3em;
+}