├── .vscode
    ├── extensions.json
    ├── settings.json
    └── tasks.json
├── README.md
├── app.py
├── requirements.txt
├── static
    └── css
    │   ├── main.css
    │   └── style.css
└── templates
    ├── index.html
    └── results.html


/.vscode/extensions.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "recommendations": [
 3 |     "ms-python.python",
 4 |     "ms-toolsai.jupyter",
 5 |     "ms-toolsai.jupyter-keymap",
 6 |     "ms-toolsai.jupyter-renderers",
 7 |     "wholroyd.jinja",
 8 |     "formulahendry.code-runner"
 9 |   ]
10 | }
11 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "workbench.colorTheme": "Default Dark+",
3 |   "workbench.preferredDarkColorTheme": "Default Dark+",
4 |   "task.allowAutomaticTasks": "on",
5 |   "workbench.editorAssociations": {
6 |     "*.md": "vscode.markdown.preview.editor"
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/.vscode/tasks.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "version": "2.0.0",
 3 |   "tasks": [
 4 |     {
 5 |       "label": "Installing extensions and dependencies...",
 6 |       "type": "shell",
 7 |       "command": "code-server --install-extension ms-python.python --install-extension batisteo.vscode-django --install-extension wholroyd.jinja --install-extension formulahendry.code-runner && pip install -r requirements.txt",
 8 |       "presentation": {
 9 |         "reveal": "always",
10 |         "panel": "new"
11 |       },
12 |       "runOptions": { "runOn": "folderOpen" }
13 |     }
14 |   ]
15 | }
16 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # lab-flask
 2 | 
 3 | <!-- ![image](https://user-images.githubusercontent.com/115451707/196919992-edcfea8b-e3f6-4f35-9398-43be66b5622d.png) -->
 4 | 
 5 | 
 6 | To run flask application 
 7 | 
 8 | ```
 9 | python app.py
10 | ```
11 | 
12 | 
13 | To access your flask application open new tab in and paste the url:
14 | ```
15 | https://{your_url}.pwskills.app:5000/
16 | ```
17 | 


--------------------------------------------------------------------------------
/app.py:
--------------------------------------------------------------------------------
 1 | from flask import Flask,request ,render_template , jsonify
 2 | 
 3 | app = Flask(__name__)
 4 | 
 5 | 
 6 | @app.route('/')
 7 | def home_page():
 8 |     return render_template('index.html')
 9 | 
10 | 
11 | @app.route('/math',methods=['POST'])
12 | def math_ops():
13 |     if(request.method == 'POST'):
14 |         ops = request.form['operation']
15 |         num1 = int(request.form['num1'])
16 |         num2 = int(request.form['num2'])
17 |         if ops == 'add':
18 |             r = num1+num2
19 |             result = "The sum of " + str(num1) + 'and ' + str(num2) + "is " + str(r)
20 |         if ops == 'subtract':
21 |             r = num1-num2
22 |             result = "The subtract of " + str(num1) + 'and ' + str(num2) + "is " + str(r)
23 |         if ops == 'multiply':
24 |             r = num1*num2
25 |             result = "The multiply of " + str(num1) + 'and ' + str(num2) + "is " + str(r)
26 |         if ops == 'divide':
27 |             r = num1/num2
28 |             result = "The divide of " + str(num1) + 'and ' + str(num2) + "is " + str(r)
29 |             
30 |         return render_template('results.html' , result = result)
31 | 
32 | 
33 | 
34 | 
35 | @app.route('/postman_action',methods=['POST'])
36 | def math_ops1():
37 |     if(request.method == 'POST'):
38 |         ops = request.json['operation']
39 |         num1 = int(request.json['num1'])
40 |         num2 = int(request.json['num2'])
41 |         if ops == 'add':
42 |             r = num1+num2
43 |             result = "The sum of " + str(num1) + 'and ' + str(num2) + "is " + str(r)
44 |         if ops == 'subtract':
45 |             r = num1-num2
46 |             result = "The subtract of " + str(num1) + 'and ' + str(num2) + "is " + str(r)
47 |         if ops == 'multiply':
48 |             r = num1*num2
49 |             result = "The multiply of " + str(num1) + 'and ' + str(num2) + "is " + str(r)
50 |         if ops == 'divide':
51 |             r = num1/num2
52 |             result = "The divide of " + str(num1) + 'and ' + str(num2) + "is " + str(r)
53 |             
54 |         return jsonify(result)
55 | 
56 | if __name__=="__main__":
57 |     app.run(host="0.0.0.0")
58 | 


--------------------------------------------------------------------------------
/requirements.txt:
--------------------------------------------------------------------------------
1 | Flask
2 | 


--------------------------------------------------------------------------------
/static/css/main.css:
--------------------------------------------------------------------------------
 1 | body, html {
 2 |     margin: 0;
 3 |     font-family: sans-serif;
 4 | }
 5 | 
 6 | .content {
 7 |     margin: 0 auto;
 8 |     width: 400px;
 9 | }
10 | 
11 | table, td, th {
12 |     border: 1px solid #aaa;
13 | }
14 | 
15 | table {
16 |     border-collapse: collapse;
17 |     width: 100%;
18 | }
19 | 
20 | th {
21 |     height: 30px;
22 | }
23 | 
24 | td {
25 |     text-align: center;
26 |     padding: 5px;
27 | }
28 | 
29 | .form {
30 |     margin-top: 20px;
31 | }
32 | 
33 | #content {
34 |     width: 70%;
35 | }


