Tarvone's(Travcort) Hackathon Submission

README.md

@@ -1,18 +1,17 @@
-## 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
 - Understand API
 - 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``` 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. On the side it uses the Unsplash API to display to the user a random picture of the selected city.
 
-### Note that the Best project will be rewarded with a certificate and some dollars 😊
 
-Note that the code will be updated everytime in class

django_project/urls.py

@@ -22,5 +22,5 @@
 
 urlpatterns = [
     path('admin/', admin.site.urls),
-  path('', views.home, name='home'),
+  path('', views.main, name='main'),
 ]

django_project/views.py

@@ -1,17 +1,64 @@
 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}
+
+
+                #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)
+
 
-  # 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})

static/styles.css

@@ -1,9 +1,43 @@
-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;
+}
+
+.image-box {
+  float: left;
+  width: 50%;
+}
+.container {
+  float: left;
+  width: 50%;
+}
+
+.display-boxes {
+  background-color: #222831;
+  color: #ffffff;
+  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;
+}
+
+#image {
+  height: 700px;
+  width: 100%;
+  border-radius: 30px;
+}

templates/index.html

@@ -1,22 +1,62 @@
 {% load static%}
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="{% static 'styles.css' %}" />
-   <!-- <link rel="stylesheet" href="/static/styles.css" /> -->
-  <title>Document</title>
-</head>
-<body>
-  <h1>Hello, My name is Evans </h1>
+  <head>
+    <meta name="viewport" width="device-width, initial-scale=1.0"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="{% static 'styles.css' %}" />
+    <title>Trial</title>
+  </head>
+  <body>
+    <h1>WEATHER UPDATES, INSPIRATIONAL QUOTES AND GOOD VIBES</h1>
+    <div class="whole-page">
+      <div class="container">
+        <form class="display-boxes">
+          <label for="city">Enter a City of your Choice:</label>
+          <input type="text" id="city" name="city" placeholder="'Nairobi'">
+          <button type="submit">Search</button>
+        </form>
 
-  {{result}}
 
-  <h1>Random Pet</h1>
-{{result2}}
-  <img src={{result2}} alt="random pet" />
-
-</body>
+                <!-- THE WEATHER API STARTS HERE -->
+        <div class="display-boxes">
+          <p><strong>LOCATION DATA:</strong><br>
+            City: {{cityContext}}<br>
+            Region: {{region}}<br>
+            Country: {{country}}<br>
+            Local Time: {{time}}<br>
+            Latitude: {{longitude}}<br>
+            Longitude: {{latitude}}<br>
+            Timezone: {{timezone}}<br>
+          </p>
+        </div>
+        <div class="display-boxes">
+          <p><strong>WEATHER DATA:</strong><br>
+            Current recorded weather time: {{current_time}}<br>
+            Current temperature: {{temp_degrees}} degrees celcius or {{temp_farenheit}} farenheit<br>
+            Condition: {{weather_description}}<br>
+            Current wind speed: {{wind_speedKPH}}KMH or {{wind_speedMPH}}MPH<br>
+            Humidity: {{humidity}}<br>
+          </p>
+        </div> 
+              <!-- THE WEATHER API ENDS HERE -->
+
+              <!-- THE RANDOM QUOTES API STARTS HERE --> 
+        <div class="display-boxes">
+          <p><strong>The Quote of the Day is:</strong><br>
+            {{quote}}<br>
+            {{author}}
+          </p>
+        </div>
+              <!-- THE RANDOM QUOTES API ENDS HERE -->
+      </div>
+
+           <!-- THE IMAGE API STARTS HERE -->
+      <div class="image-box">
+        <img id="image" src="{{image_display}}" alt="Random Image"/>
+      </div>
+           <!-- THE IMAGE API ENDS HERE -->
+    </div>
+  </body>
 </html>