Wei-HaiMing · Wei-HaiMing · May 14, 2024 · May 14, 2024 · May 15, 2024 · May 15, 2024
diff --git a/README.md b/README.md
@@ -3,8 +3,10 @@ Done by Armando Vega, Eduardo Sanchez, Lily Saragoza and Gabriel
 Class: Digital Multimedia (Cst205)
 Created:4/22/2024
 
-The program can be run on terminal with the command flask --app weather.py --debug run
+The program can be run on powershell with the command flask --app weather.py --debug run
 This will give you the link for the website Otter Weather. When you get to the home page it will ask you to enter any City you would like to search the weather conditions of 
 and it will take you the details page where it will give you the detail such as temperature both in degrees Farenheight and Celsius as well as the wind speed.
 In the future we will like to enter functionality that doesn't require entering a city but rather use location where you can enter the route which displays how the weather conditions 
 change throughout your trip.
+
+GitHub Link: https://github.com/Wei-HaiMing/WeatherProject
diff --git a/__pycache__/weather.cpython-312.pyc b/__pycache__/weather.cpython-312.pyc
diff --git a/templates/Weather_Details.html b/templates/Weather_Details.html
@@ -1,4 +1,6 @@
-<! This was created Eduardo Sanchez but was worked with Grabriel ––> 
+<! This was created Eduardo Sanchez and was worked on by Grabriel and formatted by Liliana––> 
+<!--Gabe: Added initial display functionality. All data access and display and mathematical conversion was coded by me. 
+The formatting stuff and image addition was done by Lily and Eduardo. -->
 
 <!DOCTYPE html>
 <html lang="en">
@@ -16,6 +18,8 @@
     <title>Otter Weather</title>
 
     <style>
+        /* This section of the code controls the formatting for the different display types.
+        Anything created with <h1> for example, will be consistently formatted. -Lily*/
         body {
             font-family: Poppins, sans-serif;
             text-align: center;
@@ -38,6 +42,8 @@
             font-size: 70px;
             margin-bottom: 20px;
         }
