Skip to content

Instantly share code, notes, and snippets.

@TheMuellenator

TheMuellenator/index.html

Forked from angelabauer/index.html
Last active May 20, 2024 19: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
@SadSack963
Copy link

@Storka72
In your post route your have: return render_template("post.html", post=blog_posts, ID=num)
In your post.html you have: {% for post in posts %}, but you are not passing a "posts" parameter to that page!

@inavadeep1205
Copy link

NEAT Code Without any Torchers and If statements and EASY to Understand

from flask import Flask, render_template
import requests

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

api = requests.get(api_endpoint)
api_json_data = api.json()

app = Flask(__name__)

@app.route("/")
def flask_1():
    return render_template("index.html", json_data=api_json_data)

@app.route("/read/<num>")
def flask_2(num):
    num = int(num) - 1
    return render_template("post.html", json_data=api_json_data, id_num=num)

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

#Index.HTML code

<!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 x in json_data: %}
    <div class="content">
        <div class="card">
                <h2> {{x["title"]}} </h2>
                <h3> {{x["subtitle"] }}</h3>
                <a href="{{url_for('flask_2', num=x['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>{{json_data[id_num]["title"]}}</h1>
                <h2>{{json_data[id_num]["body"]}}</h2>
            </div>
    </div>
</div>
</body>
<footer>
    <p>Made with ♥ in London.</p>
</footer>
</html>

@Randypz23
Copy link

Using index to get the post item

I think its more accurrate

#main.py

class Post:
def init(self, id, title, subtitle, body):
self.id = id - 1
self.title = title
self.subtitle = subtitle
self.body = body

#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>The Fake Blog</h1></div>
           </div>
        <div class="content">
            <div class="card">
                <h2>{{posts[num].title}}</h2>
                <h3>{{posts[num].subtitle}}</h3>
                <p>{{posts[num].body}}</p>
            </div>

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

@imsiddharth812
Copy link

imsiddharth812 commented Aug 25, 2023 •
edited

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>

@Akhinh
Copy link

Akhinh commented Sep 9, 2023

it is way easier without introducing the post.py Class.

from flask import Flask, render_template
import requests

response = requests.get("https://api.npoint.io/c790b4d5cab58020d391")
info = response.json()
all_blogs = []
for blog in info:
all_blogs.append(blog)

app = Flask(name)

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

@app.route('/post/int:index')
def the_blog(index):
requested_post = None
for blogs in all_blogs:
if blogs["id"] == index:
requested_post = blogs
print(requested_post)
return render_template("post.html", post=requested_post)

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

@itsabhi672
Copy link

I have completed this task without writing anything in post.py file.
Here are my files,

main.py
import requests
from flask import Flask, render_template

app = Flask(name)

@app.route('/blog')
def home():
blog_url = 'https://api.npoint.io/c790b4d5cab58020d391'
r = requests.get(blog_url)
blogs = r.json()
return render_template("index.html", blogs=blogs)

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

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

index.html

<title>Title</title>

My Blog

{% for blog in blogs %}

{{ blog["title"] }}

{{ blog["subtitle"] }}

Read
{% endfor %}

Made with ♥️ in London.

post.html

<title>Title</title>

My Blog

{{ blog[id-1]["title"] }}

{{ blog[id-1]["body"] }}

</div>

Made with ♥️ in London.

@DevOmni
Copy link

DevOmni commented Oct 19, 2023

I think for sake of this project making a class of Post was not necessary instead I used a python list and in html with jinja I was able to use it as python list

@pedsf1968
Copy link

  • post.py
import requests
from pprint import pprint
N_P0INT_API = "https://api.npoint.io/c790b4d5cab58020d391"


class Post:
    def __init__(self):
        response = requests.get(url=N_P0INT_API)
        self.data = response.json()

    def display(self):
        """Display data content"""
        pprint(self.data)

    def get_all(self):
        """Return all posts"""
        return self.data

    def get_by_id(self, post_id):
        """Return only one post by ID
        post_id : the ID of the post tou fetch
        """
        for post in self.data:
            if int(post_id) == post['id']:
                return post
  • main.py
from flask import Flask, render_template
from post import Post

post = ""
app = Flask(__name__)


@app.route('/')
def blog_endpoint():
    return render_template("index.html", all_posts=post.get_all())


@app.route('/post/<post_id>')
def post_endpoint(post_id):
    return render_template("post.html", post=post.get_by_id(post_id=post_id))


if __name__ == "__main__":
    post = Post()
    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('post_endpoint', post_id=post['id'] )}}">Read</a>
            </div>
        </div>
    {% endfor %}
</div>
</body>
<footer>
    <p>Made with ♥️ in Seoul.</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>{{ post['title'] }}</h1>
                <h2>{{ post['subtitle'] }}</h2>
                <p>{{ post['body'] }}</p>
            </div>

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

