Skip to content

Instantly share code, notes, and snippets.

@angelabauer
Created October 21, 2020 10:06
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 6 You must be signed in to fork a gist
  • Save angelabauer/df4ab0709c788cfdcf81a00316f4f018 to your computer and use it in GitHub Desktop.
Save angelabauer/df4ab0709c788cfdcf81a00316f4f018 to your computer and use it in GitHub Desktop.
<!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>
from flask import Flask, render_template
from post import Post
import requests
posts = requests.get("https://api.npoint.io/5abcca6f4e39b4955965").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)
<!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>
class Post:
def __init__(self, post_id, title, subtitle, body):
self.id = post_id
self.title = title
self.subtitle = subtitle
self.body = body
@Danielization
Copy link

After you click the "read" link, it shows: "GET /post/static/css/styles.css HTTP/1.1" 404 -
This is because the post.html is in different file location than the styles.css, not in the same hierarchy.
Therefore, you need to add "../"

@Anshu-webDev
Copy link

can anyone give/paste the link here for the starting files for this project. because it giving me an error

@Anshu-webDev
Copy link

After you click the "read" link, it shows: "GET /post/static/css/styles.css HTTP/1.1" 404 -
This is because the post.html is in different file location than the styles.css, not in the same hierarchy.
Therefore, you need to add "../"

thanks bro

@alozieoge
Copy link

After you click the "read" link, it shows: "GET /post/static/css/styles.css HTTP/1.1" 404 -
This is because the post.html is in different file location than the styles.css, not in the same hierarchy.
Therefore, you need to add "../"

👍 Good catch.

@shobhitsadwal
Copy link

hello everyone , i didnt understand why did angela put post.py in the folder , I am really confused because first of all ,I see no use of it and also she didnt mention anything with regards to the post.py file in the instructions method .

@shobhitsadwal
Copy link

this is the index.py

`

<title>Title</title>
<div class="top">
    <div class="title"><h1>My Blog</h1></div>
</div>
 {% for i in things: %}
<div class="content">
    <div class="card">
        <h2>{{i["title"]}}</h2>
        <p class="text">{{i["subtitle"]}}  </p>
        <a href="{{url_for('blogger',name=i['id'])}}">Read</a>
    </div>
</div>

{%endfor%}

Made with ♥️ in London.

` **this is the post.html**

`

<title>Title</title>

My Blog

{%for i in johnny :%} {%if i["id"]==naam%}:

{{i["title"]}}

{{i["body"]}}

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

Made with ♥️ in London.

`

this is main.py

`
from flask import Flask, render_template
import requests

app = Flask(name)

@app.route('/')
def home():
site=requests.get('https://api.npoint.io/88f9d39bf4877ae5f829')
jon=site.json()
return render_template("index.html",things=jon)

@app.route('/post/int:name')
def blogger(name):
site = requests.get('https://api.npoint.io/88f9d39bf4877ae5f829')
jon = site.json()
return render_template('post.html',naam=name,johnny=jon)

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

`

@SAM-BOGHARA
Copy link

Can anybody put json data in the comments bcoz link given by angela is showing null json data,,, and n point is also working badly,, typing is not possible there rn.

@Ugotactics
Copy link

Ugotactics commented Aug 27, 2022

Here's a dummy json file you can work with. The keys were arranged in alphabetical order so feel free to edit and shorten it as you like..................................

[
{
"id":"1",
"body":"Ugo Humbert begins play in the round of 128 of the US Open versus Benjamin Bonzi, after being eliminated in the round of 32",
"title":"Ugo Humbert: US Open Betting Odds and Preview ",
"subtitle":"Ugo Humbert: US Open Betting Odds and Preview "
},

{
"id":"2",
"body":"In a match slated for Monday, Ugo Humbert (No. 143 in rankings) will face Benjamin Bonzi (No. 50) in the Round of 128 of the US Open. Bonzi is the favorite (-125) to get to the round of 64 against the underdog Humbert (-102). Tennis odds courtesy of Tipico Sportsbook. Odds updated Friday at 2:38 PM ET. For a full list of sports betting odds, access USA TODAY Sports Betting Scores Odds Hub. ",
"title":"US Open Preview: Benjamin Bonzi vs. Ugo Humbert Betting Odds.,
"subtitle":"In a match slated for Monday, Ugo Humbert (No. 143 in rankings) will face Benjamin Bonzi (No. 50) in the Round of 128"
},

{
"id":"3",
"body":"Defensive back Ugo Amadi said the Tennessee Titans want him playing nickelback. Amadi, a Nashville native and John Overton High School graduate, had his first practice with the Titans Thursday, the last day of training camp. He’s expected to play in Saturday’s preseason game against the Arizona Cardinals.",
"title":"How Ugo Amadi sees role with Tennessee Titans, other last training camp practice takeaways ",
"subtitle":"Defensive back Ugo Amadi said the Tennessee Titans want him playing nickelback. "
}
]

@Hogbunike
Copy link

can someone please provide the static/styles.css folder....

@Hashirrazzaq256
Copy link

is anyone having issues with show_post function? the requested_post element is not sending data to post.html hence my posts are not displaying .CSS is displaying tho

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