Project Title: Weather-API

Your Weather Forecast

Description:

• I have created a weather app that tells your forecast based on your latitude and longitude.

Features:

• 2 methods for finding your latitude and longitude (If you allow location access, it autofills)

• Weather with either Imperial (U.S.A) Units or Metric Units

• Today's Forecast & 7 Day Forecast

  • High Temp
  • Low Temp
  • Sunrise
  • Sunset
  • Rain
  • Snowfall
  • Max Wind
  • Wind Direction

• Hourly Forecast

  • Time
  • Temp
  • Cloud Cover
  • Humidity
  • Rain
  • Snowfall
  • Wind Speed

• If you change the latitude and longitude, then run it again, new values appear in the table

What I've Learned/Reinforced

• HTML:
  • How to link the HTML file to the CSS/JS files
  • How to add images to my HTML file with relative links
  • The various HTML elements that we can use (divs, forms, input types of text vs button, lists, line breaks, tables)
  • The different ID's or classes we can assign to our HTML elements
• CSS:
  • Using flexbox to style/organize my HTML elements
  • Customizing colors and table elements (like borders)
  • How to apply a gradient background to the entire page
  • How to use the "display" style with a value of 'none' and 'flex' and 'block' to show/hide my HTML elements
  • Responsive CSS with the resizing of the screen
• Javascript:
  • How to utilize navigator.geolocation property & getCurrentPosition() method to find the latitude/longitude
  • How to utilize document.querySelector to connect our HTML and Javascript files (DOM)
  • How an event listener connected to a function needs to come after the function it's referencing
  • How to connect my Javascript file to an API (Application Programming Index)
  • How to write/structure a function to call the API
    • async function getData (search) {
      • search.preventDefault()
      • fetch()
      • .then (res => {return res.json()})
      • .then(res => {your function and what you want to do with the API data}
      • .catch(err => {console.log(Error!, err)}) }
  • Scope, via trying to create a unit converter on API data ouput within/from an async function
• General:
  • The importance of planning ahead and starting early, so glaring errors (like keys not working) can be addressed
  • Working together with classmates and brainstorming/troubleshooting
  • How to branch in Github

Credits:

• Open-Meteo Weather API

• Image Sites Used

  • Icons
  • Latitude/Longitude Map
  • Wind Direction Key

• HTML/CSS/Javascript Sites Used

  • W3Schools - CSS Gradients
  • W3Schools - Display Property (None vs. Flex)
  • CSS-Tricks - Flexbox
  • MDN Mozilla - Geolocation
  • MDN Mozilla - navigator.geolocation
  • Youtube - Creating HTML Table (connected to an array) with Javascript
  • W3Schools - String Slice
  • W3Schools - "Enter" Button Event Listener

• People Who Supported Me

  • SEI Instructional Team (Jeremy/Tiffany/Brittany/Kristina/Tylus) for guidance, suggestions, and problem solving
  • SEI Classmates (Everyone) for brainstorming, sharing ideas, and keeping me company in Zoom breakout rooms