Skip to content

Instantly share code, notes, and snippets.

@TheMuellenator

TheMuellenator/index.html

Forked from angelabauer/index.html
Last active June 3, 2024 18:54
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
@dtsagg
Copy link

dtsagg commented May 7, 2023

it seems that nobody used the post.py class

@dtsagg
Copy link

dtsagg commented May 7, 2023

main.py

import requests
from flask import Flask, render_template

app = Flask(__name__)


@app.route('/')
def home():
    URL = "https://api.npoint.io/ff92afaab9a74c6246f9"
    response = requests.get(URL)
    data = response.json()

    return render_template("index.html", data=data)


@app.route('/post/<int:get_id>')
def post(get_id):
    URL = "https://api.npoint.io/ff92afaab9a74c6246f9"
    response = requests.get(URL)
    data = response.json()
    show_data = []
    for id_data in data:
        if id_data["id"] == get_id:
            show_data.append(id_data)
        else:
            pass

    return render_template("post.html", show_data=show_data)


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">
        {% for get_data in data %}
        <div class="card">
            <h2>{{ get_data["title"] }}</h2>
            <p class="text">{{ get_data["subtitle"] }} </p>
            <a href="{{ url_for('post', get_id=get_data['id']) }}">Read</a>
        </div>
        {% endfor %}
    </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">
                <h1>{{ show_data[0]["title"] }}</h1>
                <h2>{{ show_data[0]["subtitle"] }}</h2>
                <p>{{ show_data[0]["body"] }}</p>
            </div>

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

@MegKM
Copy link

MegKM commented May 18, 2023

I wasn't sure what the use of the post.py class was either:

post.html:

<div class="wrapper">
    <div class="top">
        <div class="title">
                {% set blog_num = (num - 1) %}
            <h1>{{ posts[blog_num]["title"] }}</h1>
                <p>page number: {{num}}</p>
        </div>
    </div>
        <div class="content">
            <div class="card">
                    <h2>{{ posts[blog_num]["title"] }}</h2>
                    <p>{{ posts[blog_num]["body"] }}</p>
            </div>
        </div>
</div>

relevant function in main.py:

@app.route('/blog/<int:num>')
def blog(num):
    blog_yrl = "https://api.npoint.io/c790b4d5cab58020d391"
    response = requests.get(blog_yrl)
    all_posts = response.json()
    print(num)

    return render_template("post.html", posts=all_posts, num=num, blog_num=0)

@MichaelOgunjimi
Copy link

My Solution almost identical to Angela's solution

#main.py

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

app = Flask(__name__)
response = requests.get('https://api.npoint.io/f79ef654f38310ae777a')
all_posts = response.json()


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


@app.route('/post/<int:post_id>')
def post(post_id):
    post_details = Post(title=all_posts[post_id - 1]['title'], subtitle=all_posts[post_id - 1]['subtitle'],
                        body=all_posts[post_id - 1]['body'])
    return render_template("post.html", post=post_details)


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 blog_posts %}

    <div class="content">
        <div class="card">
            <h2>{{ post.title }}</h2>
            <p class="text">{{ post.subtitle }} </p>
            <a href={{ url_for('post', post_id=post.id) }}>Read</a>
        </div>
    </div>
    {% endfor %}
</div>
</body>
<footer>
    <p>Made with ♥️ in London.</p>
</footer>
</html>

#post.py

class Post:
    def __init__(self, title, subtitle, body, id=None):
        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>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>

@NiRo-jr
Copy link

NiRo-jr commented Jun 5, 2023

Hello everyone,
Here is my solution, I don't use classes.

main.py

from flask import Flask, render_template
import requests


app = Flask(__name__)

@app.route('/')
def home():
    url_blog = "https://api.npoint.io/c790b4d5cab58020d391"
    blog_response = requests.get(url=url_blog)
    all_posts = blog_response.json()
    return render_template("index.html", posts=all_posts)

