day 25 fixes

jyoti1singh · Dec 15, 2019 · cb2e582 · cb2e582
1 parent ce0a08d
commit cb2e582
Show file tree

Hide file tree

Showing 9 changed files with 293 additions and 87 deletions.
diff --git a/.gitignore b/.gitignore
@@ -14,4 +14,6 @@ flask_project/venv
 flask_project/ven/bin/
 flask_project/venv/include/
 flask_project/ven/lib
-numpy.ipynb
+numpy.ipynb
+.ipynb_checkpoints
+.vscode/
diff --git a/python_for_web/app.py b/python_for_web/app.py
@@ -3,6 +3,10 @@
 import os # importing operating system module
 
 app = Flask(__name__)
+# to stop caching static file
+app.config['SEND_FILE_MAX_AGE_DEFAULT'] = 0
+
+
 
 @app.route('/') # this decorator create the home route
 def home ():
@@ -15,12 +19,19 @@ def about():
     name = '30 Days Of Python Programming'
     return render_template('about.html', name = name, title = 'About Us')
 
+@app.route('/result')
+def result():
+    return render_template('result.html')
+
 @app.route('/post', methods= ['GET','POST'])
 def post():
     name = 'Text Analyzer'
-    return render_template('post.html', name = name, title = name)
-
-
+    if request.method == 'GET':
+         return render_template('post.html', name = name, title = name)
+    if request.method =='POST':
+        content = request.form['content']
+        return redirect(url_for('result'))
+
 if __name__ == '__main__':
     # for deployment
     # to make it work for both production and development

diff --git a/python_for_web/static/css/main.css b/python_for_web/static/css/main.css
@@ -1,31 +1,44 @@
+/* === GENERAL === */
+
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }
 
+/* === css variables === */
 :root {
     --header-bg-color: #4a7799;
-    --textarea-bg-color: rgb(235, 231, 231);
-    --body-bg-color: rgb(225, 228, 230);
-    --nav-link-color:#aaa;
+    --textarea-bg-color: rgb(250, 246, 246);
+    --body-bg-color: rgb(210, 214, 210);
+    --nav-link-color: #bbb;
 }
 
+/* === body style === */
 body {
     background: var(--body-bg-color);
     margin: auto;
-    line-height: 1.5;
+    line-height: 1.75;
+    font-weight: 900;
+    word-spacing: 1.5px;
+    font-family: 'Lato',sans-serif;
+    font-weight: 300;
 }
 
+/* === header style === */
 header {
     background: var(--header-bg-color);
 }
-
+/* === title and subtitle style === */
 h1,
 h2 {
-    margin: 25px;
+    margin: 20px;
+    font-weight: 300;
+    font-family: Nunito;
 }
 
