-
-
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 |
d-madiou
commented
Nov 27, 2024
via email
The screen displays 3 cards with the following content:
`
{{ post.title }}
{{ post.subtitle }}
{{ post.body }}
`
from flask import Flask, render_template
import requests
app = Flask(name)
blog_url = 'https://api.npoint.io/c790b4d5cab58020d391'
all_posts = requests.get(url=blog_url).json()
@app.route('/')
def home():
return render_template(template_name_or_list='index.html', posts=all_posts)
@app.route('/post/')
def post(num):
print(all_posts)
filtered_posts = [post for post in all_posts if str(post['id']) == num]
print(filtered_posts)
return render_template(template_name_or_list='post.html', posts=filtered_posts)
if name == "main":
app.run(debug=True)
****
server.py
import requests
from flask import Flask, render_template
app = Flask(name)
@app.route('/')
def home():
blog_url = 'https://api.npoint.io/c790b4d5cab58020d391'
response = requests.get(blog_url)
all_posts = response.json()
return render_template("index.html",posts = all_posts)
@app.route('/blog/')
def get_post(num):
blog_url = 'https://api.npoint.io/c790b4d5cab58020d391'
response = requests.get(blog_url)
all_posts = response.json()
return render_template("post.html", posts=all_posts,number = int(num))
if name == "main":
app.run(debug=True)
index.html
<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>
Made with
post.html
My Blog
<div class="content">
<div class="card">
<h2>{{posts[number-1]["title"]}}</h2>
<p>{{posts[number-1]["body"]}}</p>
</div>
</div>
Made with
Mine as below
main.py
from flask import Flask
from post import Post
app = Flask(__name__)
post = Post()
@app.route('/')
def home():
return post.home()
@app.route('/post/<int:blog_id>')
def get_post(blog_id):
return post.render(blog_id)
if __name__ == "__main__":
app.run(debug=True)
post.py
import requests
from flask import render_template
class Post:
def __init__(self):
self.blog_url = "https://api.npoint.io/c790b4d5cab58020d391"
self.blog_data = self.all_posts()
def render(self, blog_id):
for blog in self.blog_data:
if blog['id'] == blog_id:
return render_template("post.html", **blog)
def all_posts(self):
return requests.get(self.blog_url).json()
def home(self):
return render_template("index.html", blogs=self.blog_data)
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 in blogs %}
<div class="content">
<div class="card">
<h2>{{blog['title']}}</h2>
<p class="text">{{blog['subtitle']}}</p>
<a href="{{ url_for('get_post', blog_id=blog['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>{{ title }}</h1>
<h2>{{ subtitle }}</h2>
<p>{{ body }}</p>
<div class="back">
<a href="{{ url_for('home') }}">Home</a>
</div>
</div>
</div>
</div>
</body>
<footer>
<p>Made with ♥️ in London.</p>
</footer>
</html>
I got stuck a bit I tried to use an if in the blog template to get the post id to match the post id passed thought the URL...
couldn't get it to work. Peeked at the sollution which imports posts but that was not addressed yet and there had to be an other way... ended up with the following and working:
main.py
from flask import Flask, render_template
import requests
app = Flask(__name__)
def get_blog():
blog_url = "https://api.npoint.io/c790b4d5cab58020d391"
blog_response = requests.get(blog_url)
all_posts = blog_response.json()
return all_posts
@app.route('/')
def home():
return render_template("index.html", posts=get_blog())
@app.route('/post/<blog_id>')
def post(blog_id):
blog_entry=get_blog()[(int(blog_id) - 1)]
return render_template("post.html", post=blog_entry)
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('post', blog_id=blog_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>{{ post['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>
I did not use the post.py file, I took a simpler route for me:
main.py
import requests
app = Flask(__name__)
blog_posts = requests.get("https://api.npoint.io/c790b4d5cab58020d391").json()
@app.route('/')
def home():
return render_template("index.html", blog=blog_posts)
@app.route('/post/<id>')
def get_post(id):
adjusted_id = int(id) -1
post = blog_posts[adjusted_id]
return render_template("post.html", post=post)
index.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: %}
<div class="content">
<div class="card">
<h2>{{post["title"]}}t</h2>
<p class="text">{{post["subtitle"]}} </p>
<a href="{{ url_for('get_post', id=post['id'])}}">Read</a>
</div>
</div>
{% endfor %}
</div>
</body>
<footer>
<p>Made with ♥️ in London.</p>
</footer>
post.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>
main.py
from flask import Flask, render_template
import requests
app = Flask(__name__)
posts = requests.get("http://api.npoint.io/c790b4d5cab58020d391").json()
@app.route('/')
def home():
return render_template("index.html", posts=posts)
@app.route('/post/<int:post_id>')
def get_posts(post_id):
return render_template("post.html", posts=posts, id=post_id)
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 posts %}
<div class="content">
<div class="card">
<h2>{{ post["title"] }}</h2>
<p class="text">{{ post["subtitle"] }}</p>
<a href="post/{{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">
{% for post in posts %}
{% if post["id"] == id %}
<div class="card">
<h1>{{ post["title"] }}</h1>
<h2>{{ post["subtitle"] }}</h2>
<p>{{ post["body"] }}</p>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</body>
<footer>
<p>Made with ♥️ in London.</p>
</footer>
</html>
couldnt really figure out how to integrate the class into my code but what ive done stil works
from flask import Flask, render_template
import requests
app = Flask(name)
@app.route('/')
def home():
blogs_endpoint = "https://api.npoint.io/c790b4d5cab58020d391"
all_posts = requests.get(blogs_endpoint).json()
return render_template("index.html" , posts=all_posts)
@app.route("/post/<blog_id>")
def get_post(blog_id):
blogs_endpoint = "https://api.npoint.io/c790b4d5cab58020d391"
all_posts = requests.get(blogs_endpoint).json()
return render_template("post.html", post=all_posts[int(blog_id) - 1])
if name == "main":
app.run(debug=True)
My Blog
Made with
My Blog
{{post["title"]}}
{{ post["subtitle"] }}
{{post["body"]}}
</div>
Made with
I don't know what is the use of post.py file in this project? If we can do this without that file as I did. Below is the complete project code
main.py
from flask import Flask, render_template import requests app = Flask(__name__) url = 'https://api.npoint.io/c790b4d5cab58020d391' response = requests.get(url) all_posts = response.json() @app.route('/') def home(): return render_template("index.html", posts=all_posts) @app.route('/post/<int:post_id>') def blog(post_id): return render_template("post.html", post_id=post_id, posts=all_posts) 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 posts: %} <div class="content"> <div class="card"> <h2>{{ post['title'] }}</h2> <p class="text"> {{ post['subtitle'] }} </p> <a href=" {{ url_for('blog', post_id=post['id']) }}">Read</a> </div> </div> {% endfor %} <!-- <div class="content">--> <!-- <div class="card">--> <!-- <h2>Another blog post</h2>--> <!-- <p class="text">Lorem ipsum dolor sit </p>--> <!-- <a href="#">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> {% for post in posts: %} {% if post['id'] == post_id: %} <div class="content"> <div class="card"> <h1> {{ post['title'] }}</h1> <h2> {{ post['subtitle'] }}</h2> <p>{{ post['body'] }}</p> </div> </div> {% endif %} {% endfor %} </div> </body> <footer> <p>Made with ♥️ in London.</p> </footer> </html>
I loved your approach
thanks for sharing it