@app.route('/post/<int:id_no>')
def blog_posts(id_no):
    url_blog = "https://api.npoint.io/c790b4d5cab58020d391"
    blog_response = requests.get(url=url_blog)
    all_posts = blog_response.json()[id_no]
    return render_template("post.html", posts=all_posts, blog_id=id_no)


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_posts in posts %}
        <div class="content">
            <div class="card">
                <h2>{{blog_posts["title"]}}</h2>
                <p class="text">{{blog_posts["subtitle"]}} </p>
                <a href="post\{{blog_posts['id']-1}}">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">
                <h2>{{posts["title"]}}</h2>
                <p>{{posts["subtitle"]}}</p>
                <p>{{posts["body"]}}</p>
            </div>

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

@Nikesh24dotk
Copy link

Here is my Solution. Please leave any comments or suggestions to improve my skills. Thanks.

main.py

from flask import Flask, render_template
from post import Post

post_d = Post()

app = Flask(name)

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

@app.route('/blog')
def all_blogs():
return render_template("index.html", blog_id = post_d.id, blog_title=post_d.title, blog_subtitle = post_d.subtitle, length=len(post_d.id))

@app.route('/blog/')
def full_post(num):
return render_template("posts.html", blog_id=int(num), blog_body=post_d.body, blog_title=post_d.title, blog_subtitle = post_d.subtitle, length=len(post_d.id))

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

post.py

import requests

class Post:
def init(self):
self.id = []
self.title = []
self.subtitle = []
self.body = []
blog_response = requests.get(url="https://api.npoint.io/f45dc77976c248d5f60f")
data = blog_response.json()
for post in data:
self.id.append(post["id"])
self.title.append(post["title"])
self.subtitle.append(post["subtitle"])
self.body.append(post["body"])
# return self.id, self.title, self.subtitle, self.body

index.html

<title>My BLog Site</title>

My Blog

<div class="content">
    {% for i in range(length) %}
        <div class="card">
            <h2>{{blog_title[i]}}</h2>
            <p class="text">{{blog_subtitle[i]}}</p>
            <a href="blog/{{blog_id[i]}}">Full Post</a>
        </div>
    {% endfor %}
</div>

Made with ♥️ in London.

posts.html

import requests

class Post:
def init(self):
self.id = []
self.title = []
self.subtitle = []
self.body = []
blog_response = requests.get(url="https://api.npoint.io/f45dc77976c248d5f60f")
data = blog_response.json()
for post in data:
self.id.append(post["id"])
self.title.append(post["title"])
self.subtitle.append(post["subtitle"])
self.body.append(post["body"])
# return self.id, self.title, self.subtitle, self.body

@eghelbur
Copy link

eghelbur commented Jul 7, 2023

Here is my Solution:

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

@app.route('/post/<int:blog_id>')
def show_post(blog_id):
    blog_url = "https://api.npoint.io/c790b4d5cab58020d391"
    response = requests.get(blog_url)
    all_posts = response.json()
    blog_post = all_posts[blog_id - 1]
    return render_template("post.html", posts=blog_post)

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

post.py

class Post:
    def __init__(self, title, subtitle, body):
        self.title = title
        self.subtitle = subtitle
        self.body = body

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">
        {% for blog_post in posts %}
        {% if blog_post["id"] == 1 %}
    <div class="card">
        <h2>{{ blog_post["title"] }}</h2>
        <p class="text">{{ blog_post["subtitle"] }}</p>
         <a class="read" href="/post/{{ blog_post['id'] }}">Read</a>
        </div>
        {% endif %}
    {% endfor %}
</div>
    </div>
    <div class="content">
        {% for blog_post in posts %}
        {% if blog_post["id"] == 2 %}
        <div class="card">
            <h2>{{ blog_post["title"] }}</h2>
            <p class="text">{{ blog_post["subtitle"] }}</p>
            <a class="read" href="/post/{{ blog_post['id'] }}">Read</a>
        </div>
        {% endif %}
        {% endfor %}
    </div>
</div>
</body>
<footer>
    <p>Made with ♥️ in Seville.</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>{{ posts["title"] }}</h2>
                <p>{{ posts["body"] }}</p>
            </div>
    </div>
</div>
</body>
<footer>
    <p>Made with ♥️ in Seville.</p>