+        /* These were meant to add an effect to the scrolling on the webpage.
+        We plan to implement this feature in the fututre. -Lily */
         .parallax-1{
             background-image: url('/templates/hot.jpg') no-repeat;
             background-size:cover;
@@ -50,6 +56,7 @@
     </style>
 </head>
   <body>
+    <!-- The following is Web page content. -Lily -->
       <!-- <div class="container"> -->
         <section class="parallax-1">
             <div class="parallax-inner">
@@ -58,15 +65,16 @@ <h1> Otter Weather</h1>
         </section>
           <h2> Weather in {{city_name}}</h2>
           <br>
-          <!-- Kelvin to Fahrenheit & Celsius conversions done below. -->
+          <!-- Kelvin to Fahrenheit & Celsius conversions done below. - Gabe -->
           <p> Temperature Fahrenheit:<br> {{(((weatherdata['main']['temp']) - 273.15) * 1.8 + 32) | round(2)}}°F</p>
           <p>Temperature Celsius:<br> {{((weatherdata['main']['temp']) - 273.15) | round(2)}}°C</p>
 
           {% set temp_celsius = ((weatherdata['main']['temp']) - 273.15) | round(2) %}
           <p>Wind Speed:</p>
+<!--             Conversion from standard meters per second to miles per hour windspeed done below. - Gabe -->
           <p> {{weatherdata['wind']['speed'] | round(2)}}m/s or {{((weatherdata['wind']['speed']) * 2.23694) | round(2)}}mpH </p>
-           <p>Humidity{humidity} </p>
-          <p>Weather Condition: {weather_condition}</p>   
+           <p>Humidity: {{weatherdata['main']['humidity']}}g/kg^-1 </p>
+          <p>Weather Condition: {{weatherdata['weather'][0]['description']}}</p>   
 
            {% if temp_celsius < 0 %}
               <style>
@@ -106,6 +114,7 @@ <h2> Weather in {{city_name}}</h2>
               </style>
           {% endif %} 
           <img src="/static/images/{{icon_name}}" width="100" class="img-fluid rounded" alt="weather_icon" />
+
       </div>
   </body>
 </html>
diff --git a/templates/detailStyle.css b/templates/detailStyle.css
@@ -1,5 +1,7 @@
 /* CSS file created 05/13/2024 - Liliana R. Saavedra
 credits: Codehal on YouTube
+This CSS file was meant to be an extension to the current details page, and
+would add functionality to the Parallax effect we wanted to add.
 */
 @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 /* {
@@ -10,7 +12,7 @@ credits: Codehal on YouTube
 } */
 
 body{
-    background: #b40a0a;
+    background: #02ff24;
 }
 .parallax-1{
     background-image: url('/templates/hot.jpg');

diff --git a/templates/home.html b/templates/home.html
@@ -1,4 +1,5 @@
-<! Was created and worked by Eduardo Sanchez but later was modified by Lily Saragoza––> 
+<!-- <! Was created and worked by Eduardo Sanchez but later was modified by Lily Saavedra––>  -->
+<!--Gabe: Added form and search capability, returns string to python file.  -->
 <!DOCTYPE html>
 <html>
     <head>
@@ -7,12 +8,13 @@
         <title>Weather</title>
     </head>
         <style>
+            /* This changes the background color for the main page */
             body{
                 background-color:rgb(200, 242, 255);
 
-                background-image: url('imagename.jpg');
-
+            }
         </style>
+
     <body>
         <div class="container">
             <h1> Otter Weather </h1>

diff --git a/weather.py b/weather.py
@@ -2,9 +2,21 @@
 Authors: Armando, Lily, Eduardo, Gabe
 Course: CST-205
 Date: 05/14/2024
-
+Summary: Runs a flask app that allows for the user to enter in a city name
+and brings a second page with some weather information of that city currently.
+GitHub Link: https://github.com/Wei-HaiMing/WeatherProject
 =======
 Gabe and Armando mostly worked on this python file 
+Armando: I worked on understanding the parameters that the API we used
+and how to retrieve the correct information in order for city name 
+searches to function properly. Also retrieved and displayed weather
+icon on the weather details page. I attempted to retrieve a map from the
+API, but was unsuccessful.
+
+Gabe: Coded app routes to each individual page. Took Armando's initial json and request code, and added functionality and test endpoints 
+for each individual data dump. Coded the form in home route such that it returned a string that was the user city search input.
+Keying, API access and research in these aspects were done by Armando, and I built upon them by looking into json dumps and coding HTML
+to display data from the requests. Added longitude and latitude data access directly for convenience.
 """
 from flask import  Flask, render_template, request, redirect
 from PIL import Image
@@ -16,21 +28,23 @@
 import requests
 import numpy as np
 
-my_key = "77b4df041ddc47e427d8799ea237cb80"
+my_key = "77b4df041ddc47e427d8799ea237cb80" # API key
 
 app = Flask(__name__)
 bootstrap = Bootstrap5(app)
 
 
-@app.route('/', methods=['GET', 'POST'])
+@app.route('/', methods=['GET', 'POST']) # route to homepage
 def homepage():
     global city_name
     city_name = request.form.get('citytxtbox')
     return render_template('home.html', city_name = city_name)
+    # Defines the route to homepage, intakes city name via form in html named citytxtbox
+
 
 
 @app.route('/details')
-def link():
+def link(): # route to details page
     city_name = request.args.get('citytxtbox')
 
     limit = 1
@@ -39,6 +53,7 @@ def link():
     # geo test endpoint:
     # https://api.openweathermap.org/geo/1.0/direct?q=Monterey&limit=1&appid=77b4df041ddc47e427d8799ea237cb80
 
+    # retrieves longitude and latitude from GeoEncoder API 
     try:
         greq = requests.get(geo_endpoint)
         geodata = greq.json()
@@ -52,40 +67,23 @@ def link():
     weather_endpoint = f"https://api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={my_key}"
     # weather test endpoint
     # https://api.openweathermap.org/data/2.5/weather?lat=36.600256&lon=-121.8946388&appid=77b4df041ddc47e427d8799ea237cb80
-
+    # retrieves the weather data to be displayed on details page 
     try:
         wreq = requests.get(weather_endpoint)
         weatherdata = wreq.json()
     except:
         print("Weather Endpoint Fail Error!")
 
 
-    op = "clouds_new"
-    zoom = 2
-    x = 2
-    y = 2
+
     icon_code = weatherdata["weather"][0]["icon"]
 
-    map_endpoint = f"https://tile.openweathermap.org/map/{op}/{zoom}/{x}/{y}.png?appid={my_key}"
-    icon_url = f"https://openweathermap.org/img/wn/{icon_code}@2x.png"
+    # map_endpoint = f"https://tile.openweathermap.org/map/{op}/{zoom}/{x}/{y}.png?appid={my_key}"
+    icon_url = f"https://openweathermap.org/img/wn/{icon_code}@2x.png" #endpoint for icon retrieval
 
     urllib.request.urlretrieve(icon_url, "static/images/weather_icon.png")
 
     my_src = Image.open('weather_icon.png')
-    # my_src.show()
-
-    # try:
-    #     map_req = requests.get(map_endpoint)    
-    #     # print(f"request thing {map_data}")
-
-    #     # map_img = Image.open(map_img)
-    #     # mapdata = map_req.json()
-    #     # map_img.show()
-    # except:
-    #     print("Map Endpoint Fail Error!")
-
-    pprint(f"geodata->{geodata}")
-    pprint(f"weatherdata->{weatherdata}")
-    # pprint(mapdata.type())
+
     return render_template('Weather_Details.html', city_name = city_name, geodata = geodata, weatherdata = weatherdata, icon_name = "weather_icon.png")