TheMuellenator/index.html

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>

Gesifeta · 2025-07-20T11:07:05Z

here is how i did it with only single html template(index.html) and also added back link. I also used json to avoid breaking changes from the API call.
*server.py

from flask import Flask, render_template
import json
app = Flask(name)

with open("blog.json") as f:
posts = json.load(f)
@app.route('/')
def index():
return render_template('index.html',posts=posts)

@app.route('/post/int:id')
def get_post(id):
post = posts[id]
return render_template("index.html",posts=[post],id=id, len = len(post))

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

index.html

<title>Technology - the latest</title>

My Blog

{% for post in posts %}

{% if len == 7: %}

Back {% else %} Read {% endif %}

{% endfor %}

© {{ year }}. Made with ❤ in Shaggar.

shivam-teli08 · 2025-07-20T18:36:04Z

here is how i did it that is working too .. i am just thinking to get something differnent approach

index.html

2)main.py

3)post.html

HoodiniUg · 2025-09-21T12:10:00Z

main.py

from flask import Flask, render_template
import requests
from post import Post

my_blogs_api="https://api.npoint.io/c790b4d5cab58020d391"
app = Flask(__name__)  

blogs_from_api=requests.get(my_blogs_api).json()

@app.route('/')
def home():
    return render_template("index.html", all_blogs=blogs_from_api)

@app.route('/post/<int:blog_id>')
def goto_post(blog_id):
    post_obj= Post(blogs_from_api)
    chosen_post=post_obj.get_post(blog_id)
    return render_template("post.html",blog_post=chosen_post)


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

post.py

import requests
my_blogs_api="https://api.npoint.io/c790b4d5cab58020d391"
def get_blogs():
    response=requests.get(my_blogs_api)
    return response.json()

class Post:
    def __init__(self,blogs):
        self.my_blogs=blogs

    def get_post(self, post_id):
        return [item for item in self.my_blogs if item["id"]==post_id]

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Hoodini_blogs</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 item in all_blogs: %}
                <div class="content">
                    <div class="card">
                        <h2>{{ item["title"] }}</h2>
                        <p class="text">{{ item["subtitle"] }}</p>
                        <a href="{{ url_for('goto_post',blog_id=item['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 ♥️ from Uganda.</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">
                {% for item in blog_post: %}
                    <h2>{{ item["title"] }}</h2>
                    <hr>
                    <h3>{{ item["subtitle"] }}</h3>
                    <p>{{ item["body"] }}</p>
                {% endfor%}
            </div>

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

18Khadija22 · 2025-10-03T17:27:50Z

server.py

from flask import Flask, render_template
import requests

response = requests.get(url="https://api.npoint.io/c790b4d5cab58020d391")
posts_json = response.json()

app = Flask(__name__)

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

@app.route('/post/<int:num>')
def get_post(num):
    requested_post = None
    for post in posts_json:
        if post["id"]==num:
            requested_post = post

    return render_template("post.html", show_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>
    {% 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',num = 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">
                <h1>{{ show_post["title"] }}</h1>
                <h2>{{ show_post["subtitle"] }}</h2>
                <p>{{ show_post["body"] }}</p>
        </div>
    </div>
</div>
</body>
<footer>
    <p>Made with ♥️ in London.</p>
</footer>
</html>

lazy-blake · 2025-10-09T17:05:55Z

main.py

import requests
from flask import Flask, render_template

app = Flask(__name__)

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


@app.route("/")
def home():
    response = requests.get(URL)
    blog_posts = response.json()
    return render_template("index.html", posts=blog_posts)


@app.route("/post/<int:post_id>")
def blogs(post_id):
    response = requests.get(URL)
    blog_posts = response.json()
    return render_template("post.html", posts=blog_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 i in posts:%}
      <div class="content">
        <div class="card">
          <h2>{{i["title"]}}</h2>
          <p class="text">{{i["subtitle"]}}</p>
          <a href="{{url_for('blogs', post_id=i['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 i in posts:%} {% if i["id"] == id: %}
        <div class="card">
          <h2>{{i['title']}}</h2>
          <p>{{i['body']}}</p>
        </div>
        {% endif %} {% endfor %}
      </div>
    </div>
  </body>
  <footer>
    <p>Made with ♥️ in London.</p>
  </footer>
</html>

i didn't use the post.py

dontgotdef · 2025-10-09T21:24:22Z

lemme know what y'all think, took a different approach for def get_blog

1.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()
    return render_template("index.html", posts=all_posts)

@app.route("/post/<blog_id>")
def get_blog(blog_id):
    blog_url = "https://api.npoint.io/c790b4d5cab58020d391"
    response = requests.get(blog_url)
    all_posts = response.json()
    post_title = all_posts[int(blog_id) - 1]["title"]
    post_blog = all_posts[int(blog_id) - 1]["body"]
    return render_template("post.html", title=post_title, blog=post_blog)

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="{{ url_for('static', filename='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="/post/{{ 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>Title</title>
    <link href="https://fonts.googleapis.com/css2?family=Raleway" rel="stylesheet">
    <link rel="stylesheet" href="{{ url_for('static', filename='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>{{ title }}</h2>
            <p>{{ blog }}</p>
        </div>
    </div>
</div>
</body>
<footer>
    <p>Made with ♥️ in London.</p>
</footer>
</html>

arv-codes · 2025-10-22T12:42:56Z

Created a helpers.py file to keep main clean and used redirect as a guard against incorrect blog ids.

main.py

from flask import Flask, redirect, render_template
from helpers import get_blog_data

app = Flask(__name__)

@app.route('/')
def home():
    blog_data = get_blog_data()
    return render_template("index.html", blog_data=blog_data)


@app.route('/post/<int:post_id>')
def post(post_id):
    try:
        # Post id is 1-based, but JSON index is 0-based; so subtract 1 to match
        post_data = get_blog_data()[post_id - 1]
        return render_template("post.html", post_data=post_data)
    except IndexError:
        return redirect('/')
    

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

helpers.py

import requests

BLOG_URL = "https://www.npoint.io/docs/c790b4d5cab58020d391"

def get_blog_data():
    try:
        r = requests.get(BLOG_URL)
        r.raise_for_status()
        blog_data = r.json()
        return blog_data
    except:
        return {}

	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

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!

Gesifeta commented Jul 20, 2025 •

edited

Loading

Uh oh!

shivam-teli08 commented Jul 20, 2025

Uh oh!

HoodiniUg commented Sep 21, 2025

Uh oh!

18Khadija22 commented Oct 3, 2025 •

edited

Loading

Uh oh!

lazy-blake commented Oct 9, 2025

Uh oh!

dontgotdef commented Oct 9, 2025

Uh oh!

arv-codes commented Oct 22, 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

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!

Gesifeta commented Jul 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

My Blog

{{ post['title'] }}

{{ post['summary'] }}

© {{ year }}. Made with ❤ in Shaggar.

Uh oh!

shivam-teli08 commented Jul 20, 2025

Uh oh!

HoodiniUg commented Sep 21, 2025

Uh oh!

18Khadija22 commented Oct 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

server.py

index.html

post.html

Uh oh!

lazy-blake commented Oct 9, 2025

Uh oh!

dontgotdef commented Oct 9, 2025

Uh oh!

arv-codes commented Oct 22, 2025

Uh oh!

Yatincode commented Jun 22, 2025 •

edited

Loading

Gesifeta commented Jul 20, 2025 •

edited

Loading

18Khadija22 commented Oct 3, 2025 •

edited

Loading