@mskomek
Copy link

mskomek commented Feb 12, 2024 •
edited

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>Just a blog post</h2>
            <p class="text">Lorem ipsum dolor sit </p>
            <a href="/post/1">Read</a>
        </div>
    </div>
    <div class="content">
        <div class="card">
            <h2>Another blog post</h2>
            <p class="text">Lorem ipsum dolor sit </p>
            <a href="/post/2">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>
        <div class="content">
            <div class="card">
                <h2>{{dict[number-1]["title"]}}</h2>
                <p>{{dict[number-1]["body"]}}</p>
            </div>

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

main.py

from flask import Flask, render_template
import requests


app = Flask(__name__)

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

@app.route('/post/<int:number>')
def post(number):
    response = requests.get("https://api.npoint.io/7bdc6259ad459120c0cb")
    return render_template("post.html", number=number, dict=response.json())

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

post.py

class Post:
    pass

@samkalu22
Copy link

main.py
from flask import Flask, render_template
import requests
requests=requests
blog_URL='https://api.npoint.io/c790b4d5cab58020d391'

app = Flask(name)

@app.route('/')
def home():
all_post=requests.get(url=blog_URL).json()
return render_template("index.html",posts=all_post)

@app.route('/post/int:id')
def get_post(id):
all_post = requests.get(url=blog_URL).json()
return render_template("post.html", posts=all_post,id=id)

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

index.html

<title>Title</title>

My Blog

{% for post in posts: %}

{{post["title"]}}

{{post["subtitle"]}}

Read
{% endfor %}

Made with ♥️ in London.

post.html

<title>Title</title>

My Blog

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

{{post["title"]}}

{{post["body"]}}

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

Made with ♥️ in London.

@guitarlass
Copy link

guitarlass commented Mar 24, 2024 •
edited

main.py

from flask import Flask, render_template
from post import Post

app = Flask(__name__)


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


@app.route('/post/<int:id>')
def get_post(id):
    blogs = Post()
    post = blogs.get_post(id)
    return render_template("post.html", title=post['title'], body=post['body'])


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

post.py

import requests

class Post:
    def __init__(self):
        blog_url = "https://api.npoint.io/c790b4d5cab58020d391"
        req = requests.get(blog_url)
        all_posts = req.json()
        self.posts = all_posts

    def get_post(self, id):
        for post in self.posts:
            if post['id'] == id:
                return post

index.html

{% 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', id=post['id'])}}">Read</a>
        </div>
    </div>
{% endfor %}

post.html

<div class="content">
      <div class="card">
          <h2>{{ title }}</h2>
          <p>{{ body }}</p>
      </div>
</div>

@stevenson007
Copy link

main.py

from flask import Flask, render_template
from post import Post

app = Flask(__name__)


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


@app.route('/post/<int:id>')
def get_post(id):
    blogs = Post()
    post = blogs.get_post(id)
    return render_template("post.html", title=post['title'], body=post['body'])


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

post.py

import requests

class Post:
    def __init__(self):
        blog_url = "https://api.npoint.io/c790b4d5cab58020d391"
        req = requests.get(blog_url)
        all_posts = req.json()
        self.posts = all_posts

    def get_post(self, id):
        for post in self.posts:
            if post['id'] == id:
                return post

index.html

{% 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', id=post['id'])}}">Read</a>
        </div>
    </div>
{% endfor %}

post.html

<div class="content">
      <div class="card">
          <h2>{{ title }}</h2>
          <p>{{ body }}</p>
      </div>
</div>

This is exactly what I was trying to do.

Thanks. Nice Algorithm

@kanarendran
Copy link

### main.py

from flask import Flask, render_template
from post import Post

app = Flask(name)
c_post = Post()

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

@app.route('/post/int:blog_id')
def read_blog(blog_id):
blog_post = c_post.ind_post(blog_id)
return render_template("post.html", blog_post=blog_post)

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

### post.py

import requests

class Post:
def init(self):
self.posts = []

def all_blog_post(self):
    url = "https://api.npoint.io/c790b4d5cab58020d391"
    self.posts = requests.get(url).json()
    return self.posts

def ind_post(self, post_id):
    all_post_details = self.all_blog_post()
    post = []
    for p in all_post_details:
        if p["id"] == post_id:
            post.append(p)
    return post

index.html

<title>Title</title>

My Blog

{% for blog_post in posts %}

{{ blog_post["title"] }}

{{ blog_post["subtitle"] }}

Read
{% endfor %}

Made with ♥️ in London.

post.html

<title>Title</title>

My Blog

{{ blog_post[0]['title'] }}

{{ blog_post[0]['subtitle'] }}

{{ blog_post[0]['body'] }}

</div>

Made with ♥️ in London.

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