Skip to content

Instantly share code, notes, and snippets.

@TheMuellenator

TheMuellenator/index.html

Forked from angelabauer/index.html
Last active January 1, 2026 20:20
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save TheMuellenator/7c6a08a3df3b94a28d1a867628481910 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save TheMuellenator/7c6a08a3df3b94a28d1a867628481910 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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>{‌{ 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>
Raw
main.py
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)
Raw
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 London.</p>
</footer>
</html>
Raw
post.py
class Post:
def __init__(self, post_id, title, subtitle, body):
self.id = post_id
self.title = title
self.subtitle = subtitle
self.body = body
@olatideenoch
Copy link

olatideenoch commented Nov 7, 2025

  1. main.py
from flask import Flask, render_template
import requests


app = Flask(__name__)

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

@app.route('/<num>')
def blog(num):
    blog_url = "https://api.npoint.io/c8f6dc97e45d629675c9"
    response = requests.get(blog_url)
    all_posts = response.json()
    return render_template("post.html", posts = all_posts, num = int(num))

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

2. 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">
            {% for blog_posts in posts: %}
                {% if blog_posts["id"] == 1: %}
                <h2>{{ blog_posts["title"] }}</h2>
                <p class="text">{{ blog_posts["subtitle"] }}</p>
                <a href="{{ url_for('blog', num=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: %}
                <h2>{{ blog_posts["title"] }}</h2>
                <p class="text">{{ blog_posts["subtitle"] }}</p>
                <a href="{{ url_for('blog', num=blog_posts['id']) }}">Read</a>
                {% endif %}
            {% endfor %}
        </div>
    </div>
    <div class="content">
        <div class="card">
            {% for blog_posts in posts: %}
                {% if blog_posts["id"] == 3: %}
                <h2>{{ blog_posts["title"] }}</h2>
                <p class="text">{{ blog_posts["subtitle"] }}</p>
                <a href="{{ url_for('blog', num=blog_posts['id']) }}">Read</a>
                {% endif %}
            {% endfor %}
        </div>
    </div>
</div>
</body>
<footer>
    <p>Made with ♥️ in Nigeria.</p>
</footer>
</html>

3. 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 blog_posts in posts: %}
                    {% if blog_posts["id"] == num: %}
                    <h1>{{ blog_posts["title"] }}</h1>
                    <h2>{{ blog_posts["subtitle"] }}</h2>
                    <p>{{ blog_posts["body"] }}</p>
                    {% endif %}
                {% endfor %}
            </div>

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

@samsunda
Copy link

samsunda commented Nov 13, 2025

main.py

from flask import Flask, render_template
from post import Post

app = Flask(name)

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

@app.route('/blog/int:num')
def get_post(num):
blog = Post().post()
print(num)
return render_template("post.html", blog=blog, num=num)

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

post.py

import requests

class Post:
def init(self):
self.url = " https://api.npoint.io/c790b4d5cab58020d391"

def post(self):
    response = requests.get(self.url)
    return response.json()

index.html

<title>Title</title>

My Blog

Just a blog post

Lorem ipsum dolor sit

Read

Another blog post

Lorem ipsum dolor sit

Read

Made with ♥️ in London.

post.html

<title>Title</title>

My Blog

{% for blog_post in blog %} {% if blog_post["id"] == num: %}

{{ blog_post["title"] }}

{{ blog_post["body"] }}

{% endif %} {% endfor %} 
</div>

Made with ♥️ in London.

@Jomathr
Copy link

Jomathr commented Jan 1, 2026

Count on Angela to throw a curve ball in the exercise with a hint for using Class!
Seems I went a different route again, I went with **kwargs for the class

main.py:

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

blog_url = "https://api.npoint.io/c790b4d5cab58020d391"
blog_req = requests.get(blog_url)
all_post = blog_req.json()
post_objects = []
for post in all_post:
    post_obj = Post(**post)
    post_objects.append(post_obj)
    print(post_obj.title)

app = Flask(__name__)

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

@app.route('/blog_post/<int:id>')
def blog_post(id):
    print(id)
    post_id = None
    for post in post_objects:
        print(type(post.id))
        if post.id == id:
            post_id = post
            print(post_id)
    return render_template("post.html",post_id=post_id)


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

post.py:

class Post:
    def __init__(self,**kwargs):
        self.__dict__.update(kwargs)

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 post_objects: %}
    <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>
</body>
<footer>
    <p>Made with ♥️ in Quebec.</p>
</footer>
</html>

and finally 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_id.title}}</h2>
                <p>{{post_id.body}}</p>
            </div>

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment