From c42908923f3a8f6496a02eaa8d8f4a4617b841c6 Mon Sep 17 00:00:00 2001 From: Travcort Date: Sat, 27 Apr 2024 12:11:04 +0300 Subject: [PATCH 1/2] Tarvone's(Travcort) Hackathon Submission --- README.md | 13 ++++----- django_project/urls.py | 2 +- django_project/views.py | 55 ++++++++++++++++++++++++++++------- static/styles.css | 37 ++++++++++++++++++++---- templates/index.html | 63 ++++++++++++++++++++++++++++++----------- 5 files changed, 130 insertions(+), 40 deletions(-) diff --git a/README.md b/README.md index 7f829f7e..f88b0427 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ -## Python Bootcamp & Hackathon -Note: Clone this repo git clone ```https://github.com/PLPAfrica/Feb-2024-PythonHack2.git``` or simply click on ``Fork`` +## Python Bootcamp & Hackathon Project - Tarvone +Note: This repo was originally cloned from: ```https://github.com/PLPAfrica/Feb-2024-PythonHack2.git``` -Objectives During this bootcamp and hackathon, we will create a Blog website and weather app using a Third-party API, we are aiming to: +Objectives During this bootcamp and hackathon, were to create a weather app using a Third-party API, where the aim was to: - Understand JSON - Understand how to work with Static files in Django @@ -9,10 +9,9 @@ Objectives During this bootcamp and hackathon, we will create a Blog website and - Understand software development & Deployments - Understand software testing with pytest - Understand Database integration with Python Django -By the end of the bootcamp/sessions, you will be required to submit a project. Note: Clone this repo, edit to the requirements/instructions assigned by the Instructor -Submit the code for review +My project in particular uses the Weather API from ```https://www.weatherapi.com``` and also includes a Random Quote Generator API from ```https://type.fit/api/quotes``` to display weather updates and random quotes. + +The Weather API in particular allows end users to input a city of their choice in order to get the relevant updates. It also renders a default city incase the user fails to input a city of their choice. -### Note that the Best project will be rewarded with a certificate and some dollars 😊 -Note that the code will be updated everytime in class diff --git a/django_project/urls.py b/django_project/urls.py index ece665e5..f0da17c4 100644 --- a/django_project/urls.py +++ b/django_project/urls.py @@ -22,5 +22,5 @@ urlpatterns = [ path('admin/', admin.site.urls), - path('', views.home, name='home'), + path('', views.main, name='main'), ] diff --git a/django_project/views.py b/django_project/views.py index f9042b4c..d0bbb657 100644 --- a/django_project/views.py +++ b/django_project/views.py @@ -1,17 +1,52 @@ import requests +import random +from django.http import HttpRequest from django.shortcuts import render +from decouple import config -def home(request): - # USING APIS => Example 1 - response = requests.get('https://api.github.com/events') +def main(request: HttpRequest): + #THE WEATHER API + BASE_URL = 'https://api.weatherapi.com/v1/current.json?' + API_KEY = 'cf8227e228814bd894a131010242604' + CITY = str(request.GET.get('city', 'London')) + cityContext = CITY + + url = BASE_URL + 'key=' + API_KEY + '&q=' + CITY + response = requests.get(url) data = response.json() - result = data[0]["repo"] + time = data["location"]["localtime"] + region = data["location"]["region"] + country = data["location"]["country"] + latitude = data["location"]["lat"] + longitude = data["location"]["lon"] + timezone = data["location"]["tz_id"] + current_time = data["current"]["last_updated"] + temp_degrees = data["current"]["temp_c"] + temp_farenheit = data["current"]["temp_f"] + weather_description = data["current"]["condition"]["text"] + wind_speedKPH = data["current"]["wind_kph"] + wind_speedMPH = data["current"]["wind_mph"] + humidity = data["current"]["humidity"] + + weatherAPI = {'time': time, 'region': region, 'country': country, 'latitude': latitude, 'longitude': longitude, 'timezone': timezone, 'current_time': current_time, 'temp_degrees': temp_degrees, 'temp_farenheit': temp_farenheit,'weather_description': weather_description, 'wind_speedKPH': wind_speedKPH, 'wind_speedMPH': wind_speedMPH, 'humidity': humidity} + + + + #THE RANDOM QUOTES API + resp = requests.get('https://type.fit/api/quotes') + QUOTES = resp.json() + quote_index = random.randint(0, len(QUOTES) - 1) + quote = QUOTES[quote_index]["text"] + author = QUOTES[quote_index]["author"] + + quotesAPI = {'quote': quote, 'author': author} + + #Building the context for both the APIs + context = {**{'cityContext': cityContext}, **weatherAPI, **quotesAPI} + + + return render(request, 'templates/index.html', context) + - # Example 2 - reponse2 = requests.get('https://dog.ceo/api/breeds/image/random') - data2 = reponse2.json() - result2 = data2["message"] - - return render(request, 'templates/index.html', {'result': result, 'result2': result2}) \ No newline at end of file diff --git a/static/styles.css b/static/styles.css index 530d510b..b2a10fe7 100644 --- a/static/styles.css +++ b/static/styles.css @@ -1,9 +1,34 @@ -body{ - background: hotpink +body { + background: lightblue; } -img{ - width: 100px; - height: 100px; - border-radius: 9999; +h1 { + text-align: center; } + +input { + background-color: #ffffff; + border: none; + border-radius: 5px; + height: 30px; +} + +.display-boxes { + background-color: #222831; + color: #ffffff; + width: 30%; + margin: auto; + text-align: center; + font-family: sans-serif, monospace; + border-radius: 10px; + padding-bottom: 10px; + padding-top: 10px; + font-size: 20px; + margin-bottom: 10px; +} + +#quotes-box { + padding-bottom: 10px; + padding-top: 10px; + margin-top: 10px; +} \ No newline at end of file diff --git a/templates/index.html b/templates/index.html index b0f60817..eafed185 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1,22 +1,53 @@ {% load static%} - - - - - - - Document - - -

