TheMuellenator/index.html

DKnopov · 2024-10-06T09:29:19Z

`import requests
from flask import Flask, render_template

BLOG_ENDPOINT = "https://api.npoint.io/c790b4d5cab58020d391"
app = Flask(name)
all_posts = None

@app.route('/')
def get_blog():
global all_posts
response = requests.get(BLOG_ENDPOINT)
all_posts = response.json()
return render_template("index.html", posts=all_posts)

@app.route('/post/int:post_id')
def get_post(post_id):
post = [p for p in all_posts if p['id'] is post_id][0]
return render_template("post.html", post_id=post["id"], title=post["title"], subtitle=post["subtitle"],
body=post["body"])

if name == "main":
app.run(debug=True)
`

Ibidee1 · 2024-10-07T16:01:12Z

main.py

from flask import Flask, render_template
from post import Post
text = Post()

app = Flask(name)

@app.route('/')
def home():
return render_template("index.html", all_post=text.data)

@app.route('/post/<title>/')
def read_more(title, body):
return render_template("post.html", title=title, body=body)

if name == "main":
app.run(debug=True)

post.py

import requests

class Post:
def init(self):
response = requests.get(url="https://api.npoint.io/245b06c2c69f09d52bef")
self.data = response.json()

index.html

My Blog

{% for post in all_post %}

Read {% endfor %}

    </div>
</div>

Made with ♥️ in London.

post.html

<title>Title</title>

My Blog

</div>

Made with ♥️ in London.

style.css

body{
background: #efeff3;
margin: 0;
font-family: 'Raleway', sans-serif;
-webkit-font-smoothing: antialiased;
color:#212121;
}
.wrapper{
position: relative;
clear:both;
margin: 0 auto 75px auto;
width: 100%;
overflow: hidden;
}
.top{
background: #4e89ae;
height: 180px;
border-top: 20px solid #43658b;
}

.top .title {
width: 700px;
margin: 38px auto 0 auto;
}

.title h1 {
font-size:24px;
color:#FFF;
font-weight:500;
}

.content{
margin: -80px auto 100px;
padding-bottom: 20px;
}

.card{
position: relative;
background: #fff;
padding:50px;
width: 600px;
margin: 20px auto 0 auto;
box-shadow: 0 2px 4px rgba(100,100,100,.1);
}

.card h2 {
font-size:21px;
font-weight:500;
}

.card h2 a {
color:#CC0000;
text-decoration:none;
}

.card .text {
color:#212121;
margin-top:20px;
font-size:15px;
line-height:22px;
}

footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #43658b;
color: white;
text-align: center;
}

ivanberg202 · 2024-10-16T07:32:59Z

anonberry, I also did it without the Post class. It looks like a good practice, but complicates the implementation in my eyes. I did it this way (with help of chatGPT, as always :D ).
I especially liked learning about the next() function thanks to chatGPT solution. Looks useful when searching for a single match as it saves memory and handles errors out of the box, thanks to its second parameter, when no match is found (None).

from flask import Flask, render_template
import requests

app = Flask(__name__)

# Function to fetch blog posts from the API
def fetch_blog_posts():
    try:
        response = requests.get('https://api.npoint.io/7b983f7605c621e43e8b')
        response.raise_for_status()  # Raises an exception if the status code is not 200
        return response.json()  # Return the JSON response
    except requests.exceptions.RequestException:
        return []  # Return an empty list if there's an error

@app.route('/')
def home():
    # Fetch the blog posts once
    blog_posts = fetch_blog_posts()
    return render_template("index.html", posts=blog_posts)

@app.route('/post/<int:post_id>')
def post(post_id):
    # Fetch the blog posts once
    blog_posts = fetch_blog_posts()

    # Find the specific post by ID
    post = next((item for item in blog_posts if item['id'] == post_id), None)

    if post:
        return render_template('post.html', post=post)  # Render the post template with the specific post
    else:
        return "Post not found", 404  # Handle the case where the post doesn't exist

