-
-
Save TheMuellenator/7c6a08a3df3b94a28d1a867628481910 to your computer and use it in GitHub Desktop.
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Title</title> | |
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet"> | |
<link rel="stylesheet" href="../static/css/styles.css"> | |
</head> | |
<body> | |
<div class="wrapper"> | |
<div class="top"> | |
<div class="title"><h1>My Blog</h1></div> | |
</div> | |
{% for post in all_posts: %} | |
<div class="content"> | |
<div class="card "> | |
<h2>{{ post.title }}</h2> | |
<p>{{ post.subtitle }}</p> | |
<a href="{{ url_for('show_post', index=post.id) }}">Read</a> | |
</div> | |
</div> | |
{% endfor %} | |
</div> | |
</body> | |
<footer> | |
<p>Made with ♥️ in London.</p> | |
</footer> | |
</html> |
from flask import Flask, render_template | |
from post import Post | |
import requests | |
posts = requests.get("https://api.npoint.io/c790b4d5cab58020d391").json() | |
post_objects = [] | |
for post in posts: | |
post_obj = Post(post["id"], post["title"], post["subtitle"], post["body"]) | |
post_objects.append(post_obj) | |
app = Flask(__name__) | |
@app.route('/') | |
def get_all_posts(): | |
return render_template("index.html", all_posts=post_objects) | |
@app.route("/post/<int:index>") | |
def show_post(index): | |
requested_post = None | |
for blog_post in post_objects: | |
if blog_post.id == index: | |
requested_post = blog_post | |
return render_template("post.html", post=requested_post) | |
if __name__ == "__main__": | |
app.run(debug=True) |
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Title</title> | |
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet"> | |
<link rel="stylesheet" href="../static/css/styles.css"> | |
</head> | |
<body> | |
<div class="wrapper"> | |
<div class="top"> | |
<div class="title"><h1>My Blog</h1></div> | |
</div> | |
<div class="content"> | |
<div class="card"> | |
<h1> {{ post.title }}</h1> | |
<h2> {{ post.subtitle }}</h2> | |
<p> {{ post.body }}</p> | |
</div> | |
</div> | |
</div> | |
</body> | |
<footer> | |
<p>Made with ♥️ in London.</p> | |
</footer> | |
</html> |
class Post: | |
def __init__(self, post_id, title, subtitle, body): | |
self.id = post_id | |
self.title = title | |
self.subtitle = subtitle | |
self.body = body |
Much better thanks :)
You have two errors in the HTML:
{% for post in posts: %}
Remove the colon -> {% for post in posts %}
<a href="{{ url_for('get_post'), index=post['id'] }}">Read</a>
Move the closing bracket -> <a href="{{ url_for('get_post', index=post['id']) }}">Read</a>
Oh thank you very much!
Can't believe it was a such small mistake.
Thanks!
Hello everyone, please help I am stuck. My href in anchor tag of index.htm not working. It keep saying can not resolve file. I am unable to figure out a reason. I would really appreciate an early response thanks!
This is my Index.HTML
`
<title>Title</title>My Blog
<div class="content">
<div class="card">
{% for blog_posts in posts %}
{% if blog_posts["id"] ==1 %}
<h1>{{blog_posts["title"]}}</h1>
<h2>{{blog_posts["subtitle"]}}</h2>
<p class="text">Blog Post: {{blog_posts["id"]}}</p>
<a href="{{ url_for('get_blog_post', blog_id=blog_posts['id']) }}">Read</a>
{%endif%}
{%endfor%}
</div>
</div>
<div class="content">
<div class="card">
{%for blog_posts in posts %}
{% if blog_posts["id"] ==2 %}
<h1>{{blog_posts["title"]}}</h1>
<h2>{{blog_posts["subtitle"]}}</h2>
<p class="text">Blog Post: {{blog_posts["id"]}}</p>
<a href="{{ url_for('get_blog_post', blog_id=blog_posts['id']) }}">Read</a>
{%endif%}
{%endfor%}
</div>
</div>
Made with
This is my main.py
`from flask import Flask, render_template
import requests
app = Flask(name)
BLOG_URL = 'https://api.npoint.io/c790b4d5cab58020d391'
response = requests.get(BLOG_URL)
response.raise_for_status()
all_posts = response.json()
@app.route('/')
def home():
return render_template("index.html", posts=all_posts)
@app.route('/post/<blog_id>')
def get_blog_post(blog_id):
return render_template("post.html", blog_id=blog_id, posts=all_posts)
if name == "main":
app.run(debug=True)
`
My html is a little different because I decided to restructure it following the concept of semantic HTML.
main.py
from flask import Flask, render_template
from posts import POSTS
app = Flask(__name__)
@app.route('/post/<int:id>')
def get_post(id: int) -> str:
post = next(post for post in POSTS if post.id == id)
return render_template('post.html', post=post)
@app.route('/')
def home() -> str:
return render_template('index.html', posts=POSTS)
if __name__ == "__main__":
app.run(debug=True)
posts.py
from dataclasses import dataclass
import requests
@dataclass
class Post:
id: int
title: str
subtitle: str
body: str
def get_posts() -> list[Post]:
endpoint = 'https://api.npoint.io/c790b4d5cab58020d391'
try:
response = requests.get(endpoint)
response.raise_for_status()
except requests.RequestException:
return []
else:
return [Post(**post) for post in response.json()]
POSTS = get_posts()
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="Igor Ferreira">
<meta name="description"
content="Example of a blog homepage developed during Python bootcamp with instructor Angela Yu.">
<title>My blog</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="../static/styles/style.css">
</head>
<body>
<header>
<h1>My Blog</h1>
</header>
<main>
{% for post in posts: %}
<article class="post">
<h2 class="post-title">{{ post.title }}</h2>
<p class="post-content">{{ post.subtitle }}</p>
<a class="post-link" href="{{ url_for('get_post', id=post.id) }}">Read</a>
</article>
{% endfor %}
</main>
<footer>
<p>Developed during Python bootcamp with instructor Angela Yu.</p>
</footer>
</body>
</html>
post.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="Igor Ferreira">
<meta name="description" content="Example blog post developed during Python bootcamp with instructor Angela Yu.">
<title>Post</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="../static/styles/style.css">
</head>
<body>
<header>
<h1>My Blog</h1>
</header>
<main>
<article class="post">
<h2 class="post-title">{{ post.title }}</h2>
<p class="post-content">{{ post.body }}</p>
</article>
</main>
<footer>
<p>Developed during Python bootcamp with instructor Angela Yu.</p>
</footer>
</body>
</html>
Changed index.html
<a href="{{ url_for('show_post', title=post.title.replace(' ', '')) }}">Read</a>
and main.py
@app.route("/post/<title>")
def show_post(title):
requested_post = None
for blog_post in post_objects:
if blog_post.title.replace(" ", "") == title:
requested_post = blog_post
return render_template("post.html", post=requested_post)
Now url is more nicer instead of having just number on it
example "/post/Top15ThingstodoWhenYouareBored"
My "main.py" file
from flask import Flask, render_template
import requests
blog_url = "https://api.npoint.io/c790b4d5cab58020d391"
response = requests.get(blog_url)
all_posts = response.json()
app = Flask(__name__)
@app.route('/')
def home():
return render_template("index.html", posts=all_posts)
@app.route('/post/<int:num>')
def get_post(num):
posts_id = all_posts
requested_post = None
for blog_post in posts_id:
if blog_post['id'] == num:
requested_post = blog_post
return render_template("post.html", post=requested_post)
if __name__ == "__main__":
app.run(debug=True)
index. html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="title"><h1>My Blog</h1></div>
</div>
<div class="content">
{% for blog_post in posts: %}
<div class="card">
<h2>{{ blog_post.title }}</h2>
<h2>{{ blog_post.subtitle }}</h2>
<a href="{{ url_for('get_post', num=blog_post['id']) }}">Read</a>
</div>
{% endfor %}
</div>
</div>
</body>
<footer>
<p>Made with ♥️ in Ghana.</p>
</footer>
</html>
post.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="title"><h1>My Blog</h1></div>
</div>
<div class="content">
<div class="card">
<h2>{{ post.title }}</h2>
<p>{{ post.body }}</p>
</div>
</div>
</div>
</body>
<footer>
<p>Made with ♥️ in Ghana.</p>
</footer>
</html>
post.py
import requests
blog_get_url = "https://api.npoint.io/c790b4d5cab58020d391"
class Post:
def __init__(self):
self.all_posts_json = requests.get(blog_get_url).json()
def get_title(self, nr_of_blog):
return self.all_posts_json[nr_of_blog]["title"]
def get_subtitle(self, nr_of_blog):
return self.all_posts_json[nr_of_blog]["subtitle"]
def get_body(self, nr_of_blog):
return self.all_posts_json[nr_of_blog]["body"]
main.py
from flask import Flask, render_template
from post import Post
app = Flask(__name__)
post = Post()
@app.route('/')
def home():
return render_template("index.html", posts=post.all_posts_json)
@app.route('/post/<int:nr_of_post>')
def post_show(nr_of_post):
return render_template("post.html", post_title=post.get_title(nr_of_post),
post_subtitle=post.get_subtitle(nr_of_post),
post_body=post.get_body(nr_of_post))
if __name__ == "__main__":
app.run(debug=True)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="title"><h1>My Blog</h1></div>
</div>
{%for each_post in posts:%}
<div class="content">
<div class="card">
<h2>{{each_post["title"]}}</h2>
<p class="text">{{each_post["subtitle"]}} </p>
<a href="{{url_for('post_show', nr_of_post=each_post['id']-1)}}">Read</a>
</div>
</div>
{%endfor%}
</div>
</body>
<footer>
<p>Made with ♥️ in London.</p>
</footer>
</html>
post.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The Post</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="title"><h1>My Blog</h1></div>
</div>
<div class="content">
<div class="card">
<h1>{{post_title}}</h1>
<h2>{{post_subtitle}}</h2>
<p>{{post_body}}</p>
</div>
</div>
</div>
</body>
<footer>
<p>Made with ♥️ in London.</p>
</footer>
</html>
main.py
from flask import Flask, render_template
import requests
app = Flask(name)
@app.route('/blog')
def home():
res = requests.get('https://api.npoint.io/c790b4d5cab58020d391')
blogs = res.json()
return render_template("index.html", posts=blogs)
@app.route('/post/int:num')
def get_posts(num):
res = requests.get('https://api.npoint.io/c790b4d5cab58020d391')
blogs = res.json()
return render_template('post.html', posts=blogs, n=num)
if name == "main":
app.run(debug=True)
templates/index.html
<title>Title</title>My Blog
Made with
post.html
<title>Title</title>My Blog
{{ p['title'] }}
{{p['subtitle']}}
{{p['body']}}
{% endif %} {% endfor %}Made with
Thanks, i did it earlier and still get stuck. until i say your post and needed to call the post by index 0.
didnt think of that. and why is that? since there is only 1 value, why must we need to call by index ?
`from flask import Flask, render_template
import requests
app = Flask(name)
@app.route("/post/int:num")
def show_post(num):
blog_url = "https://api.npoint.io/a51100e2465836518b71"
blog_response = requests.get(url=blog_url)
blog_posts = blog_response.json()
for blog_post in blog_posts:
if blog_post['id'] == int(num):
post = blog_post
return render_template("post.html", post=post)
@app.route('/')
def home():
blog_url = "https://api.npoint.io/a51100e2465836518b71"
blog_response = requests.get(url=blog_url)
blog_posts = blog_response.json()
return render_template("index.html", blogs=blog_posts)
if name == "main":
app.run(debug=True)
`
`
<title>Title</title>My Blog
<div class="content">
<div class="card">
<h2>{{post['title']}}</h2>
<h2>{{post['subtitle']}}</h2>
<p>{{post['body']}}</p>
</div>
</div>
Made with
`
<title>Title</title>My Blog
<h2>{{blog['title']}}</h2>
<p class="text">{{blog['subtitle']}} </p>
<a href="{{url_for('show_post', num=blog['id'])}}">Read</a>
</div>
</div>
{% endfor %}
Made with
it seems that nobody used the post.py class
main.py
import requests
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
URL = "https://api.npoint.io/ff92afaab9a74c6246f9"
response = requests.get(URL)
data = response.json()
return render_template("index.html", data=data)
@app.route('/post/<int:get_id>')
def post(get_id):
URL = "https://api.npoint.io/ff92afaab9a74c6246f9"
response = requests.get(URL)
data = response.json()
show_data = []
for id_data in data:
if id_data["id"] == get_id:
show_data.append(id_data)
else:
pass
return render_template("post.html", show_data=show_data)
if __name__ == "__main__":
app.run(debug=True)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="title"><h1>My Blog</h1></div>
</div>
<div class="content">
{% for get_data in data %}
<div class="card">
<h2>{{ get_data["title"] }}</h2>
<p class="text">{{ get_data["subtitle"] }} </p>
<a href="{{ url_for('post', get_id=get_data['id']) }}">Read</a>
</div>
{% endfor %}
</div>
</div>
</body>
<footer>
<p>Made with ♥️ in London.</p>
</footer>
</html>
post.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="title"><h1>My Blog</h1></div>
</div>
<div class="content">
<div class="card">
<h1>{{ show_data[0]["title"] }}</h1>
<h2>{{ show_data[0]["subtitle"] }}</h2>
<p>{{ show_data[0]["body"] }}</p>
</div>
</div>
</div>
</body>
<footer>
<p>Made with ♥️ in London.</p>
</footer>
</html>
I wasn't sure what the use of the post.py class was either:
post.html:
<div class="wrapper">
<div class="top">
<div class="title">
{% set blog_num = (num - 1) %}
<h1>{{ posts[blog_num]["title"] }}</h1>
<p>page number: {{num}}</p>
</div>
</div>
<div class="content">
<div class="card">
<h2>{{ posts[blog_num]["title"] }}</h2>
<p>{{ posts[blog_num]["body"] }}</p>
</div>
</div>
</div>
relevant function in main.py:
@app.route('/blog/<int:num>')
def blog(num):
blog_yrl = "https://api.npoint.io/c790b4d5cab58020d391"
response = requests.get(blog_yrl)
all_posts = response.json()
print(num)
return render_template("post.html", posts=all_posts, num=num, blog_num=0)
My Solution almost identical to Angela's solution
#main.py
from flask import Flask, render_template
from post import Post
import requests
app = Flask(__name__)
response = requests.get('https://api.npoint.io/f79ef654f38310ae777a')
all_posts = response.json()
@app.route('/')
def home():
return render_template("index.html", blog_posts=all_posts)
@app.route('/post/<int:post_id>')
def post(post_id):
post_details = Post(title=all_posts[post_id - 1]['title'], subtitle=all_posts[post_id - 1]['subtitle'],
body=all_posts[post_id - 1]['body'])
return render_template("post.html", post=post_details)
if __name__ == "__main__":
app.run(debug=True)
#index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="title"><h1>My Blog</h1></div>
</div>
{% for post in blog_posts %}
<div class="content">
<div class="card">
<h2>{{ post.title }}</h2>
<p class="text">{{ post.subtitle }} </p>
<a href={{ url_for('post', post_id=post.id) }}>Read</a>
</div>
</div>
{% endfor %}
</div>
</body>
<footer>
<p>Made with ♥️ in London.</p>
</footer>
</html>
#post.py
class Post:
def __init__(self, title, subtitle, body, id=None):
self.title = title
self.subtitle = subtitle
self.body = body
#post.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="title">
<h1>My Blog</h1>
</div>
</div>
<div class="content">
<div class="card">
<h2>{{ post.title }}</h2>
<p>{{ post.body }}</p>
</div>
</div>
</div>
</body>
<footer>
<p>Made with ♥️ in London.</p>
</footer>
</html>
Hello everyone,
Here is my solution, I don't use classes.
main.py
from flask import Flask, render_template
import requests
app = Flask(__name__)
@app.route('/')
def home():
url_blog = "https://api.npoint.io/c790b4d5cab58020d391"
blog_response = requests.get(url=url_blog)
all_posts = blog_response.json()
return render_template("index.html", posts=all_posts)
@app.route('/post/<int:id_no>')
def blog_posts(id_no):
url_blog = "https://api.npoint.io/c790b4d5cab58020d391"
blog_response = requests.get(url=url_blog)
all_posts = blog_response.json()[id_no]
return render_template("post.html", posts=all_posts, blog_id=id_no)
if __name__ == "__main__":
app.run(debug=True)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="title"><h1>My Blog</h1></div>
</div>
{% for blog_posts in posts %}
<div class="content">
<div class="card">
<h2>{{blog_posts["title"]}}</h2>
<p class="text">{{blog_posts["subtitle"]}} </p>
<a href="post\{{blog_posts['id']-1}}">Read</a>
</div>
</div>
{% endfor %}
</div>
</body>
<footer>
<p>Made with ♥️ in London.</p>
</footer>
</html>
post.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="title"><h1>My Blog</h1></div>
</div>
<div class="content">
<div class="card">
<h2>{{posts["title"]}}</h2>
<p>{{posts["subtitle"]}}</p>
<p>{{posts["body"]}}</p>
</div>
</div>
</div>
</body>
<footer>
<p>Made with ♥️ in London.</p>
</footer>
</html>
Here is my Solution. Please leave any comments or suggestions to improve my skills. Thanks.
main.py
from flask import Flask, render_template
from post import Post
post_d = Post()
app = Flask(name)
@app.route('/')
def home():
return render_template("homepage.html")
@app.route('/blog')
def all_blogs():
return render_template("index.html", blog_id = post_d.id, blog_title=post_d.title, blog_subtitle = post_d.subtitle, length=len(post_d.id))
@app.route('/blog/')
def full_post(num):
return render_template("posts.html", blog_id=int(num), blog_body=post_d.body, blog_title=post_d.title, blog_subtitle = post_d.subtitle, length=len(post_d.id))
if name == "main":
app.run(debug=True)
post.py
import requests
class Post:
def init(self):
self.id = []
self.title = []
self.subtitle = []
self.body = []
blog_response = requests.get(url="https://api.npoint.io/f45dc77976c248d5f60f")
data = blog_response.json()
for post in data:
self.id.append(post["id"])
self.title.append(post["title"])
self.subtitle.append(post["subtitle"])
self.body.append(post["body"])
# return self.id, self.title, self.subtitle, self.body
index.html
<title>My BLog Site</title>My Blog
<div class="content">
{% for i in range(length) %}
<div class="card">
<h2>{{blog_title[i]}}</h2>
<p class="text">{{blog_subtitle[i]}}</p>
<a href="blog/{{blog_id[i]}}">Full Post</a>
</div>
{% endfor %}
</div>
Made with
posts.html
import requests
class Post:
def init(self):
self.id = []
self.title = []
self.subtitle = []
self.body = []
blog_response = requests.get(url="https://api.npoint.io/f45dc77976c248d5f60f")
data = blog_response.json()
for post in data:
self.id.append(post["id"])
self.title.append(post["title"])
self.subtitle.append(post["subtitle"])
self.body.append(post["body"])
# return self.id, self.title, self.subtitle, self.body
Here is my Solution:
main.py
`from flask import Flask, render_template
import requests
app = Flask(__name__)
@app.route('/')
def home():
blog_url = "https://api.npoint.io/c790b4d5cab58020d391"
response = requests.get(blog_url)
all_posts = response.json()
print(all_posts)
return render_template("index.html", posts=all_posts)
@app.route('/post/<int:blog_id>')
def show_post(blog_id):
blog_url = "https://api.npoint.io/c790b4d5cab58020d391"
response = requests.get(blog_url)
all_posts = response.json()
blog_post = all_posts[blog_id - 1]
return render_template("post.html", posts=blog_post)
if __name__ == "__main__":
app.run(debug=True)
`
post.py
class Post:
def __init__(self, title, subtitle, body):
self.title = title
self.subtitle = subtitle
self.body = body
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="title"><h1>My Blog</h1></div>
</div>
<div class="content">
{% for blog_post in posts %}
{% if blog_post["id"] == 1 %}
<div class="card">
<h2>{{ blog_post["title"] }}</h2>
<p class="text">{{ blog_post["subtitle"] }}</p>
<a class="read" href="/post/{{ blog_post['id'] }}">Read</a>
</div>
{% endif %}
{% endfor %}
</div>
</div>
<div class="content">
{% for blog_post in posts %}
{% if blog_post["id"] == 2 %}
<div class="card">
<h2>{{ blog_post["title"] }}</h2>
<p class="text">{{ blog_post["subtitle"] }}</p>
<a class="read" href="/post/{{ blog_post['id'] }}">Read</a>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</body>
<footer>
<p>Made with ♥️ in Seville.</p>
</footer>
</html>
post.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="title"><h1>My Blog</h1></div>
</div>
<div class="content">
<div class="card">
<h2>{{ posts["title"] }}</h2>
<p>{{ posts["body"] }}</p>
</div>
</div>
</div>
</body>
<footer>
<p>Made with ♥️ in Seville.</p>
</footer>
</html>
The challenge can be completed without including the Post class instance:
main.py
import requests
from flask import Flask, render_template
app = Flask(__name__)
blogs = requests.get("https://api.npoint.io/c790b4d5cab58020d391").json()
@app.route('/')
def home():
return render_template("index.html", blogs=blogs)
@app.route("/post/<num>")
def invl_blog(num):
num = int(num)
if num == 1:
blog_title = blogs[0]["title"]
blog_subtitle = blogs[0]["subtitle"]
blog_body = blogs[0]["body"]
elif num == 2:
blog_title = blogs[1]["title"]
blog_subtitle = blogs[1]["subtitle"]
blog_body = blogs[1]["body"]
else:
blog_title = blogs[2]["title"]
blog_subtitle = blogs[2]["subtitle"]
blog_body = blogs[2]["body"]
return render_template("post.html", blog_title=blog_title, blog_subtitle=blog_subtitle, blog_body=blog_body)
if __name__ == "__main__":
app.run(debug=True)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="title"><h1>My Blog</h1></div>
</div>
<div class="content">
<div class="card">
<h2>{{ blogs[0]["title"] }}</h2>
<p class="text">{{ blogs[0]["subtitle"] }}</p>
<a href="{{ url_for('invl_blog', num=1) }}">Read</a>
</div>
</div>
<div class="content">
<div class="card">
<h2>{{ blogs[1]["title"] }}</h2>
<p class="text">{{ blogs[1]["subtitle"] }}</p>
<a href="{{ url_for('invl_blog', num=2) }}">Read</a>
</div>
</div>
<div class="content">
<div class="card">
<h2>{{ blogs[2]["title"] }}</h2>
<p class="text">{{ blogs[2]["subtitle"] }}</p>
<a href="{{ url_for('invl_blog', num=3) }}">Read</a>
</div>
</div>
</div>
</body>
<footer>
<p>© Blog Website, 2023</p>
</footer>
</html>
post.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="title"><h1>My Blog</h1></div>
</div>
<div class="content">
<div class="card">
<h1>{{ blog_title }}</h1>
<h2>{{ blog_subtitle }}</h2>
<p>{{ blog_body }}</p>
</div>
</div>
</div>
</body>
<footer>
<p>© Blog Website, 2023</p>
</footer>
</html>
from datetime import datetime
from flask import Flask, render_template
from markupsafe import escape
import requests
from post import Post
genderize_endpoint = 'https://api.genderize.io'
agify_endpoint = 'https://api.agify.io'
blog_fake_endpoint = 'https://api.npoint.io/c790b4d5cab58020d391'
def guess_gender(name):
params = {
'name': name
}
response = requests.get(genderize_endpoint, params)
response.raise_for_status()
return response.json()['gender']
def guess_age(name):
params = {
'name': name
}
response = requests.get(agify_endpoint, params)
response.raise_for_status()
return response.json()['age']
app = Flask(__name__)
@app.route('/')
def home():
year = datetime.now().year
return render_template('dynamic_copyright_year.html', year=year)
@app.route('/guess/<name>')
def guess(name):
name = escape(name)
gender = guess_gender(name)
age = guess_age(name)
return render_template('guess_gender_age.html', name=name, gender=gender, age=age)
@app.route('/blog')
@app.route('/blog/<int:id>')
def blog(id=None):
response = requests.get(blog_fake_endpoint)
response.raise_for_status()
posts = []
for post_dict in response.json():
posts.append(Post(**post_dict)) # ** for dictionary unpacking
print(posts)
if id:
return render_template('post.html', post=posts[id - 1])
return render_template('blog.html', posts=posts)
if __name__ == '__main__':
app.run(debug=True)
main.py
# Importing required libraries
from flask import Flask, render_template
import requests
# Initializing the Flask app
app = Flask(__name__)
# API endpoint for the blog data
blog_url = "https://api.npoint.io/fd95eb762b80ce502a4f"
# Fetching the blog data from the API
response = requests.get(blog_url)
all_posts = response.json()
# Home route to display all blog posts
@app.route('/')
def home():
return render_template("index.html", posts=all_posts)
# Route to display a specific blog post by its ID
@app.route('/post/<int:num>')
def get_blog(num):
return render_template("post.html", posts=all_posts, id=num)
# Running the Flask app in debug mode
if __name__ == "__main__":
app.run(debug=True)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="title"><h1>My Blog</h1></div>
</div>
{% for blog_post in posts: %}
<div class="content">
<div class="card">
<h2>{{ blog_post["title"] }}</h2>
<p class="text">{{ blog_post["subtitle"] }} </p>
<a href="{{url_for('get_blog', num=blog_post['id'])}}">Read</a>
</div>
</div>
{% endfor %}
</div>
</body>
<footer>
<p>Made with ♥️ in Nigeria.</p>
</footer>
</html>
post.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="title"><h1>My Blog</h1></div>
</div>
{% for blog_post in posts: %}
{% if id == blog_post["id"]: %}
<div class="content">
<div class="card">
<h2>{{ blog_post["title"] }}</h2>
<h1>{{ blog_post["subtitle"] }}</h1>
<p>{{ blog_post["body"] }}</p>
</div>
</div>
{% endif %}
{% endfor %}
</div>
</body>
<footer>
<p>Made with ♥️ in Nigeria.</p>
</footer>
</html>
I completed the challenge without including the Post class instance </> ☝️
i am having an issue where when i click on "Read", it is going to the post/1 or post/2 page, which is formatted, but none of the content (title or body) is appearing, and am pulling my hair out. Can anybody see where my issues are?:
MAIN.PY:
from flask import Flask, render_template
import requests
app = Flask(__name__)
blog_posts = requests.get("https://api.npoint.io/4370451396b51eb95e0a").json()
@app.route('/')
def home():
return render_template("index.html", posts=blog_posts)
@app.route("/post/<int:num>")
def get_post(num):
return render_template("post.html", post=blog_posts, ID=num)
if __name__ == "__main__":
app.run()
INDEX.HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="title"><h1>My Blog</h1></div>
</div>
{% for post in posts: %}
<div class="content">
<div class="card">
<h2>{{ post['title'] }}</h2>
<p class="text">{{ post['subtitle'] }}</p>
<a href="{{ url_for('get_post', num=post['id']) }}">Read</a>
</div>
</div>
{% endfor %}
</div>
</body>
<footer>
</footer>
</html>
POST.HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="title"><h1>My Blog</h1></div>
</div>
{% for post in posts %}
{% if post["id"] == ID %}
<div class="content">
<div class="card">
<h2>{{post["title"]}}</h2>
<p>{{post["body"]}}</p>
</div>
</div>
{% endif %}
{% endfor %}
</div>
</body>
<footer>
</footer>
</html>
@Storka72
In your post route your have: return render_template("post.html", post=blog_posts, ID=num)
In your post.html you have: {% for post in posts %}
, but you are not passing a "posts" parameter to that page!
NEAT Code Without any Torchers and If statements and EASY to Understand
from flask import Flask, render_template
import requests
api_endpoint = "https://api.npoint.io/c790b4d5cab58020d391"
api = requests.get(api_endpoint)
api_json_data = api.json()
app = Flask(__name__)
@app.route("/")
def flask_1():
return render_template("index.html", json_data=api_json_data)
@app.route("/read/<num>")
def flask_2(num):
num = int(num) - 1
return render_template("post.html", json_data=api_json_data, id_num=num)
if __name__ == "__main__":
app.run(debug=True)
#Index.HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="title"><h1>My Blog</h1></div>
</div>
{% for x in json_data: %}
<div class="content">
<div class="card">
<h2> {{x["title"]}} </h2>
<h3> {{x["subtitle"] }}</h3>
<a href="{{url_for('flask_2', num=x['id'])}}">Read</a>
</div>
</div>
{% endfor %}
</div>
</body>
<footer>
<p>Made with ♥️ in London.</p>
</footer>
</html>
#Post.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="title"><h1>My Blog</h1></div>
</div>
<div class="content">
<div class="card">
<h1>{{json_data[id_num]["title"]}}</h1>
<h2>{{json_data[id_num]["body"]}}</h2>
</div>
</div>
</div>
</body>
<footer>
<p>Made with ♥ in London.</p>
</footer>
</html>
Using index to get the post item
I think its more accurrate
#main.py
class Post:
def init(self, id, title, subtitle, body):
self.id = id - 1
self.title = title
self.subtitle = subtitle
self.body = body
#Post.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="title"><h1>The Fake Blog</h1></div>
</div>
<div class="content">
<div class="card">
<h2>{{posts[num].title}}</h2>
<h3>{{posts[num].subtitle}}</h3>
<p>{{posts[num].body}}</p>
</div>
</div>
</div>
</body>
<footer>
<p>Made with ♥️ in Mexico.</p>
</footer>
</html>
main.py
`from flask import Flask, render_template
from post import Post
app = Flask(__name__)
@app.route('/')
def home():
posts = Post()
all_blogs = posts.get_post()
return render_template("index.html", posts=all_blogs)
@app.route("/post/<int:number>")
def get_blog(number):
posts = Post()
all_blogs = posts.get_post()
return render_template("post.html", posts=all_blogs, num=number)
if __name__ == "__main__":
app.run(debug=True)`
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="title"><h1>My Blog</h1></div>
</div>
<div class="content">
<div class="card">
<h2>{{ posts[0]["title"] }}</h2>
<p class="text">{{ posts[0]["subtitle"] }} </p>
<a href="{{ url_for('get_blog', number=1) }}">Read</a>
</div>
</div>
<div class="content">
<div class="card">
<h2>{{ posts[1]["title"] }}</h2>
<p class="text">{{ posts[1]["subtitle"] }} </p>
<a href="{{ url_for('get_blog', number=2) }}">Read</a>
</div>
</div>
</div>
</body>
<footer>
<p>Made with ♥️ in India.</p>
</footer>
</html>
Post.py
import requests
BLOG_URL = "https://api.npoint.io/c10781c59f247ee64d13"
class Post:
def get_post(self, index=None):
response = requests.get(BLOG_URL)
all_posts = response.json()
if index is not None:
return [all_posts[index]]
return all_posts
Post.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="title"><h1>My Blog</h1></div>
</div>
<div class="content">
<div class="card">
<h1>{{ posts[num-1]["title"] }}</h1>
<h2>{{ posts[num-1]["subtitle"] }}</h2>
<p>{{ posts[num-1]["body"] }}</p>
</div>
</div>
</div>
</body>
<footer>
<p>Made with ♥️ in India.</p>
</footer>
</html>
it is way easier without introducing the post.py Class.
from flask import Flask, render_template
import requests
response = requests.get("https://api.npoint.io/c790b4d5cab58020d391")
info = response.json()
all_blogs = []
for blog in info:
all_blogs.append(blog)
app = Flask(name)
@app.route('/')
def home():
return render_template("index.html", blogs=all_blogs)
@app.route('/post/int:index')
def the_blog(index):
requested_post = None
for blogs in all_blogs:
if blogs["id"] == index:
requested_post = blogs
print(requested_post)
return render_template("post.html", post=requested_post)
if name == "main":
app.run(debug=True)
I have completed this task without writing anything in post.py file.
Here are my files,
main.py
import requests
from flask import Flask, render_template
app = Flask(name)
@app.route('/blog')
def home():
blog_url = 'https://api.npoint.io/c790b4d5cab58020d391'
r = requests.get(blog_url)
blogs = r.json()
return render_template("index.html", blogs=blogs)
@app.route("/post/int:id")
def blog_post(id):
blog_url = 'https://api.npoint.io/c790b4d5cab58020d391'
r = requests.get(blog_url)
blog = r.json()
return render_template('post.html', id=id, blog=blog)
if name == "main":
app.run(debug=True)
index.html
<title>Title</title>My Blog
Made with
post.html
<title>Title</title>My Blog
{{ blog[id-1]["title"] }}
{{ blog[id-1]["body"] }}
</div>
Made with
I think for sake of this project making a class of Post was not necessary instead I used a python list and in html with jinja I was able to use it as python list
- post.py
import requests
from pprint import pprint
N_P0INT_API = "https://api.npoint.io/c790b4d5cab58020d391"
class Post:
def __init__(self):
response = requests.get(url=N_P0INT_API)
self.data = response.json()
def display(self):
"""Display data content"""
pprint(self.data)
def get_all(self):
"""Return all posts"""
return self.data
def get_by_id(self, post_id):
"""Return only one post by ID
post_id : the ID of the post tou fetch
"""
for post in self.data:
if int(post_id) == post['id']:
return post
- main.py
from flask import Flask, render_template
from post import Post
post = ""
app = Flask(__name__)
@app.route('/')
def blog_endpoint():
return render_template("index.html", all_posts=post.get_all())
@app.route('/post/<post_id>')
def post_endpoint(post_id):
return render_template("post.html", post=post.get_by_id(post_id=post_id))
if __name__ == "__main__":
post = Post()
app.run(debug=True)
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="title"><h1>My Blog</h1></div>
</div>
{% for post in all_posts %}
<div class="content">
<div class="card">
<h2>{{ post['title'] }}</h2>
<p class="text">{{ post['subtitle'] }}</p>
<a href="{{ url_for('post_endpoint', post_id=post['id'] )}}">Read</a>
</div>
</div>
{% endfor %}
</div>
</body>
<footer>
<p>Made with ♥️ in Seoul.</p>
</footer>
</html>
- post.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="title"><h1>My Blog</h1></div>
</div>
<div class="content">
<div class="card">
<h1>{{ post['title'] }}</h1>
<h2>{{ post['subtitle'] }}</h2>
<p>{{ post['body'] }}</p>
</div>
</div>
</div>
</body>
<footer>
<p>Made with ♥️ in Seoul.</p>
</footer>
</html>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="title"><h1>My Blog</h1></div>
</div>
<div class="content">
<div class="card">
<h2>Just a blog post</h2>
<p class="text">Lorem ipsum dolor sit </p>
<a href="/post/1">Read</a>
</div>
</div>
<div class="content">
<div class="card">
<h2>Another blog post</h2>
<p class="text">Lorem ipsum dolor sit </p>
<a href="/post/2">Read</a>
</div>
</div>
</div>
</body>
<footer>
<p>Made with ♥️ in London.</p>
</footer>
</html>
post.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="title"><h1>My Blog</h1></div>
</div>
<div class="content">
<div class="card">
<h2>{{dict[number-1]["title"]}}</h2>
<p>{{dict[number-1]["body"]}}</p>
</div>
</div>
</div>
</body>
<footer>
<p>Made with ♥️ in London.</p>
</footer>
</html>
main.py
from flask import Flask, render_template
import requests
app = Flask(__name__)
@app.route('/')
def home():
return render_template("index.html")
@app.route('/post/<int:number>')
def post(number):
response = requests.get("https://api.npoint.io/7bdc6259ad459120c0cb")
return render_template("post.html", number=number, dict=response.json())
if __name__ == "__main__":
app.run(debug=True)
post.py
class Post:
pass
main.py
from flask import Flask, render_template
import requests
requests=requests
blog_URL='https://api.npoint.io/c790b4d5cab58020d391'
app = Flask(name)
@app.route('/')
def home():
all_post=requests.get(url=blog_URL).json()
return render_template("index.html",posts=all_post)
@app.route('/post/int:id')
def get_post(id):
all_post = requests.get(url=blog_URL).json()
return render_template("post.html", posts=all_post,id=id)
if name == "main":
app.run(debug=True)
index.html
<title>Title</title>My Blog
Made with
post.html
<title>Title</title>My Blog
{{post["title"]}}
{{post["body"]}}
{% endif %} {% endfor %}</div>
Made with
main.py
from flask import Flask, render_template
from post import Post
app = Flask(__name__)
@app.route('/')
def home():
blogs = Post()
return render_template("index.html", posts=blogs.posts)
@app.route('/post/<int:id>')
def get_post(id):
blogs = Post()
post = blogs.get_post(id)
return render_template("post.html", title=post['title'], body=post['body'])
if __name__ == "__main__":
app.run(debug=True)
post.py
import requests
class Post:
def __init__(self):
blog_url = "https://api.npoint.io/c790b4d5cab58020d391"
req = requests.get(blog_url)
all_posts = req.json()
self.posts = all_posts
def get_post(self, id):
for post in self.posts:
if post['id'] == id:
return post
index.html
{% for post in posts: %}
<div class="content">
<div class="card">
<h2>{{ post['title'] }}</h2>
<p class="text">{{ post['subtitle'] }}</p>
<a href="{{ url_for('get_post', id=post['id'])}}">Read</a>
</div>
</div>
{% endfor %}
post.html
<div class="content">
<div class="card">
<h2>{{ title }}</h2>
<p>{{ body }}</p>
</div>
</div>
main.py
from flask import Flask, render_template from post import Post app = Flask(__name__) @app.route('/') def home(): blogs = Post() return render_template("index.html", posts=blogs.posts) @app.route('/post/<int:id>') def get_post(id): blogs = Post() post = blogs.get_post(id) return render_template("post.html", title=post['title'], body=post['body']) if __name__ == "__main__": app.run(debug=True)post.py
import requests class Post: def __init__(self): blog_url = "https://api.npoint.io/c790b4d5cab58020d391" req = requests.get(blog_url) all_posts = req.json() self.posts = all_posts def get_post(self, id): for post in self.posts: if post['id'] == id: return postindex.html
{% for post in posts: %} <div class="content"> <div class="card"> <h2>{{ post['title'] }}</h2> <p class="text">{{ post['subtitle'] }}</p> <a href="{{ url_for('get_post', id=post['id'])}}">Read</a> </div> </div> {% endfor %}
post.html
<div class="content"> <div class="card"> <h2>{{ title }}</h2> <p>{{ body }}</p> </div> </div>
This is exactly what I was trying to do.
Thanks. Nice Algorithm
### main.py
from flask import Flask, render_template
from post import Post
app = Flask(name)
c_post = Post()
@app.route('/')
def home():
posts = c_post.all_blog_post()
return render_template("index.html", posts=posts)
@app.route('/post/int:blog_id')
def read_blog(blog_id):
blog_post = c_post.ind_post(blog_id)
return render_template("post.html", blog_post=blog_post)
if name == "main":
app.run(debug=True)
### post.py
import requests
class Post:
def init(self):
self.posts = []
def all_blog_post(self):
url = "https://api.npoint.io/c790b4d5cab58020d391"
self.posts = requests.get(url).json()
return self.posts
def ind_post(self, post_id):
all_post_details = self.all_blog_post()
post = []
for p in all_post_details:
if p["id"] == post_id:
post.append(p)
return post
index.html
<title>Title</title>My Blog
Made with
post.html
<title>Title</title>My Blog
{{ blog_post[0]['title'] }}
{{ blog_post[0]['subtitle'] }}
{{ blog_post[0]['body'] }}
</div>
Made with
In main.py use your own url, as the solution url is incorrect and will give error.
Thanks, the solution code didn't work at first and was giving an error but after prining the posts, print(posts), I realised it has a different data than in the tutorial, so I changed your solution's URL with my url and it worked.
I had this challenge to use as less code in html as possible. But now realised the purpose of this challenge was to practice jinja :D so I am going to write it again using more jinja and also I like the way she used her post.py so am going to do it that way.
main.py
from flask import Flask, render_template
from post import Post
post = Post()
blog_title = post.get_data("title")
blog_subtitle = post.get_data("subtitle")
blog_body = post.get_data("body")
blog_id = post.get_data("id")
blogs_qty = len(blog_id)
print(blogs_qty)
app = Flask(__name__)
@app.route('/')
def home():
return render_template("index.html", title=blog_title, subtitle=blog_subtitle, blogs=blogs_qty)
@app.route('/post/<num>')
def blog_post(num): # (num) is a string when it comes from url_for() of Jinja from index.html
number = int(num) - 1
return render_template("post.html", title=blog_title[number],
subtitle=blog_subtitle[number], body=blog_body[number],
id=blog_id[number])
if __name__ == "__main__":
app.run(debug=True)
post.py
import requests
class Post:
def __init__(self):
response = requests.get("https://api.npoint.io/ec033ad7c14afde7ce19")
response.raise_for_status()
self.data = response.json()
def get_data(self, enq):
data_enquiry = [post[enq] for post in self.data]
return data_enquiry
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Blog</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="title"><h1>My Blog</h1></div>
</div>
{% for post in range(blogs) %}
<div class="content">
<div class="card">
<h2>{{ title[0 + post] }}</h2>
<p class="text">{{ subtitle[0 + post] }} </p>
<a href="{{ url_for('blog_post', num=1+post) }}">Read</a> <!-- num=1 is a string -->
</div>
</div>
{% endfor %}
</div>
</body>
<footer>
<p>Made with ♥️ in London.</p>
</footer>
</html>
post.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Blog {{ id }}</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="title"><h1>My Blog {{ id }}</h1></div>
</div>
<div class="content">
<div class="card">
<h1>{{ title }}</h1>
<h2>{{ subtitle }}</h2>
<p> {{ body }}</p>
</div>
</div>
</div>
</body>
<footer>
<p>Made with ♥️ in London.</p>
</footer>
</html>
I made it a bit different, is it ok?
main.py
from flask import Flask, render_template
from post import Post
app = Flask(__name__)
@app.route('/')
def home():
post = Post()
return render_template("index.html", Post=post)
@app.route('/post/<n>')
def blog(n):
post = Post()
return render_template('post.html', n=n, Post=post)
if __name__ == "__main__":
app.run(debug=True)
post.py
import requests
class Post:
def __init__(self, url='https://api.npoint.io/c790b4d5cab58020d391'):
self.url = url
response = requests.get(self.url)
self.data = response.json()
def title(self, id_):
id_ = int(id_)
for article in self.data:
if article['id'] == id_:
return article['title']
def subtitle(self, id_: int):
id_ = int(id_)
for article in self.data:
if article['id'] == id_:
return article['subtitle']
def body(self, id_: int):
id_ = int(id_)
for article in self.data:
if article['id'] == id_:
return article['body']
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PaninoBlog</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="title"><h1>My Blog</h1></div>
</div>
<div class="content">
<div class="card">
<h2>{{ Post.title(id_=1) }}</h2>
<p class="text">{{ Post.subtitle(id_=1) }}</p>
<a href="http://127.0.0.1:5000/post/1">Read</a>
</div>
</div>
<div class="content">
<div class="card">
<h2>{{ Post.title(id_=2) }}</h2>
<p class="text">{{ Post.subtitle(id_=2) }}</p>
<a href="http://127.0.0.1:5000/post/2">Read</a>
</div>
</div>
</div>
</body>
<footer>
<p>Made with ♥️ in Aosta.</p>
</footer>
</html>
post.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PaninoBlog</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="title"><h1>My Blog</h1></div>
</div>
<div class="content">
<div class="card">
<h2 style="font-weight:bold">{{ Post.title(id_=n) }}</h2>
<h3 style="font-weight:normal">{{ Post.subtitle(id_=n) }}</h3>
<p>{{ Post.body(id_=n) }}</p>
</div>
</div>
</div>
</body>
<footer>
<p>Made with ♥️ in Aosta.</p>
</footer>
</html>
Here is my solution. This also handles the IndexOfRanged error if the blog_id is not found and helps prevent unnecessary API requests .
main.py
from flask import Flask, render_template
import requests
URL = "https://api.npoint.io/c790b4d5cab58020d391"
all_posts = []
def get_all_posts():
response = requests.get(URL)
response.raise_for_status()
data = response.json()
for post in data:
all_posts.append(post)
app = Flask(__name__)
@app.route('/')
def home():
if not all_posts:
get_all_posts()
return render_template("index.html", all_posts=all_posts)
@app.route('/post/<int:post_id>')
def get_post(post_id):
if not all_posts:
get_all_posts()
try:
post = [post for post in all_posts if post['id'] == post_id][0]
except IndexError:
post = []
print(f"Not found id: {post_id}")
pass
return render_template("post.html", post=post)
if __name__ == "__main__":
app.run(debug=True)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="title"><h1>My Blog</h1></div>
</div>
{% for post in all_posts %}
<div class="content">
<div class="card">
<h2>{{ post.title }}</h2>
<p class="text">{{ post.subtitle }}</p>
<a href="{{ url_for('get_post', post_id=post.id) }}">Read</a>
</div>
</div>
{% endfor %}
</div>
</body>
<footer>
<p>Made with ♥️ in London.</p>
</footer>
</html>
post.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="../static/css/styles.css">
</head>
<body>
<div class="wrapper">
<div class="top">
<div class="title"><h1>My Blog</h1></div>
</div>
<div class="content">
<div class="card">
{% if post %}
<h2>{{ post.title }}</h2>
<p>{{ post.body }}</p>
{% else %}
<div>No data found.</div>
{% endif %}
</div>
</div>
</div>
</body>
<footer>
<p>Made with ♥️ in London.</p>
</footer>
</html>
This is my solution, I used only one HTML file to render all blogs or one blog details by using if condition in HTML file:
server.py
from flask import Flask, render_template, url_for
import requests
app = Flask(__name__)
url = "https://api.npoint.io/5956e24d0b30106f8263"
response = requests.get(url=url)
response.raise_for_status()
blogs = response.json()
@app.route("/")
def blog_page():
return render_template("blog.html", blogs=blogs)
@app.route("/blog/<int:blog_id>")
def show_blog(blog_id):
index = blog_id - 1
print(blog_id)
return render_template("blog.html", blog=blogs[index],
blog_id=blog_id)
if __name__ == "__main__":
app.run(debug=True)
blog.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Blogs</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<div class="header">
<h1>Blogs</h1>
</div>
<div class="container">
{% if blog_id %}
<div class="card">
<h2>{{blog["title"]}}</h2>
<h4>{{blog["subtitle"]}}</h4>
<p>{{blog["body"]}}</p>
</div>
{% else %}
{% for blog in blogs %}
<div class="card">
<h2>{{blog.title}}</h2>
<h4>{{blog.subtitle}}</h4>
<a href="{{ url_for('show_blog', blog_id=blog.id) }}">Read</a>
</div>
{% endfor %}
{% endif %}
</div>
</body>
</html>
Thanks for that. I didnt notice.
As I wrote, the error has something to do with the "get_post" function and the href at the index.html.
Thanks for your help!
This is my main.py: