Skip to content

Commit cb2e582

Browse files
AsabenehAsabeneh
committed
day 25 fixes
1 parent ce0a08d commit cb2e582

File tree

9 files changed

+293
-87
lines changed

9 files changed

+293
-87
lines changed

‎.gitignore

+3-1
Original file line numberDiff line numberDiff line change
@@ -14,4 +14,6 @@ flask_project/venv
1414
flask_project/ven/bin/
1515
flask_project/venv/include/
1616
flask_project/ven/lib
17-
numpy.ipynb
17+
numpy.ipynb
18+
.ipynb_checkpoints
19+
.vscode/

‎python_for_web/app.py

+14-3
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@
33
import os # importing operating system module
44

55
app = Flask(__name__)
6+
# to stop caching static file
7+
app.config['SEND_FILE_MAX_AGE_DEFAULT'] = 0
8+
9+
610

711
@app.route('/') # this decorator create the home route
812
def home ():
@@ -15,12 +19,19 @@ def about():
1519
name = '30 Days Of Python Programming'
1620
return render_template('about.html', name = name, title = 'About Us')
1721

22+
@app.route('/result')
23+
def result():
24+
return render_template('result.html')
25+
1826
@app.route('/post', methods= ['GET','POST'])
1927
def post():
2028
name = 'Text Analyzer'
21-
return render_template('post.html', name = name, title = name)
22-
23-
29+
if request.method == 'GET':
30+
return render_template('post.html', name = name, title = name)
31+
if request.method =='POST':
32+
content = request.form['content']
33+
return redirect(url_for('result'))
34+
2435
if __name__ == '__main__':
2536
# for deployment
2637
# to make it work for both production and development

‎python_for_web/static/css/main.css

+86-18
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,44 @@
1+
/* === GENERAL === */
2+
13
* {
24
margin: 0;
35
padding: 0;
46
box-sizing: border-box;
57
}
68

9+
/* === css variables === */
710
:root {
811
--header-bg-color: #4a7799;
9-
--textarea-bg-color: rgb(235, 231, 231);
10-
--body-bg-color: rgb(225, 228, 230);
11-
--nav-link-color:#aaa;
12+
--textarea-bg-color: rgb(250, 246, 246);
13+
--body-bg-color: rgb(210, 214, 210);
14+
--nav-link-color: #bbb;
1215
}
1316

17+
/* === body style === */
1418
body {
1519
background: var(--body-bg-color);
1620
margin: auto;
17-
line-height: 1.5;
21+
line-height: 1.75;
22+
font-weight: 900;
23+
word-spacing: 1.5px;
24+
font-family: 'Lato',sans-serif;
25+
font-weight: 300;
1826
}
1927

28+
/* === header style === */
2029
header {
2130
background: var(--header-bg-color);
2231
}
23-
32+
/* === title and subtitle style === */
2433
h1,
2534
h2 {
26-
margin: 25px;
35+
margin: 20px;
36+
font-weight: 300;
37+
font-family: Nunito;
2738
}
2839

