Make a News app with NewsApi

django-admin startproject "project name"
django-admin startapp "app name"
https://newsapi.org/ -> Top headlines -> Copy the url (looks like this )
https://newsapi.org/v2/top-headlines?country=us&apiKey="Your api key"
from django.shortcuts import renderimport requestsimport json# Create your views here.def home_view(request):url = "https://newsapi.org/v2/top-headlines?country=in&apiKey=25a911c33c9747ad965eae6348f799f8"response = requests.get(url)content_from_internet = json.loads(response.content)context={'data':content_from_internet,}return render(request,'index.html',context)
"""News URL ConfigurationThe `urlpatterns` list routes URLs to views. For more information please see:https://docs.djangoproject.com/en/3.1/topics/http/urls/Examples:Function views1. Add an import:  from my_app import views2. Add a URL to urlpatterns:  path('', views.home, name='home')Class-based views1. Add an import:  from other_app.views import Home2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')Including another URLconf1. Import the include() function: from django.urls import include, path2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))"""from django.contrib import adminfrom django.urls import path , includeurlpatterns = [path('admin/', admin.site.urls),path('',include('mynews.urls'))]
from django.urls import path , includefrom .views import home_viewurlpatterns = [path('',home_view,name='home'),]
<!doctype html><html lang="en"><head><!-- Required meta tags --><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- Bootstrap CSS --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous"><title>News APP</title></head><body><div class="container"><div class="row">{% for onedata in data.articles %}<div class="col-sm"><div class="card " style="width: 18rem;"><img src="{{onedata.urlToImage}}" class="card-img-top" alt="{{onedata.source.name}}"><div class="card-body "><h5 class="card-title ">{{onedata.title}}</h5><p class="card-text">{{onedata.description|truncatechars:150}}</p><a href="{{onedata.url}}" target="blank" class="btn btn-primary">Read</a></div></div></div>{% endfor %}</div></div><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script></body></html>
The file structure looks like this
Final website

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Beautiful Soup Tricks

Introduction to Babel

Monitoring Node.js Applications with SignalFx

Do more with less! Using render props

20 JavaScript Concepts you should know as a JavaScript Programmer!

Evolution of a Node.js API, Zoe.js — MongoDB

The Limitations of the Spread Operator

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nilay Paul

Nilay Paul

More from Medium

Deploy A Web App using Flask and Docker containers

Building your first web app with Flask

LeetCode 15. 3Sum — Python Solution

How to Randomize a Collection in Wix without Velo Code using Python and Selenium