vijayv · mcnik · Jan 29, 2016 · Jan 30, 2016 · Jan 30, 2016 · Feb 3, 2016
diff --git a/CSS/CSS-in-class-grid-layout.html b/CSS/CSS-in-class-grid-layout.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<title>Felines in a Grid</title>
+		<link rel="stylesheet" type="text/css" href="grid-style.css">
+	</head>
+
+	<body>
+		<header>
+			<h2 id="site-title">Felines in a Grid</h2>
+			<nav id="navigation"> 
+				<a class="nav-button" href="#">Home</a>
+				<a class="nav-button" href="#">Lifestyle</a>
+				<a class="nav-button" href="#">Exclusives</a>
+				<a class="nav-button" href="#last-cat">Bubbles</a>
+			</nav>
+		</header>
+
+		<div class="other-news-container">
+			<h3>In Other News</h3>
+			<div class="other-news-item">
+				<img src="http://2.bp.blogspot.com/-41v6n3Vaf5s/UeRN_XJ0keI/AAAAAAAAN2Y/YxIHhddGiaw/s1600/css.gif">
+			</div>
+			<div class="other-news-item">
+				<img src="http://cdn.meme.am/instances/59066896.jpg">
+			</div>
+			<div class="other-news-item">
+				<img src="http://img.pandawhale.com/55831-WHY-MUST-LIFE-BE-SO-HARD-Homer-3HZt.gif">
+			</div>
+		</div>
+
+		<div class="main-container">
+			<h3>Our Finest Felines</h3>
+			<div class="ib-grid-item">
+				<img alt="Steve" src="https://pbs.twimg.com/profile_images/424484505915621376/EOwsjaMZ_400x400.png" alt="Felix the cat">
+				<p>Steve</p>
+			</div>
+			<div class="ib-grid-item">
+				<img alt="Dr. Franklin" src="https://pbs.twimg.com/profile_images/447460759329460224/mt2UmwGG_400x400.jpeg">
+				<p>Dr. Franklin</p>
+			</div>
+			<div class="ib-grid-item">
+				<img  alt="Mr. Lickums" src="http://2.bp.blogspot.com/_ckBlasgNSzg/SkV9fcHlE6I/AAAAAAAAM6s/qoUNISk_YpQ/s400/Cat+Bowling.jpg">
+				<p>Mr. Lickums</p>
+			</div>
+			<div class="ib-grid-item">
+				<img alt="Roxanne" src="http://www.our-happy-cat.com/images/cat-drinking-from-tap.jpg">
+				<p>Roxanne</p>
+			</div>
+			<div class="ib-grid-item">
+				<img alt="Felix" src="http://www.portraits-online.com/uploads/1/3/5/2/13522906/2607694_orig.jpg">
+				<p>Felix</p>
+			</div>
+			<div class="ib-grid-item" id="last-cat">
+				<img alt="Bubbles" src="https://pbs.twimg.com/profile_images/616542814319415296/McCTpH_E.jpg">
+				<p>Bubbles</p>
+			</div>
+		</div>
+
+		<footer>
+			<a href="#navigation">Back to top</a>
+			<span> | &copy; Felines in a Grid 2016. All rights reserved.</span>
+		</footer>
+	</body>
+</html>
diff --git a/CSS/grid-style.css b/CSS/grid-style.css
@@ -0,0 +1,153 @@
+/*----------------- CSS RESET ------------------*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+/*----------------- CSS RESET ------------------*/
+
+body {
+	font-size: 18px;
+}
+
+header, footer {
+	width: 100%;
+	background: #4d94ff;
+	color: #ffffff;
+	box-sizing: border-box;
+	height: 50px;
+	line-height: 50px;
+	text-align: center;
+}
+
+header {
+	display: inline-block;
+}
+
+footer {
+/*	float: left;*/
+	margin-top: 2em;
+	clear: both;
+}
+
+nav {
+	width: 50%;
+	margin-left: 25%;
+}
+
+img {
+	max-width: 100%;
+	max-height: 100%;
+	border: 1px solid #adadad;
+}
+
+h2 {
+	font-size: 1.5em;
+}
+
+h3 {
+	font-size: 1.33em;
+	font-weight: bold;
+	padding: 20px;
+}
+
+a {
+	text-decoration: none;
+}
+
+#site-title {
+	float: left;
+	width: 25%;
+	text-align: center;
+}
+
+.nav-button {
+	color: #ffffff;
+	display: inline-block;
+	background: none;
+	height: 100%;
+	width: 150px;
+	border-left: 1px solid #ffffff;
+	border-right: 1px solid #ffffff;
+	margin-left: -5px;
+}
+
+.nav-button:hover {
+	background: #80b3ff;
+}
+
+a.nav-button:visited {
+	color: #ffffff;
+}
+
+
+/*START HERE*/
+
+.other-news-container {
+	float: left;
+	width: 25%;
+}
+
+.main-container {
+	float: right;
+	width: 75%;
+	text-align: center;
+}
+
+.ib-grid-item {
+	box-sizing: border-box;
+	display: inline-block;
+	width: 33%;
+	margin-left: auto;
+	margin-bottom: 10%;
+}
+
+.ib-grid-item img {
+	max-height: 66.67%; 
+	max-width: 66.67%;
+}
+
+.other-news-item {
+	box-sizing: border-box;
+	padding: 1em;
+}
diff --git a/flask/orm-tutorial/models-tutorial/app.db b/flask/orm-tutorial/models-tutorial/app.db
diff --git a/flask/orm-tutorial/models-tutorial/app/forms.py b/flask/orm-tutorial/models-tutorial/app/forms.py
@@ -2,8 +2,23 @@
 from wtforms import StringField, IntegerField
 from flask_wtf.html5 import EmailField
 from wtforms.validators import DataRequired