--------------------------------------------------------------------------------
/static/css/style.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |   background-color: #d3db3e;
  3 | }
  4 | body * {
  5 |   box-sizing: border-box;
  6 | }
  7 | 
  8 | .header {
  9 |   background-color: #327a81;
 10 |   color: white;
 11 |   font-size: 1.5em;
 12 |   padding: 1rem;
 13 |   text-align: center;
 14 |   text-transform: uppercase;
 15 | }
 16 | 
 17 | img {
 18 |   border-radius: 50%;
 19 |   height: 60px;
 20 |   width: 60px;
 21 | }
 22 | 
 23 | .table-users {
 24 |   border: 1px solid #327a81;
 25 |   border-radius: 10px;
 26 |   box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
 27 |   max-width: calc(100% - 2em);
 28 |   margin: 1em auto;
 29 |   overflow: hidden;
 30 |   width: 800px;
 31 | }
 32 | 
 33 | table {
 34 |   width: 100%;
 35 | }
 36 | table td, table th {
 37 |   color: #2b686e;
 38 |   padding: 10px;
 39 | }
 40 | table td {
 41 |   text-align: center;
 42 |   vertical-align: middle;
 43 | }
 44 | table td:last-child {
 45 |   font-size: 0.95em;
 46 |   line-height: 1.4;
 47 |   text-align: left;
 48 | }
 49 | table th {
 50 |   background-color: #daeff1;
 51 |   font-weight: 300;
 52 | }
 53 | table tr:nth-child(2n) {
 54 |   background-color: white;
 55 | }
 56 | table tr:nth-child(2n+1) {
 57 |   background-color: #edf7f8;
 58 | }
 59 | 
 60 | @media screen and (max-width: 700px) {
 61 |   table, tr, td {
 62 |     display: block;
 63 |   }
 64 | 
 65 |   td:first-child {
 66 |     position: absolute;
 67 |     top: 50%;
 68 |     -webkit-transform: translateY(-50%);
 69 |             transform: translateY(-50%);
 70 |     width: 100px;
 71 |   }
 72 |   td:not(:first-child) {
 73 |     clear: both;
 74 |     margin-left: 100px;
 75 |     padding: 4px 20px 4px 90px;
 76 |     position: relative;
 77 |     text-align: left;
 78 |   }
 79 |   td:not(:first-child):before {
 80 |     color: #91ced4;
 81 |     content: '';
 82 |     display: block;
 83 |     left: 0;
 84 |     position: absolute;
 85 |   }
 86 |   td:nth-child(2):before {
 87 |     content: 'Name:';
 88 |   }
 89 |   td:nth-child(3):before {
 90 |     content: 'Email:';
 91 |   }
 92 |   td:nth-child(4):before {
 93 |     content: 'Phone:';
 94 |   }
 95 |   td:nth-child(5):before {
 96 |     content: 'Comments:';
 97 |   }
 98 | 
 99 |   tr {
100 |     padding: 10px 0;
101 |     position: relative;
102 |   }
103 |   tr:first-child {
104 |     display: none;
105 |   }
106 | }
107 | @media screen and (max-width: 500px) {
108 |   .header {
109 |     background-color: transparent;
110 |     color: white;
111 |     font-size: 2em;
112 |     font-weight: 700;
113 |     padding: 0;
114 |     text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
115 |   }
116 | 
117 |   img {
118 |     border: 3px solid;
119 |     border-color: #daeff1;
120 |     height: 100px;
121 |     margin: 0.5rem 0;
122 |     width: 100px;
123 |   }
124 | 
125 |   td:first-child {
126 |     background-color: #c8e7ea;
127 |     border-bottom: 1px solid #91ced4;
128 |     border-radius: 10px 10px 0 0;
129 |     position: relative;
130 |     top: 0;
131 |     -webkit-transform: translateY(0);
132 |             transform: translateY(0);
133 |     width: 100%;
134 |   }
135 |   td:not(:first-child) {
136 |     margin: 0;
137 |     padding: 5px 1em;
138 |     width: 100%;
139 |   }
140 |   td:not(:first-child):before {
141 |     font-size: .8em;
142 |     padding-top: 0.3em;
143 |     position: relative;
144 |   }
145 |   td:last-child {
146 |     padding-bottom: 1rem !important;
147 |   }
148 | 
149 |   tr {
150 |     background-color: white !important;
151 |     border: 1px solid #6cbec6;
152 |     border-radius: 10px;
153 |     box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
154 |     margin: 0.5rem 0;
155 |     padding: 0;
156 |   }
157 | 
158 |   .table-users {
159 |     border: none;
160 |     box-shadow: none;
161 |     overflow: visible;
162 |   }
163 | }
164 | 


