Skip to content

Instantly share code, notes, and snippets.

@TheMuellenator

TheMuellenator/index.html

Forked from angelabauer/index.html
Last active October 30, 2025 17:34
Show Gist options
  • Save TheMuellenator/7c6a08a3df3b94a28d1a867628481910 to your computer and use it in GitHub Desktop.
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
@HoodiniUg
Copy link

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
Copy link

18Khadija22 commented Oct 3, 2025 •
edited
Loading

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
Copy link

  1. 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)
  1. 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>
  1. 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
Copy link

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)
  1. 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>
  1. 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
Copy link

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 {}

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