if __name__ == "__main__":
    app.run(debug=True)```

frankie79der · 2024-10-29T17:38:55Z

anonberry, I also did it without the Post class. It looks like a good practice, but complicates the implementation in my eyes. I did it this way (with help of chatGPT, as always :D ). I especially liked learning about the next() function thanks to chatGPT solution. Looks useful when searching for a single match as it saves memory and handles errors out of the box, thanks to its second parameter, when no match is found (None).

from flask import Flask, render_template
import requests

app = Flask(__name__)

# Function to fetch blog posts from the API
def fetch_blog_posts():
    try:
        response = requests.get('https://api.npoint.io/7b983f7605c621e43e8b')
        response.raise_for_status()  # Raises an exception if the status code is not 200
        return response.json()  # Return the JSON response
    except requests.exceptions.RequestException:
        return []  # Return an empty list if there's an error

@app.route('/')
def home():
    # Fetch the blog posts once
    blog_posts = fetch_blog_posts()
    return render_template("index.html", posts=blog_posts)

@app.route('/post/<int:post_id>')
def post(post_id):
    # Fetch the blog posts once
    blog_posts = fetch_blog_posts()

    # Find the specific post by ID
    post = next((item for item in blog_posts if item['id'] == post_id), None)

    if post:
        return render_template('post.html', post=post)  # Render the post template with the specific post
    else:
        return "Post not found", 404  # Handle the case where the post doesn't exist

if __name__ == "__main__":
    app.run(debug=True)```

I feel the same way and completely agree with this post. There’s no reason to use classes and complicate things unnecessarily for this simple exercise. Plus, ChatGPT introduced me to next(), which is really useful!

DHOESH123 · 2024-11-14T12:40:51Z

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>

nice bro

pamir-shinwari · 2024-11-15T20:24:54Z

Without "Post" class.

main.py

from flask import Flask, render_template
import requests

app = Flask(__name__)

data = requests.get("https://api.npoint.io/c790b4d5cab58020d391").json()


@app.route('/')
def home():

    return render_template("index.html", posts=data)


@app.route('/post/<blog_id>')
def read_post(blog_id):

    return render_template("post.html", blog_id=int(blog_id), posts=data)


if __name__ == "__main__":
    app.run(port=8000, debug=True)

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 posts%}
         <div class="content">
        <div class="card">
            <h2>{{post['title']}}</h2>
            <p class="text">{{post['subtitle']}} </p>
            <a href="{{url_for('read_post', blog_id=post['id'])}}">Read</a>
        </div>
    </div>
    {% endfor %}
</div>
</body>
<footer>
    <p>Made with ♥️ .</p>
</footer>
</html>

post.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>
        <div class="content">
            <div class="card">

                {% for post in posts: %}
                   {% if post['id'] == blog_id: %}
                        <h2>{{post['title']}}</h2>
                        <h2>{{post['subtitle']}}</h2>
                        <p>{{post['body']}}</p>

                   {% endif%}
                {% endfor %}

            </div>

    </div>
</div>
</body>
<footer>
    <p>Made with ♥️ .</p>
</footer>
</html>

d-madiou · 2024-11-20T15:33:50Z

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"
blog_response = requests.get(blog_url)
blog_jason = blog_response.json()
return render_template("index.html", blog_post=blog_jason)

@app.route('/post/int:num')
def post(num):
blog_url = "https://api.npoint.io/c790b4d5cab58020d391"
blog_response = requests.get(blog_url)
blog_jason = blog_response.json()
return render_template("post.html", blog_post=blog_jason, id=num)

if name == "main":
app.run(debug=True)

index.html

<title>Title</title>

My Blog

{% for post in blog_post: %} {% if post["id"] == 1: %}

{% endif %} {% endfor %} Read

{% for post in blog_post: %} {% if post["id"] == 2: %}

{% endif %} {% endfor %} Read

{% for post in blog_post: %} {% if post["id"] == 3: %}

{% endif %} {% endfor %} Read

Made with ♥️ in London.

post.html

<title>Title</title>

My Blog

{% for post in blog_post %} {% if post["id"] == id %}

{% endif %} {% endfor %}

    </div>

Made with ♥️ in London.

buihuuluc · 2024-11-27T13:03:50Z