--------------------------------------------------------------------------------
/templates/index.html:
--------------------------------------------------------------------------------
 1 | {% block head %}
 2 | 
 3 | <title>Calculator</title>
 4 | <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
 5 | {% endblock %}
 6 | 
 7 | {% block body %}
 8 | <div class="content">
 9 |     <h1 style="text-align: center">Calculator</h1>
10 | 
11 |     <div class="form">
12 |         <form action="/math" method="POST">
13 |             <label for="operation">Choose a Mathematical Operation</label>
14 | 
15 | <select id="operation" name="operation">
16 |   <option value="add">add</option>
17 |   <option value="subtract">subtract</option>
18 |   <option value="multiply">multiply</option>
19 |   <option value="divide">divide</option>
20 |   <option value="log">log</option>
21 | </select>
22 |             <input type="text" name="num1" id="num1">
23 |             <input type="text" name="num2" id="num2">
24 |             <input type="submit" value="Calculate">
25 |         </form>
26 |     </div>
27 | </div>
28 | {% endblock %}


--------------------------------------------------------------------------------
/templates/results.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" >
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <title>Review Page</title>
 7 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
 8 |       <link rel="stylesheet" href="./style.css">
 9 |     <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
10 | </head>
11 | <body>
12 |   <div class="table-users">
13 |    <div class="header">Calculation Result</div>
14 | 
15 |       {{result}}
16 | </div>
17 | </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------