</footer>
</html>

@soumyagautam
Copy link

The challenge can be completed without including the Post class instance:

main.py

import requests
from flask import Flask, render_template

app = Flask(__name__)
blogs = requests.get("https://api.npoint.io/c790b4d5cab58020d391").json()


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


@app.route("/post/<num>")
def invl_blog(num):
    num = int(num)

    if num == 1:
        blog_title = blogs[0]["title"]
        blog_subtitle = blogs[0]["subtitle"]
        blog_body = blogs[0]["body"]
    elif num == 2:
        blog_title = blogs[1]["title"]
        blog_subtitle = blogs[1]["subtitle"]
        blog_body = blogs[1]["body"]
    else:
        blog_title = blogs[2]["title"]
        blog_subtitle = blogs[2]["subtitle"]
        blog_body = blogs[2]["body"]
    return render_template("post.html", blog_title=blog_title, blog_subtitle=blog_subtitle, blog_body=blog_body)


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>{{ blogs[0]["title"] }}</h2>
            <p class="text">{{ blogs[0]["subtitle"] }}</p>
            <a href="{{ url_for('invl_blog', num=1) }}">Read</a>
        </div>
    </div>
    <div class="content">
        <div class="card">
            <h2>{{ blogs[1]["title"] }}</h2>
            <p class="text">{{ blogs[1]["subtitle"] }}</p>
            <a href="{{ url_for('invl_blog', num=2) }}">Read</a>
        </div>
    </div>
    <div class="content">
        <div class="card">
            <h2>{{ blogs[2]["title"] }}</h2>
            <p class="text">{{ blogs[2]["subtitle"] }}</p>
            <a href="{{ url_for('invl_blog', num=3) }}">Read</a>
        </div>
    </div>
</div>
</body>
<footer>
    <p>© Blog Website, 2023</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>{{ blog_title }}</h1>
                    <h2>{{ blog_subtitle }}</h2>
                    <p>{{ blog_body }}</p>
                </div>
            </div>
        </div>
    </body>
    <footer>
        <p>© Blog Website, 2023</p>
    </footer>
</html>

@Freedempire
Copy link 

from datetime import datetime

from flask import Flask, render_template
from markupsafe import escape
import requests

from post import Post

genderize_endpoint = 'https://api.genderize.io'
agify_endpoint = 'https://api.agify.io'
blog_fake_endpoint = 'https://api.npoint.io/c790b4d5cab58020d391'

def guess_gender(name):
    params = {
        'name': name
    }
    response = requests.get(genderize_endpoint, params)
    response.raise_for_status()
    return response.json()['gender']

def guess_age(name):
    params = {
        'name': name
    }
    response = requests.get(agify_endpoint, params)
    response.raise_for_status()
    return response.json()['age']


app = Flask(__name__)

@app.route('/')
def home():
    year = datetime.now().year
    return render_template('dynamic_copyright_year.html', year=year)

@app.route('/guess/<name>')
def guess(name):
    name = escape(name)
    gender = guess_gender(name)
    age = guess_age(name)
    return render_template('guess_gender_age.html', name=name, gender=gender, age=age)

@app.route('/blog')
@app.route('/blog/<int:id>')
def blog(id=None):
    response = requests.get(blog_fake_endpoint)
    response.raise_for_status()
    posts = []
    for post_dict in response.json():
        posts.append(Post(**post_dict)) # ** for dictionary unpacking
    print(posts)
    if id:
        return render_template('post.html', post=posts[id - 1])
    return render_template('blog.html', posts=posts)


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

@anonberry
Copy link

main.py

# Importing required libraries
from flask import Flask, render_template
import requests

# Initializing the Flask app
app = Flask(__name__)

# API endpoint for the blog data
blog_url = "https://api.npoint.io/fd95eb762b80ce502a4f"

# Fetching the blog data from the API
response = requests.get(blog_url)
all_posts = response.json()

# Home route to display all blog posts
@app.route('/')
def home():
    return render_template("index.html", posts=all_posts)

# Route to display a specific blog post by its ID
@app.route('/post/<int:num>')
def get_blog(num):
    return render_template("post.html", posts=all_posts, id=num)