I found a bug when I pasted code copied from the main source. The bug occurred in two HTML files.

Original:

index.html:
`

{‌{ post.title }}

{‌{ post.subtitle }}

`

post.html:
`

{‌{ post.title }}

{‌{ post.subtitle }}

{‌{ post.body }}

`

In VSCode, a yellow warning appears right before the double curly braces ({{). When I deleted the braces and manually retyped {{ again, the program worked perfectly.

Does anyone know what caused this bug?
I'm using VSCode on macOS Sequoia 15.1.1.

d-madiou · 2024-11-27T13:07:54Z

What was showing on the screen?? Le mer. 27 nov. 2024 à 9:04 PM, Bui Huu Luc ***@***.***> a écrit :

…

***@***.**** commented on this gist. ------------------------------ I found a bug when I pasted code copied from the main source. The bug occurred in two HTML files. Original: index.html: ` {‌{ post.title }} {‌{ post.subtitle }} ` post.html: ` {‌{ post.title }} {‌{ post.subtitle }} {‌{ post.body }} ` In VSCode, a yellow warning appears right before the double curly braces ({{). When I deleted the braces and manually retyped {{ again, the program worked perfectly. Does anyone know what caused this bug? I'm using VSCode on macOS Sequoia 15.1.1. — Reply to this email directly, view it on GitHub <https://gist.github.com/TheMuellenator/7c6a08a3df3b94a28d1a867628481910#gistcomment-5304264> or unsubscribe <https://github.com/notifications/unsubscribe-auth/BDKQDMTMQIFUB6ODUKM5LBL2CW7MXBFKMF2HI4TJMJ2XIZLTSKBKK5TBNR2WLJDUOJ2WLJDOMFWWLO3UNBZGKYLEL5YGC4TUNFRWS4DBNZ2F6YLDORUXM2LUPGBKK5TBNR2WLJDHNFZXJJDOMFWWLK3UNBZGKYLEL52HS4DFVRZXKYTKMVRXIX3UPFYGLK2HNFZXIQ3PNVWWK3TUUZ2G64DJMNZZDAVEOR4XAZNEM5UXG5FFOZQWY5LFVEYTANZWGAYTKOBSU52HE2LHM5SXFJTDOJSWC5DF> . You are receiving this email because you commented on the thread. Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub> .

buihuuluc · 2024-11-27T14:45:02Z

The screen displays 3 cards with the following content:

`
{{ post.title }}
{{ post.subtitle }}
{{ post.body }}

`

d-madiou · 2024-11-27T14:50:34Z

Alright I got you, the problem is the expression is not being processed by the flask this occurs when you declared the for statement: {% for post in all_post %} Please make sure all_post is the variable that hold the value in the render template. Le mer. 27 nov. 2024 à 10:45 PM, Bui Huu Luc ***@***.***> a écrit :

…

***@***.**** commented on this gist. ------------------------------ The screen displays 3 cards with the following content: ` {{ post.title }} {{ post.subtitle }} {{ post.body }} ` — Reply to this email directly, view it on GitHub <https://gist.github.com/TheMuellenator/7c6a08a3df3b94a28d1a867628481910#gistcomment-5304392> or unsubscribe <https://github.com/notifications/unsubscribe-auth/BDKQDMRH5S36S4OVLDSXTJT2CXLIJBFKMF2HI4TJMJ2XIZLTSKBKK5TBNR2WLJDUOJ2WLJDOMFWWLO3UNBZGKYLEL5YGC4TUNFRWS4DBNZ2F6YLDORUXM2LUPGBKK5TBNR2WLJDHNFZXJJDOMFWWLK3UNBZGKYLEL52HS4DFVRZXKYTKMVRXIX3UPFYGLK2HNFZXIQ3PNVWWK3TUUZ2G64DJMNZZDAVEOR4XAZNEM5UXG5FFOZQWY5LFVEYTANZWGAYTKOBSU52HE2LHM5SXFJTDOJSWC5DF> . You are receiving this email because you commented on the thread. Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub> .

ecode-env · 2025-02-26T09:43:46Z

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)

`****`

Niloy-Dutta · 2025-03-01T09:24:30Z

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

<title>Title</title>

    <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 ♥️ in Bangladesh.

post.html

<title>Title</title>

My Blog

         <div class="content">
            <div class="card">
                <h2>{{posts[number-1]["title"]}}</h2>
                <p>{{posts[number-1]["body"]}}</p>
            </div>

    </div>

Made with ♥️ in Bangladesh.

jaimieji · 2025-03-11T23:23:53Z

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>

Rens-M · 2025-03-12T00:44:55Z

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>

gillesvm · 2025-03-12T08:59:04Z

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>

PSarkodie · 2025-03-22T03:07:57Z

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>

pradaboots · 2025-04-08T20:12:55Z

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)

pradaboots · 2025-04-08T20:13:04Z

<title>Title</title>

My Blog

{%for post in posts%}

Read

{% endfor %}

Made with ♥️ in London.

pradaboots · 2025-04-08T20:13:11Z

<title>Title</title>

My Blog

</div>

Made with ♥️ in London.

TamerC50 · 2025-04-12T20:59:50Z

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>

TamerC50 · 2025-04-12T21:00:13Z

I loved your approach
thanks for sharing it

	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)

	class Post:
	def __init__(self, post_id, title, subtitle, body):
	self.id = post_id
	self.title = title
	self.subtitle = subtitle
	self.body = body

TheMuellenator/index.html

DKnopov commented Oct 6, 2024

Ibidee1 commented Oct 7, 2024

My Blog

{{title}}

ivanberg202 commented Oct 16, 2024 •

edited

Loading

frankie79der commented Oct 29, 2024

DHOESH123 commented Nov 14, 2024

pamir-shinwari commented Nov 15, 2024

d-madiou commented Nov 20, 2024

buihuuluc commented Nov 27, 2024

d-madiou commented Nov 27, 2024 via email

buihuuluc commented Nov 27, 2024

d-madiou commented Nov 27, 2024 via email

ecode-env commented Feb 26, 2025

Niloy-Dutta commented Mar 1, 2025

jaimieji commented Mar 11, 2025

Rens-M commented Mar 12, 2025

gillesvm commented Mar 12, 2025 •

edited

Loading

PSarkodie commented Mar 22, 2025

pradaboots commented Apr 8, 2025

pradaboots commented Apr 8, 2025

pradaboots commented Apr 8, 2025

TamerC50 commented Apr 12, 2025

TamerC50 commented Apr 12, 2025

	<!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>

TheMuellenator/index.html

DKnopov commented Oct 6, 2024

Ibidee1 commented Oct 7, 2024

My Blog

{{post['title']}}

My Blog

{{title}}

ivanberg202 commented Oct 16, 2024 • edited Loading

frankie79der commented Oct 29, 2024

DHOESH123 commented Nov 14, 2024

pamir-shinwari commented Nov 15, 2024

main.py

index.html

post.html

d-madiou commented Nov 20, 2024

My Blog

{{ post["title"] }}

{{ post["title"] }}

{{ post["title"] }}

My Blog

{{ post["title"] }}

buihuuluc commented Nov 27, 2024

{‌{ post.title }}

{‌{ post.title }}

{‌{ post.subtitle }}

d-madiou commented Nov 27, 2024 via email

buihuuluc commented Nov 27, 2024

d-madiou commented Nov 27, 2024 via email

ecode-env commented Feb 26, 2025

****

Niloy-Dutta commented Mar 1, 2025

My Blog

jaimieji commented Mar 11, 2025

Rens-M commented Mar 12, 2025

gillesvm commented Mar 12, 2025 • edited Loading

PSarkodie commented Mar 22, 2025

pradaboots commented Apr 8, 2025

pradaboots commented Apr 8, 2025

My Blog

{{post["title"]}}

pradaboots commented Apr 8, 2025

My Blog

{{post["title"]}}

{{ post["subtitle"] }}

TamerC50 commented Apr 12, 2025

TamerC50 commented Apr 12, 2025

ivanberg202 commented Oct 16, 2024 •

edited

Loading

`****`

gillesvm commented Mar 12, 2025 •

edited

Loading