+from wtforms.ext.sqlalchemy.fields import QuerySelectField
 
 class CustomerForm(Form):
     company = StringField('company', validators=[DataRequired()])
     email = EmailField('email', validators=[DataRequired()])
     # Add additional Address fields here
+    first_name = StringField('first_name', validators=[DataRequired()])
+    last_name = StringField('last_name', validators=[DataRequired()])
+    phone = StringField('phone', validators=[DataRequired()])
+
+    street_name = StringField('street_name', validators=[DataRequired()])
+    city = StringField('city', validators=[DataRequired()])
+    state = StringField('state', validators=[DataRequired()])
+    country = StringField('country', validators=[DataRequired()])
+    zip_code = StringField('zip_code', validators=[DataRequired()])
+
+class OrderForm(Form):
+    total_spent = StringField('total_spent', validators=[DataRequired()])
+    num_parts_ordered = StringField('num_parts_ordered', validators=[DataRequired()])
+    customer_id = StringField('customer_id', validators=[DataRequired()])
diff --git a/flask/orm-tutorial/models-tutorial/app/models.py b/flask/orm-tutorial/models-tutorial/app/models.py
@@ -1,15 +1,42 @@
 from app import db
 
+orders = db.Table('orders',
+    db.Column('order_id', db.Integer, db.ForeignKey('order.id')),
+    db.Column('customer_id', db.Integer, db.ForeignKey('customer.id'))
+)
 
 class Customer(db.Model):
     id = db.Column(db.Integer, primary_key=True)
     company = db.Column(db.String(120), unique=False)
-    email = db.Column(db.String(120))
+    email = db.Column(db.String(120), unique=False)
     # You need to a relationship to Address table here
     # see http://flask-sqlalchemy.pocoo.org/2.1/models/#one-to-many-relationships
+    first_name = db.Column(db.String(120), unique=False)
+    last_name = db.Column(db.String(120), unique=False)
+    phone = db.Column(db.String(10), unique=False)
+    addresses = db.relationship('Address', backref='customer', cascade='all, delete-orphan', lazy='dynamic')
+    orders = db.relationship('Order', secondary=orders, backref=db.backref('customer', lazy='dynamic'))
 
     def __repr__(self):
-        return '<Customer %r>' % self.email
+        return '<Customer %r>' % self.id
 
 # Your Address code should go here
-# class Address(db.Model):
+class Address(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    street_name = db.Column(db.String(120), unique=False)
+    city = db.Column(db.String(20), unique=False)
+    state = db.Column(db.String(5), unique=False)
+    country = db.Column(db.String(60), unique=False)
+    zip_code = db.Column(db.String(20), unique=False)
+    customer_id = db.Column(db.Integer, db.ForeignKey('customer.id'))
+
+    def __repr__(self):
+        return '<Address %r>' % self.id
+
+class Order(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    num_parts_ordered = db.Column(db.Integer, unique=False)
+    total_spent = db.Column(db.Integer, unique=False)
+
+    def __repr__(self):
+        return '<Address %r>' % self.id
diff --git a/flask/orm-tutorial/models-tutorial/app/static/styles/styles.css b/flask/orm-tutorial/models-tutorial/app/static/styles/styles.css
@@ -0,0 +1,3 @@
+select {
+	display: inline-block;
+}
diff --git a/flask/orm-tutorial/models-tutorial/app/templates/customer.html b/flask/orm-tutorial/models-tutorial/app/templates/customer.html
@@ -10,18 +10,50 @@ <h2>Add Customer to Our Database</h2>
       {{ form.hidden_tag() }}
       <div class="divider"></div>
       <div class="section">
+        <p>
+          First name:<br>
+          {{ form.first_name(size=120) }}<br>
+        </p>
+        <p>
+          Last name:<br>
+          {{ form.last_name(size=120) }}<br>
+        </p>
         <p>
           Company name:<br>
           {{ form.company(size=120) }}<br>
         </p>
+        <!-- Additional form fields for the Address should go here -->
         <p>
           Customer email:<br>
           {{ form.email(size=120) }}<br>
         </p>
+        <p>
+          Customer phone:<br>
+          {{ form.phone(size=20) }}<br>
+        </p>
       </div>
       <div class="divider"></div>
       <div class="section">
-        <!-- Additional form fields for the Address should go here -->
+        <p>
+          Street Address:<br>
+          {{ form.street_name(size=120) }}<br>
+        </p>
+        <p>
+          City:<br>
+          {{ form.city(size=20) }}<br>
+        </p>
+        <p>
+          State:<br>
+          {{ form.state(size=5) }}<br>
+        </p>
+        <p>
+          Country:<br>
+          {{ form.country(size=60) }}<br>
+        </p>
+        <p>
+          Zip Code:<br>
+          {{ form.zip_code(size=20) }}<br>
+        </p>
       </div>
       <p><input type="submit" value="Create Customer"></p>
     </form>