# Running the Flask app in debug mode
if __name__ == "__main__":
    app.run(debug=True)

@anonberry
Copy link

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('get_blog', num=blog_post['id'])}}">Read</a>
            </div>
        </div>
    {% endfor %}
</div>
</body>
<footer>
    <p>Made with ♥️ in Nigeria.</p>
</footer>
</html>

@anonberry
Copy link

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 blog_post in posts: %}
        {% if id == blog_post["id"]: %}
            <div class="content">
                <div class="card">
                    <h2>{{ blog_post["title"] }}</h2>
                    <h1>{{ blog_post["subtitle"] }}</h1>
                    <p>{{ blog_post["body"] }}</p>
                </div>
            </div>
        {% endif %}
    {% endfor %}
</div>
</body>
<footer>
    <p>Made with ♥️ in Nigeria.</p>
</footer>
</html>

@anonberry
Copy link

I completed the challenge without including the Post class instance </> ☝️

@Storka72
Copy link

Storka72 commented Aug 7, 2023 •
edited

i am having an issue where when i click on "Read", it is going to the post/1 or post/2 page, which is formatted, but none of the content (title or body) is appearing, and am pulling my hair out. Can anybody see where my issues are?:

MAIN.PY:

from flask import Flask, render_template
import requests

app = Flask(__name__)

blog_posts = requests.get("https://api.npoint.io/4370451396b51eb95e0a").json()

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


@app.route("/post/<int:num>")
def get_post(num):
    return render_template("post.html", post=blog_posts, ID=num)



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

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

</div>
</body>
<footer>
   
</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"] == ID %}  
                    <div class="content">
                         <div class="card">
                  
                            <h2>{{post["title"]}}</h2>
                            <p>{{post["body"]}}</p>
                        </div>
                    </div>
                {% endif %}
            {% endfor %}

</div>
</body>
<footer>
    
</footer>
</html>

@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.

@parkook
Copy link

parkook commented Jun 1, 2024

In main.py use your own url, as the solution url is incorrect and will give error.

Thanks, the solution code didn't work at first and was giving an error but after prining the posts, print(posts), I realised it has a different data than in the tutorial, so I changed your solution's URL with my url and it worked.

@parkook
Copy link

parkook commented Jun 3, 2024 •
edited

I had this challenge to use as less code in html as possible. But now realised the purpose of this challenge was to practice jinja :D so I am going to write it again using more jinja and also I like the way she used her post.py so am going to do it that way.

main.py

from flask import Flask, render_template
from post import Post

post = Post()
blog_title = post.get_data("title")
blog_subtitle = post.get_data("subtitle")
blog_body = post.get_data("body")
blog_id = post.get_data("id")
blogs_qty = len(blog_id)
print(blogs_qty)

app = Flask(__name__)


@app.route('/')
def home():
    return render_template("index.html", title=blog_title, subtitle=blog_subtitle, blogs=blogs_qty)


@app.route('/post/<num>')
def blog_post(num):  # (num) is a string when it comes from url_for() of Jinja from index.html
    number = int(num) - 1
    return render_template("post.html", title=blog_title[number],
                           subtitle=blog_subtitle[number], body=blog_body[number],
                           id=blog_id[number])


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

post.py

import requests


class Post:
    def __init__(self):
        response = requests.get("https://api.npoint.io/ec033ad7c14afde7ce19")
        response.raise_for_status()
        self.data = response.json()

    def get_data(self, enq):
        data_enquiry = [post[enq] for post in self.data]
        return data_enquiry

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 range(blogs) %}
    <div class="content">
        <div class="card">
            <h2>{{ title[0 + post] }}</h2>
            <p class="text">{{ subtitle[0 + post] }} </p>
            <a href="{{ url_for('blog_post', num=1+post) }}">Read</a> <!-- num=1 is a string -->
        </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 {{ id }}</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 {{ id }}</h1></div>
           </div>
        <div class="content">
            <div class="card">
                <h1>{{ title }}</h1>
                <h2>{{ subtitle }}</h2>
                <p> {{ 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