TheMuellenator/index.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

ShyamSamant · 2025-05-27T11:41:39Z

I don't know why and how but i am losing the css style sheet effects once entering the individual post website, is this only my problem or other's are also face same issue

Yatincode · 2025-06-22T08:10:14Z

MY CODE

main.py:

from flask import Flask, render_template
import requests

app = Flask(__name__)

def data():
    blog_url = "https://api.npoint.io/8cefde3bad80ae6e10e8"
    all_posts = requests.get(blog_url).json()
    return all_posts
@app.route('/')
def home():
    all_posts = data()
    return render_template("index.html" , posts=all_posts)

@app.route("/post/<int:post_id>")
def view_post(post_id):
    all_posts=data()
    return render_template("post.html" , post=all_posts[post_id - 1])

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 range(posts | length ) %}
        <div class="content">
            <div class="card">
                    <h2>{{posts[post]["title"]}}</h2>
                    <p class="text">{{posts[post]["subtitle"]}}</p>
                    <a href="{{ url_for('view_post' , post_id=posts[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></h1></div>
           </div>
        <div class="content">
            <div class="card">
                <h2>{{post["title"]}}</h2>
                <h3>{{post["subtitle"]}}</h3>
                <p>{{post["body"]}}</p>
            </div>

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

ALSO YOU CAN USE MY API TO GET 100 blog postss to test just for fun:)))

Hassenebrahim · 2025-07-16T20:40:13Z

here is what i found by trial and error, all of my html code was commented, and there was a jinja code in it. so even if the entire file is commented, jinja will still excute any codes in the curly braces. so you have to comment that aswell , like {#...#} so in addition to the html commenting, add this one to, other wise it will throw error in your server.

dvelkakov · 2025-07-17T19:27:58Z

main.py

from flask import Flask, render_template
from posts import Posts


app = Flask(__name__)
posts = Posts()


@app.route('/')
def home():
    all_posts = posts.get_all_post()
    return render_template("index.html", posts=all_posts)


@app.route("/post/<int:post_id>")
def read_post(post_id):
    post = posts.get_post(post_id)
    return render_template("post.html", post=post)




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

posts.py

import requests

URL = "https://api.npoint.io/c790b4d5cab58020d391"


class Posts:
    def __init__(self):
        response = requests.get(URL)
        self.all_posts = response.json()

    def get_all_post(self):
        return self.all_posts

    def get_post(self, post_id):
        for post in self.all_posts:
            if post["id"] == post_id:
                return post
        return None

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', 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>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">
                <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>

	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

Rens-M commented Mar 12, 2025

Uh oh!

gillesvm commented Mar 12, 2025 •

edited

Loading

Uh oh!

PSarkodie commented Mar 22, 2025

Uh oh!

pradaboots commented Apr 8, 2025

Uh oh!

pradaboots commented Apr 8, 2025

Uh oh!

pradaboots commented Apr 8, 2025

Uh oh!

TamerC50 commented Apr 12, 2025

Uh oh!

TamerC50 commented Apr 12, 2025

Uh oh!

ShyamSamant commented May 27, 2025

Uh oh!

Yatincode commented Jun 22, 2025 •

edited

Loading

Uh oh!

Hassenebrahim commented Jul 16, 2025

Uh oh!

dvelkakov commented Jul 17, 2025

Uh oh!

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

Rens-M commented Mar 12, 2025

Uh oh!

gillesvm commented Mar 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

PSarkodie commented Mar 22, 2025

Uh oh!

pradaboots commented Apr 8, 2025

Uh oh!

pradaboots commented Apr 8, 2025

My Blog

{{post["title"]}}

Uh oh!

pradaboots commented Apr 8, 2025

My Blog

{{post["title"]}}

{{ post["subtitle"] }}

Uh oh!

TamerC50 commented Apr 12, 2025

Uh oh!

TamerC50 commented Apr 12, 2025

Uh oh!

ShyamSamant commented May 27, 2025

Uh oh!

Yatincode commented Jun 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Hassenebrahim commented Jul 16, 2025

Uh oh!

dvelkakov commented Jul 17, 2025

Uh oh!

gillesvm commented Mar 12, 2025 •

edited

Loading

Yatincode commented Jun 22, 2025 •

edited

Loading