Hello, My name is Evans

+ + + + + + Trial + + +

WEATHER UPDATES, INSPIRATIONAL QUOTES AND GOOD VIBES

- {{result}} +
+ + + +
+ + + +
+

LOCATION DATA:
+ City: {{cityContext}}
+ Region: {{region}}
+ Country: {{country}}
+ Local Time: {{time}}
+ Latitude: {{longitude}}
+ Longitude: {{latitude}}
+ Timezone: {{timezone}}
+

+
+
+

WEATHER DATA:
+ Current recorded weather time: {{current_time}}
+ Current temperature: {{temp_degrees}} degrees celcius or {{temp_farenheit}} farenheit
+ Condition: {{weather_description}}
+ Current wind speed: {{wind_speedKPH}}KMH or {{wind_speedMPH}}MPH
+ Humidity: {{humidity}}
+

+
+ -

Random Pet

-{{result2}} - random pet - - + +
+

The Quote of the Day is:
+ {{quote}}
+ {{author}} +

+
+ + \ No newline at end of file From 4bc6937f0b7c5dd9e7355daf0d15da6e51317812 Mon Sep 17 00:00:00 2001 From: Travcort Date: Tue, 30 Apr 2024 21:46:32 +0300 Subject: [PATCH 2/2] Added the Unsplash API --- README.md | 4 +- django_project/views.py | 16 +++++++- static/styles.css | 21 ++++++++--- templates/index.html | 81 +++++++++++++++++++++++------------------ 4 files changed, 76 insertions(+), 46 deletions(-) diff --git a/README.md b/README.md index f88b0427..03761c3c 100644 --- a/README.md +++ b/README.md @@ -10,8 +10,8 @@ Objectives During this bootcamp and hackathon, were to create a weather app usin - Understand software testing with pytest - Understand Database integration with Python Django -My project in particular uses the Weather API from ```https://www.weatherapi.com``` and also includes a Random Quote Generator API from ```https://type.fit/api/quotes``` to display weather updates and random quotes. +My project in particular uses the Weather API from ```https://www.weatherapi.com``` and also includes a Random Quote Generator API from ```https://type.fit/api/quotes``` as well as the Unsplash API from ```https://api.unsplash.com/search/photos``` to display weather updates and random quotes. -The Weather API in particular allows end users to input a city of their choice in order to get the relevant updates. It also renders a default city incase the user fails to input a city of their choice. +The Weather API in particular allows end users to input a city of their choice in order to get the relevant updates. It also renders a default city incase the user fails to input a city of their choice. On the side it uses the Unsplash API to display to the user a random picture of the selected city. diff --git a/django_project/views.py b/django_project/views.py index d0bbb657..f3a11cbb 100644 --- a/django_project/views.py +++ b/django_project/views.py @@ -41,9 +41,21 @@ def main(request: HttpRequest): quotesAPI = {'quote': quote, 'author': author} - #Building the context for both the APIs - context = {**{'cityContext': cityContext}, **weatherAPI, **quotesAPI} + #THE UNSPLASH API + BASE_URL = 'https://api.unsplash.com/search/photos?' + client_id = 'Sxv9jRKP7YRhBpKSkyK8Y4wPbu2wU9_I75lZeawIOYo' + url = BASE_URL + 'client_id=' + client_id + '&query=' + CITY + + response = requests.get(url) + images = response.json() + image_index = random.randint(0, len(images) - 1) + image_display = images["results"][image_index]["urls"]["regular"] + + imageAPI = {'image_display': image_display} + + #Building the context for both the APIs + context = {**{'cityContext': cityContext}, **weatherAPI, **quotesAPI, **imageAPI} return render(request, 'templates/index.html', context) diff --git a/static/styles.css b/static/styles.css index b2a10fe7..9866123c 100644 --- a/static/styles.css +++ b/static/styles.css @@ -13,22 +13,31 @@ input { height: 30px; } +.image-box { + float: left; + width: 50%; +} +.container { + float: left; + width: 50%; +} + .display-boxes { background-color: #222831; color: #ffffff; - width: 30%; - margin: auto; + width: 80%; text-align: center; font-family: sans-serif, monospace; border-radius: 10px; padding-bottom: 10px; padding-top: 10px; font-size: 20px; + margin: auto; margin-bottom: 10px; } -#quotes-box { - padding-bottom: 10px; - padding-top: 10px; - margin-top: 10px; +#image { + height: 700px; + width: 100%; + border-radius: 30px; } \ No newline at end of file diff --git a/templates/index.html b/templates/index.html index eafed185..e517f2a0 100644 --- a/templates/index.html +++ b/templates/index.html @@ -10,44 +10,53 @@