40+
/* === header menu style === */
41+
2942
.menu-container {
3043
width: 90%;
3144
display: flex;
@@ -39,10 +52,6 @@ h2 {
3952
display: flex;
4053
}
4154

42-
li {
43-
list-style: none;
44-
}
45-
4655
.nav-list {
4756
list-style: none;
4857
margin: 0 5px;
@@ -53,39 +62,98 @@ li {
5362
font-size: 22px;
5463
padding: 0 5px;
5564
color: var(--nav-link-color);
65+
font-weight: 400;
5666
}
5767

68+
.brand-name {
69+
font-size: 28px;
70+
font-weight: bolder;
71+
}
72+
/* === paragraph text style === */
73+
p {
74+
font-size: 22px;
75+
font-weight: 300;
76+
}
77+
78+
/* === main style === */
5879
main {
5980
width: 90%;
6081
margin: auto;
61-
text-align: center;
6282
}
6383

64-
.btn{
84+
/* === container div inside main style === */
85+
86+
.container {
87+
background: rgb(210, 214, 210);
88+
padding: 20px;
89+
margin: auto;
90+
}
91+
92+
.tech-lists {
93+
margin: 10px auto;
94+
text-align: left;
95+
font-size: 20px;
96+
}
97+
.tech {
98+
list-style: none;
99+
}
100+
/* === button style === */
101+
.btn {
65102
width: 150px;
66103
height: 50px;
67104
background: var(--header-bg-color);
68105
color: var(--nav-link-color);
69106
font-size: 20px;
70-
margin:5px;
107+
margin: 5px;
71108
border: 1px solid var(--header-bg-color);
109+
font-family: Lato;
110+
cursor: pointer;
72111
}
73112

74113
.btn:focus {
75114
outline: 2px solid #2a70a5;
115+
cursor: pointer;
76116
}
77-
78-
117+
/* === textarea style === */
79118
textarea {
80-
padding: 20px;
81-
outline: 1px solid var(--nav-link-color);
119+
width: 65%;
120+
margin: auto;
121+
padding: 10px 15px;
122+
outline: 2px solid rgba(207, 203, 203, 0.25);
82123
border: none;
83124
font-size: 18px;
125+
font-family: Lato;
126+
font-weight: 300;
84127
}
85128

86129
textarea:focus {
87130
border: none;
88-
outline: 2px solid #4a7799;
131+
outline: 2px solid rgba(74, 119, 153, 0.45);
89132
background: var(--textarea-bg-color);
90133
font-size: 18px;
134+
caret-color: var(--header-bg-color);
135+
font-family: Lato;
136+
font-weight: 300;
137+
138+
}
139+
140+
/* === responsiveness === */
141+
@media (max-width:600px) {
142+
143+
.menu-container {
144+
flex-direction: column;
145+
justify-content: space-between;
146+
}
147+
h1{
148+
font-size: 22px;
149+
}
150+
151+
.nav-lists {
152+
flex-direction: column;
153+
}
154+
155+
textarea {
156+
width: 100%;
157+
}
158+
91159
}

‎python_for_web/templates/about.html

+6-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
{% extends 'layout.html' %}
22
{% block content %}
3-
<h1>About Us</h1>
4-
<h2>{{name}}</h2>
5-
<p>This is a 30 days of python programming challenge. If you have been coding this far, you are awesome. Congratulations
6-
for the job well done!</p>
3+
<div class="container">
4+
<h1>About {{name}}</h1>
5+
<p>This is a 30 days of python programming challenge. If you have been coding this far, you are awesome.
6+
Congratulations
7+
for the job well done!</p>
8+
</div>
79
{% endblock %}

‎python_for_web/templates/home.html

+13-7
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
11
{% extends 'layout.html' %}
22
{% block content %}
3-
<h1>Welcome to {{name}}</h1>
4-
<p>You need the following technologies to build this web application:</p>
5-
<ul>
6-
{% for tech in techs %}
7-
<li>{{tech}}</li>
3+
<div class="container">
4+
<h1>Welcome to {{name}}</h1>
5+
<p>This application clean texts and analyse the number of word, characters and most frequent words in the text.
6+
Check it out by click text analyzer at the menu.
7+
You need the following technologies to build this web application:</p>
8+
<ul class="tech-lists">
9+
{% for tech in techs %}
10+
<li class="tech">{{tech}}</li>
11+
12+
{% endfor %}
13+
</ul>
14+
</div>
15+
816

9-
{% endfor %}
10-
</ul>
1117
{% endblock %}

‎python_for_web/templates/layout.html

+11-9
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@
44
<head>
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
7+
<link href="https://fonts.googleapis.com/css?family=Lato:300,400|Nunito:300,400|Raleway:300,400,500&display=swap"
8+
rel="stylesheet">
9+
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
810
{% if title %}
911
<title>30 Days of Python - {{ title}}</title>
1012
{% else %}
@@ -16,19 +18,19 @@
1618
<header>
1719
<div class="menu-container">
1820
<div>
19-
<a class="nav-link" href="/">30DaysOfPython</a>
21+
<a class="brand-name nav-link" href="/">30DaysOfPython</a>
2022
</div>
21-
<ul class="nav-lists">
22-
<li class="nav-list"><a class="nav-link" href="{{ url_for('home') }}">Home</a></li>
23-
<li class="nav-list"><a class="nav-link" href="{{ url_for('about') }}">About</a></li>
24-
<li class="nav-list"><a class="nav-link" href="{{ url_for('post') }}">Text Analyzer</a></li>
25-
</ul>
23+
<ul class="nav-lists">
24+
<li class="nav-list"><a class="nav-link active" href="{{ url_for('home') }}">Home</a></li>
25+
<li class="nav-list"><a class="nav-link active" href="{{ url_for('about') }}">About</a></li>
26+
<li class="nav-list"><a class="nav-link active" href="{{ url_for('post') }}">Text Analyzer</a></li>
27+
</ul>
2628
</div>
27-
29+
2830

2931
</header>
3032
<main>
31-
{% block content %} {% endblock %}
33+
{% block content %} {% endblock %}
3234
</main>
3335
</body>
3436

‎python_for_web/templates/post.html

+14-6
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,17 @@
11
{% extends 'layout.html' %}
22
{% block content %}
3-
<h1>Text Analyzer</h1>
4-
<form action="result.html" method="POST"></form>
5-
<textarea cols="120" rows='30' name="content"></textarea>
6-
<br />
7-
<input type='submit' class="btn" value="Process Text"/>
8-
</form>
3+
<div class="container">
4+
<h1>Text Analyzer</h1>
5+
<form action="http://localhost:5000/post" method="POST">
6+
<div>
7+
<textarea rows='25' name="content" autofocus></textarea>
8+
</div>
9+
<div>
10+
<input type='submit' class="btn" value="Process Text" />
11+
</div>
12+
13+
14+
</form>
15+
</div>
16+
917
{% endblock %}

‎python_for_web/templates/result.html

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
{% extends 'layout.html' %}
22
{% block content %}
3-
<h1>Result </h1>
3+
<div class="container">
4+
<h1>Text Analysis Result </h1>
5+
</div>
6+
47

58
{% endblock %}

0 commit comments

Comments
 (0)