+/* === header menu style === */
+
 .menu-container {
     width: 90%;
     display: flex;
@@ -39,10 +52,6 @@ h2 {
     display: flex;
 }
 
-li {
-    list-style: none;
-}
-
 .nav-list {
     list-style: none;
     margin: 0 5px;
@@ -53,39 +62,98 @@ li {
     font-size: 22px;
     padding: 0 5px;
     color: var(--nav-link-color);
+    font-weight: 400;
 }
 
+.brand-name {
+    font-size: 28px;
+    font-weight: bolder;
+}
+/* === paragraph text style === */
+p {
+    font-size: 22px;
+    font-weight: 300;
+}
+
+/* === main style === */
 main {
     width: 90%;
     margin: auto;
-    text-align: center;
 }
 
-.btn{
+/* === container div inside main style === */
+
+.container {
+    background: rgb(210, 214, 210);
+    padding: 20px;
+    margin: auto;
+}
+
+.tech-lists {
+    margin: 10px auto;
+    text-align: left;
+    font-size: 20px;
+}
+.tech {
+    list-style: none;
+}
+/* === button style === */
+.btn {
     width: 150px;
     height: 50px;
     background: var(--header-bg-color);
     color: var(--nav-link-color);
     font-size: 20px;
-    margin:5px;
+    margin: 5px;
     border: 1px solid var(--header-bg-color);
+    font-family: Lato;
+    cursor: pointer;
 }
 
 .btn:focus {
     outline: 2px solid #2a70a5;
+    cursor: pointer;
 }
-
-
+/* === textarea style === */
 textarea {
-    padding: 20px;
-    outline: 1px solid var(--nav-link-color);
+    width: 65%;
+    margin: auto;
+    padding: 10px 15px;
+    outline: 2px solid rgba(207, 203, 203, 0.25);
     border: none;
     font-size: 18px;
+    font-family: Lato;
+    font-weight: 300;
 }
 
 textarea:focus {
     border: none;
-    outline: 2px solid #4a7799;
+    outline: 2px solid rgba(74, 119, 153, 0.45);
     background: var(--textarea-bg-color);
     font-size: 18px;
+    caret-color: var(--header-bg-color);
+    font-family: Lato;
+    font-weight: 300;
+
+}
+
+/* === responsiveness === */
+@media (max-width:600px) {
+
+    .menu-container {
+        flex-direction: column;
+        justify-content: space-between;
+    }
+    h1{
+        font-size: 22px;
+    }
+
+    .nav-lists {
+        flex-direction: column;
+    }
+
+    textarea {
+        width: 100%;
+    }
+
 }
diff --git a/python_for_web/templates/about.html b/python_for_web/templates/about.html
@@ -1,7 +1,9 @@
 {% extends 'layout.html' %}
 {% block content %}
-<h1>About Us</h1>
-<h2>{{name}}</h2>
-<p>This is a 30 days of python programming challenge. If you have been coding this far, you are awesome. Congratulations
-    for the job well done!</p>
+<div class="container">
+    <h1>About {{name}}</h1>
+    <p>This is a 30 days of python programming challenge. If you have been coding this far, you are awesome.
+        Congratulations
+        for the job well done!</p>
+</div>
 {% endblock %}
diff --git a/python_for_web/templates/home.html b/python_for_web/templates/home.html
@@ -1,11 +1,17 @@
 {% extends 'layout.html' %}
 {% block content %}
-<h1>Welcome to {{name}}</h1>
-<p>You need the following technologies to build this web application:</p>
-<ul>
-    {% for tech in techs %}
-    <li>{{tech}}</li>
+<div class="container">
+    <h1>Welcome to {{name}}</h1>
+    <p>This application clean texts and analyse the number of word, characters and most frequent words in the text.
+        Check it out by click text analyzer at the menu.
+        You need the following technologies to build this web application:</p>
+    <ul class="tech-lists">
+        {% for tech in techs %}
+        <li class="tech">{{tech}}</li>
+
+        {% endfor %}
+    </ul>
+</div>
+
 
-    {% endfor %}
-</ul>
 {% endblock %}
diff --git a/python_for_web/templates/layout.html b/python_for_web/templates/layout.html
@@ -4,7 +4,9 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
+    <link href="https://fonts.googleapis.com/css?family=Lato:300,400|Nunito:300,400|Raleway:300,400,500&display=swap"
+        rel="stylesheet">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
     {% if title %}
     <title>30 Days of Python - {{ title}}</title>
     {% else %}
@@ -16,19 +18,19 @@
     <header>
         <div class="menu-container">
             <div>
-                <a class="nav-link" href="/">30DaysOfPython</a>
+                <a class="brand-name nav-link" href="/">30DaysOfPython</a>
             </div>
-             <ul class="nav-lists">
-                 <li class="nav-list"><a class="nav-link" href="{{ url_for('home') }}">Home</a></li>
-                 <li class="nav-list"><a class="nav-link" href="{{ url_for('about') }}">About</a></li>
-                 <li class="nav-list"><a class="nav-link" href="{{ url_for('post') }}">Text Analyzer</a></li>
-             </ul>
+            <ul class="nav-lists">
+                <li class="nav-list"><a class="nav-link active" href="{{ url_for('home') }}">Home</a></li>
+                <li class="nav-list"><a class="nav-link active" href="{{ url_for('about') }}">About</a></li>
+                <li class="nav-list"><a class="nav-link active" href="{{ url_for('post') }}">Text Analyzer</a></li>
+            </ul>
         </div>
-       
+
 
     </header>
     <main>
-        {% block content %} {% endblock %}
+            {% block content %} {% endblock %}
     </main>
 </body>
 

diff --git a/python_for_web/templates/post.html b/python_for_web/templates/post.html
@@ -1,9 +1,17 @@
 {% extends 'layout.html' %}
 {% block content %}
-<h1>Text Analyzer</h1>
-<form action="result.html" method="POST"></form>
-<textarea cols="120" rows='30' name="content"></textarea>
-<br />
-<input type='submit' class="btn" value="Process Text"/>
-</form>
+<div class="container">
+    <h1>Text Analyzer</h1>
+    <form action="http://localhost:5000/post" method="POST">
+        <div>
+            <textarea rows='25' name="content" autofocus></textarea>
+        </div>
+        <div>
+            <input type='submit' class="btn" value="Process Text" />
+        </div>
+
+
+    </form>
+</div>
+
 {% endblock %}
diff --git a/python_for_web/templates/result.html b/python_for_web/templates/result.html
@@ -1,5 +1,8 @@
 {% extends 'layout.html' %}
 {% block content %}
-<h1>Result </h1>
+<div class="container">
+    <h1>Text Analysis Result </h1>
+</div>
+
 
 {% endblock %}