Skip to content

Commit 76f5336

Browse files
a092devsa092devs
committed
Day 57
- Templating with Jinja in Flask Applications
1 parent cfe6d4c commit 76f5336

File tree

10 files changed

+316
-2
lines changed

10 files changed

+316
-2
lines changed

‎README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
<h1 align="center">100 Days of Code: The Complete Python Pro Bootcamp
2-
</h1>
1+
<h1 align="center">100 Days of Code: The Complete Python Pro Bootcamp</h1>
32

43
## 🔰 Beginner
54
- [Day 1](https://github.com/a092devs/100-days-of-python/tree/master/day001) - Working with Variables in Python to Manage Data
@@ -62,6 +61,7 @@
6261
- [Day 54](https://github.com/a092devs/100-days-of-python/tree/master/day054) - Introduction to Web Development with Flask
6362
- [Day 55](https://github.com/a092devs/100-days-of-python/tree/master/day055) - HTML & URL Parsing in Flask and the Higher Lower Game
6463
- [Day 56](https://github.com/a092devs/100-days-of-python/tree/master/day056) - Rendering HTML/Static files and Using Website Templates
64+
- [Day 57](https://github.com/a092devs/100-days-of-python/tree/master/day057) - Templating with Jinja in Flask Applications
6565

6666
## ⚙ Tools and Technologies Covered
6767
- Python 3

‎day057/Blog/server.py

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import requests
2+
from flask import Flask, render_template
3+
4+
BLOG_URL = "https://api.npoint.io/92d0ac6f5b3f9c756882"
5+
app = Flask(__name__)
6+
7+
@app.route('/')
8+
def get_blog():
9+
resp = requests.get(BLOG_URL)
10+
all_posts = resp.json()
11+
return render_template('index.html', posts=all_posts)
12+
13+
@app.route('/post/<int:post_id>')
14+
def find_post(post_id):
15+
resp = requests.get(BLOG_URL)
16+
all_posts = resp.json()
17+
if post_id == 1:
18+
return render_template('post1.html', posts=all_posts)
19+
if post_id == 2:
20+
return render_template('post2.html', posts=all_posts)
21+
if post_id == 3:
22+
return render_template('post3.html', posts=all_posts)
23+
24+
if __name__ == "__main__":
25+
app.run(debug=True)

‎day057/Blog/static/css/style.css

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
body {
2+
background: #efeff3;
3+
margin: 0;
4+
font-family: "Raleway", sans-serif;
5+
-webkit-font-smoothing: antialiased;
6+
color: #212121;
7+
}
8+
.wrapper {
9+
position: relative;
10+
clear: both;
11+
margin: 0 auto 75px auto;
12+
width: 100%;
13+
overflow: hidden;
14+
}
15+
.top {
16+
background: #4e89ae;
17+
height: 180px;
18+
border-top: 20px solid #43658b;
19+
}
20+
21+
.top .title {
22+
width: 700px;
23+
margin: 38px auto 0 auto;
24+
}
25+
26+
.title h1 {
27+
font-size: 24px;
28+
color: #fff;
29+
font-weight: 500;
30+
}
31+
32+
.content {
33+
margin: -80px auto 100px;
34+
padding-bottom: 20px;
35+
}
36+
37+
.card {
38+
position: relative;
39+
background: #fff;
40+
padding: 50px;
41+
width: 600px;
42+
margin: 20px auto 0 auto;
43+
box-shadow: 0 2px 4px rgba(100, 100, 100, 0.1);
44+
}
45+
46+
.card h2 {
47+
font-size: 21px;
48+
font-weight: 500;
49+
}
50+
51+
.card h2 a {
52+
color: #cc0000;
53+
text-decoration: none;
54+
}
55+
56+
.card .text {
57+
color: #212121;
58+
margin-top: 20px;
59+
font-size: 15px;
60+
line-height: 22px;
61+
}
62+
63+
footer {
64+
position: fixed;
65+
left: 0;
66+
bottom: 0;
67+
width: 100%;
68+
background-color: #43658b;
69+
color: white;
70+
text-align: center;
71+
}

‎day057/Blog/templates/index.html

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Blog</title>
8+
<link rel="stylesheet" href="/static/css/style.css">
9+
</head>
10+
11+
<body>
12+
<div class="wrapper">
13+
<div class="top">
14+
<div class="title">
15+
<h1>My Blog</h1>
16+
</div>
17+
</div>
18+
<div class="content">
19+
<div class="card">
20+
{% for blog_post in posts: %}
21+
{% if blog_post["id"] == 1: %}
22+
<h2>{{blog_post["title"]}}</h2>
23+
<p>{{blog_post["subtitle"]}}</p>
24+
{% endif %}
25+
{% endfor %}
26+
<a href="{{url_for('find_post', post_id=1)}}">Read</a>
27+
</div>
28+
</div>
29+
<div class="content">
30+
<div class="card">
31+
{% for blog_post in posts: %}
32+
{% if blog_post["id"] == 2: %}
33+
<h2>{{blog_post["title"]}}</h2>
34+
<p>{{blog_post["subtitle"]}}</p>
35+
{% endif %}
36+
{% endfor %}
37+
<a href="{{url_for('find_post', post_id=2)}}">Read</a>
38+
</div>
39+
</div>
40+
<div class="content">
41+
<div class="card">
42+
{% for blog_post in posts: %}
43+
{% if blog_post["id"] == 3: %}
44+
<h2>{{blog_post["title"]}}</h2>
45+
<p>{{blog_post["subtitle"]}}</p>
46+
{% endif %}
47+
{% endfor %}
48+
<a href="{{url_for('find_post', post_id=3)}}">Read</a>
49+
</div>
50+
</div>
51+
</div>
52+
</body>
53+
<footer>
54+
<p>Made with ❤️ in India.</p>
55+
</footer>
56+
57+
</html>

‎day057/Blog/templates/post1.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>First Post</title>
8+
<link rel="stylesheet" href="/static/css/style.css">
9+
</head>
10+
11+
<body>
12+
<div class="wrapper">
13+
<div class="top">
14+
<div class="title">
15+
<h1>My Blog</h1>
16+
</div>
17+
</div>
18+
<div class="content">
19+
<div class="card">
20+
{% for blog_post in posts: %}
21+
{% if blog_post["id"] == 1: %}
22+
<h1>{{blog_post["title"]}}</h1>
23+
<h2>{{blog_post["subtitle"]}}</h2>
24+
<p>{{blog_post["body"]}}</p>
25+
{% endif %}
26+
{% endfor %}
27+
</div>
28+
</div>
29+
</div>
30+
</body>
31+
<footer>
32+
<p>Made with ❤️ in India.</p>
33+
</footer>
34+
35+
</html>

‎day057/Blog/templates/post2.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Second Post</title>
8+
<link rel="stylesheet" href="/static/css/style.css">
9+
</head>
10+
11+
<body>
12+
<div class="wrapper">
13+
<div class="top">
14+
<div class="title">
15+
<h1>My Blog</h1>
16+
</div>
17+
</div>
18+
<div class="content">
19+
<div class="card">
20+
{% for blog_post in posts: %}
21+
{% if blog_post["id"] == 2: %}
22+
<h1>{{blog_post["title"]}}</h1>
23+
<h2>{{blog_post["subtitle"]}}</h2>
24+
<p>{{blog_post["body"]}}</p>
25+
{% endif %}
26+
{% endfor %}
27+
</div>
28+
</div>
29+
</div>
30+
</body>
31+
<footer>
32+
<p>Made with ❤️ in India.</p>
33+
</footer>
34+
35+
</html>

‎day057/Blog/templates/post3.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Third Post</title>
8+
<link rel="stylesheet" href="/static/css/style.css">
9+
</head>
10+
11+
<body>
12+
<div class="wrapper">
13+
<div class="top">
14+
<div class="title">
15+
<h1>My Blog</h1>
16+
</div>
17+
</div>
18+
<div class="content">
19+
<div class="card">
20+
{% for blog_post in posts: %}
21+
{% if blog_post["id"] == 3: %}
22+
<h1>{{blog_post["title"]}}</h1>
23+
<h2>{{blog_post["subtitle"]}}</h2>
24+
<p>{{blog_post["body"]}}</p>
25+
{% endif %}
26+
{% endfor %}
27+
</div>
28+
</div>
29+
</div>
30+
</body>
31+
<footer>
32+
<p>Made with ❤️ in India.</p>
33+
</footer>
34+
35+
</html>

‎day057/Genderize/server.py

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import requests
2+
import random
3+
from datetime import date
4+
from flask import Flask, render_template
5+
6+
app = Flask(__name__)
7+
8+
@app.route('/')
9+
def home():
10+
current_year = date.today().year
11+
random_num = random.randint(1, 10)
12+
return render_template('index.html', num = random_num, year=current_year)
13+
14+
@app.route('/guess/<name>')
15+
def guess(name):
16+
name = name.title()
17+
age = requests.get(f'https://api.agify.io?name={name}').json()
18+
gender = requests.get(f'https://api.genderize.io?name={name}').json()
19+
data = {
20+
'age' : age['age'],
21+
'gender' : gender['gender'],
22+
'name' : name
23+
}
24+
return render_template('guess.html', **data)
25+
26+
if __name__ == '__main__':
27+
app.run(debug=True)

‎day057/Genderize/templates/guess.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Genderize</title>
7+
</head>
8+
<body>
9+
<h1>Hello {{name}}</h1>
10+
<h2>I think you are a {{gender}}.</h2>
11+
<h3>And maybe you are {{age}} years old.</h3>
12+
</body>
13+
</html>

‎day057/Genderize/templates/index.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Home</title>
7+
</head>
8+
<body>
9+
<h1>Hello World!</h1>
10+
<h1>{{5 * 6}}</h1>
11+
<h3>Random Number: {{num}}</h3>
12+
</body>
13+
<footer>
14+
<p>©HUHMIRROR {{year}}. Built by A092DEVS.</p>
15+
</footer>
16+
</html>

0 commit comments

Comments
 (0)