sd17spring · NathanLepore · Mar 26, 2017 · Apr 24, 2017
diff --git a/extension.py b/extension.py
@@ -0,0 +1,17 @@
+import os
+from flask import Flask, render_template, request, url_for, redirect
+from jinja2 import Environment, FileSystemLoader
+# create the application object
+app = Flask(__name__)
+tpldir = os.path.dirname(os.path.abspath(__file__))+'/templates/'
+env = Environment(loader=FileSystemLoader(tpldir), trim_blocks=True)
+
+
+@app.route('/', methods=['GET', 'POST'])
+def Jquerytest():
+    return render_template('MP5.html')
+
+
+# start the server with the 'run()' method
+if __name__ == '__main__':
+    app.run(debug=True)
diff --git a/flask_app.py b/flask_app.py
@@ -1,3 +1,39 @@
 """
 Put your Flask app code here.
-"""
+"""
+import os
+from flask import Flask, render_template, request, url_for, redirect
+from jinja2 import Environment, FileSystemLoader
+# create the application object
+app = Flask(__name__)
+tpldir = os.path.dirname(os.path.abspath(__file__))+'/templates/'
+env = Environment(loader=FileSystemLoader(tpldir), trim_blocks=True)
+
+
+# route for handling the login page logic
+@app.route('/', methods=['GET', 'POST'])
+def login():
+    error = None
+    if request.method == 'POST':
+            name = request.form.get('username')
+            age = request.form.get('age')
+            ninja = request.form.get('ninja')
+            if name and age and ninja:
+                output = env.get_template('postlogin.html').render(
+                    ninja='Patrick Huston', age=age, name=name)
+                return output
+            else:
+                return redirect(url_for('error'))
+    return render_template('login.html')
+
+
+@app.route('/error', methods=['GET', 'POST'])
+def error():
+    if request.method == 'POST':
+        return redirect(url_for('login'))
+    return render_template('error.html')
+
+
+# start the server with the 'run()' method
+if __name__ == '__main__':
+    app.run(debug=True)
diff --git a/hello.py b/hello.py
@@ -1,13 +1,23 @@
 """
 Simple "Hello, World" application using Flask
 """
-
-from flask import Flask
+from flask import Flask, render_template, request
 app = Flask(__name__)
 
-@app.route('/')
-def hello_world():
-    return 'Hello World!'
+
+@app.route('/', methods=['POST', 'GET'])
+def login():
+    error = None
+    if request.method == 'POST':
+        if valid_login(request.form['firstname'],
+                       request.form['lastname']):
+            return log_the_user_in(request.form['username'])
+        else:
+            error = 'Invalid username/password'
+    # the code below is executed if the request method
+    # was GET or the credentials were invalid
+    return render_template('WebAppTest.html', error=error)
+
 
 if __name__ == '__main__':
     app.run()
diff --git a/static/Jquery.js b/static/Jquery.js
@@ -0,0 +1,6 @@
+$(function() {
+    $("button").click(function() {
+        $("p").hide();
+    });
+
+});
diff --git a/templates/MP5.html b/templates/MP5.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+
+
+<head>
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
+<script>
+    $(function() {
+        $("#button1").click(function() {
+            $("p").toggle(1000);
+          });
+       $("#button2").click(function() {
+          var colorR = Math.floor((Math.random() * 256));
+          var colorG = Math.floor((Math.random() * 256));
+          var colorB = Math.floor((Math.random() * 256));
+            $("p").css("color", "rgb(" + colorR + "," + colorG + "," + colorB + ")");
+
+        });
+        $("#p1").click(function(){
+          alert("I'm learning to use Jquery to make websites dynamic!")
+        });
+
+        $("#button3").click(function() {
+          $("#plz").fadeIn(50000);
+          $("#wow").fadeToggle();
+
+          });
+    });
+
+</script>
+</head>
+<style>
+body {background: url("https://interfacelift.com/wallpaper/7yz4ma1/03337_bluemountains_1024x1024.jpg") no-repeat fixed center;
+      background-size:cover;
+      }
+#ban1{
+    width: 310px;
+    height: 100px;
+    margin:0 auto;
+    text-align:center;
+      display: -webkit-flex;
+      display: flex;
+      -webkit-flex-wrap: wrap;
+      flex-wrap: wrap;
+      -webkit-align-content: center;
+      align-content: center;
+      font-family: "Helvetica", Helvetica, serif;
+
+    }
+    p {
+    font-family: "Times New Roman", Times, serif;
+    font-size: 20px;
+}
+</style>
+<body>
+  <div id="ban1">
+    <h1>This is my first custom website!</h1>
+ </div>
+    <p id="p1">Click on me for some info!</p>
+    <p>I have learned a lot about both JQuery and CSS styling. </p>
+
+    <button id="button1">Click me to toggle paragraphs</button>
+    <br>
+    <button id="button2">Click me to change the colors of the paragraphs</button>
+    <br>
+    <button id="button3">Click me to see something awesome!</button>
+    <br>
+    <img id="wow" src = "https://media.tenor.co/images/b4f531961ded2a1dc23c570608376b6d/tenor.gif" style="display:none">
+    <br>
+    <h1 id="plz" style="display:none"> please give me an A</h1>
+
+</body>
+
+</html>
diff --git a/templates/error.html b/templates/error.html
@@ -0,0 +1,19 @@
+<html>
+  <head>
+    <title>Login:</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="static/bootstrap.min.css" rel="stylesheet" media="screen">
+  </head>
+  <body>
+    <div class="container">
+      <br>
+      <form action="" method="post">
+        <p> You did not input all required information. Try again. </p>
+        <input class="btn btn-default" type="submit" value="Return">
+      </form>
+      {% if error %}
+        <p class="error"><strong>Error:</strong> {{ error }}
+      {% endif %}
+    </div>
+  </body>
+</html>
diff --git a/templates/login.html b/templates/login.html
@@ -0,0 +1,29 @@
+<html>
+
+<head>
+    <title>Login:</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="static/bootstrap.min.css" rel="stylesheet" media="screen">
+</head>
+<p> Please give me some basic information </p>
+
+<body>
+    <div class="container">
+        <br>
+        <form action="" method="post">
+            <p> Your name:</p>
+            <input type="text" placeholder="Username" name="username" value="{{
+          request.form.username }}"><br>
+                <p> Your age </p>
+                <input type="age" placeholder="99" name="age" value="{{
+         request.form.age }}"><br>
+                    <p> Your favorite SoftDes Ninja </p>
+                    <input type="ninja" name="ninja" placeholder="Anybody but Patrick"><br><br>
+                    <input class="btn btn-default" type="submit" value="Submit">
+        </form>
+        {% if error %}
+        <p class="error"><strong>Error:</strong> {{ error }} {% endif %}
+    </div>
+</body>
+
+</html>
diff --git a/templates/postlogin.html b/templates/postlogin.html
@@ -0,0 +1,18 @@
+<html>
+  <head>
+    <title>Post Login:</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="static/bootstrap.min.css" rel="stylesheet" media="screen">
+  </head>
+  <p> Profile </p>
+  <body>
+    <p> Name: {{name}} </p>
+    <p> Age: {{age}} </p>
+    <p> Favorite Ninja: {{ninja}} </p>
+
+      {% if error %}
+        <p class="error"><strong>Error:</strong> {{ error }}
+      {% endif %}
+    </div>
+  </body>
+</html>