WEATHER UPDATES, INSPIRATIONAL QUOTES AND GOOD VIBES

+
+
+
+ + + +
-
- - - -
- - - -
-

LOCATION DATA:
- City: {{cityContext}}
- Region: {{region}}
- Country: {{country}}
- Local Time: {{time}}
- Latitude: {{longitude}}
- Longitude: {{latitude}}
- Timezone: {{timezone}}
-

-
-
-

WEATHER DATA:
- Current recorded weather time: {{current_time}}
- Current temperature: {{temp_degrees}} degrees celcius or {{temp_farenheit}} farenheit
- Condition: {{weather_description}}
- Current wind speed: {{wind_speedKPH}}KMH or {{wind_speedMPH}}MPH
- Humidity: {{humidity}}
-

-
- - -
-

The Quote of the Day is:
- {{quote}}
- {{author}} -

+ +
+

LOCATION DATA:
+ City: {{cityContext}}
+ Region: {{region}}
+ Country: {{country}}
+ Local Time: {{time}}
+ Latitude: {{longitude}}
+ Longitude: {{latitude}}
+ Timezone: {{timezone}}
+

+
+
+

WEATHER DATA:
+ Current recorded weather time: {{current_time}}
+ Current temperature: {{temp_degrees}} degrees celcius or {{temp_farenheit}} farenheit
+ Condition: {{weather_description}}
+ Current wind speed: {{wind_speedKPH}}KMH or {{wind_speedMPH}}MPH
+ Humidity: {{humidity}}
+

+
+ + + +
+

The Quote of the Day is:
+ {{quote}}
+ {{author}} +

+
+ +
+ + +
+ Random Image +
+
- \ No newline at end of file