FCC Local Weather App

FCC Local Weather App.markdown

FCC Local Weather App

A web app that shows the local weather. On this app I used Jade, Sass, Javascript, Forcast.io, Geocoder.ca, and Weather Icons.

A Pen by Adam Recvlohe on CodePen.

License.

index.html

p#error
.container
  p#name
  .default Share Your Location to Get The Local Weather!
  .box
    #temp
    #button-box
      span.button#button-f.activated °F
      span.button#button-c °C
  .box
    p#icon
    p#summary
small
  pre This App Is Powered 
      | by 
      a(href="http://forcast.io" target="_blank") Forcast.io
      | , 
      a(href="http://geocoder.ca" target="_blank") Geocoder.ca 
      = "\n"
      | and 
      a(href="http://erikflowers.github.io/weather-icons/" target="_blank") Weather Icons

script.js

$(document).ready ->
  lat = undefined
  lon = undefined
  temp = undefined
  
  getLocationAndWeather = ->
    # If brwoser supports HTML5 geolocation then execute the getWeather function
    getWeather = (position) ->
      # Locate nearest city using Geocoder.ca API
      geocodeAPI = 'http://geocoder.ca/?latt=' + lat + '&longt=' + lon + '&reverse=1&allna=1&geoit=xml&corner=1&json=1'
      $.getJSON geocodeAPI, (data) ->
        $('#name').html 'The current weather in ' + data.city + ', ' + data.prov
        return
      # Using forcast api to get the current weather.
      Forcast_API_KEY = '464271a84e193070f9a5d159c9574296'
      forcastAPI = 'https://api.forecast.io/forecast/' + Forcast_API_KEY + '/' + lat + ',' + lon + '?callback=?'
      # Could only use an ajax request because the getJSON request was causing a cross domain error
      $.ajax
        url: forcastAPI
        dataType: 'jsonp'
        crossDomain: true
        success: (data) ->
          $('.default').remove();
          $('#button-box').css('opacity', '1');
          # Return summary
          $('#summary').html data.currently.summary
          # Return temperature
          temp = Math.floor(data.currently.temperature)
          $('#temp').html temp + '°F'
          #Switch up the weather icons based on the current condition
          switch data.currently.icon
            when 'clear-day'
              $('#icon').html '<i class="wi wi-day-sunny"></i>'
            when 'clear-night'
              $('#icon').html '<i class="wi wi-night-clear"></i>'
            when 'rain'
              $('#icon').html '<i class="wi wi-day-rain-mix"></i>'
            when 'snow'
              $('#icon').html '<i class="wi wi-day-snow"></i>'
            when 'sleet'
              $('#icon').html '<i class="wi wi-day-sleet"></i>'
            when 'wind'
              $('#icon').html '<i class="wi wi-day-windy"></i>'
            when 'fog'
              $('#icon').html '<i class="wi wi-day-fog"></i>'
            when 'cloudy'
              $('#icon').html '<i class="wi wi-day-cloudy"></i>'
            when 'partly-cloudy-day'
              $('#icon').html '<i class="wi wi-day-cloudy"></i>'
            when 'partly-cloudy-night'
              $('#icon').html '<i class="wi wi-night-cloudy"></i>'
            else
              $('#icon').html '<i class="wi wi-day-sunny"></i>'
              break
          return

      return

    # Throw errors if location is not defined

    showError = (error) ->
      switch error.code
        when error.PERMISSION_DENIED
          $('#error').html 'User denied the request for Geolocation.'
        when error.POSITION_UNAVAILABLE
          $('#error').html 'Location information is unavailable.'
        when error.TIMEOUT
          $('#error').html 'The request to get user location times out.'
        when error.UNKNOWN_ERROR
          $('#error').html 'An unknown error occurred.'
      return

    if navigator.geolocation
      navigator.geolocation.getCurrentPosition ((position) ->
        # Log the latitude and longitude 
        lat = position.coords.latitude
        lon = position.coords.longitude
        # After coordinates are found then call the getWeather function
        getWeather()
        # Only call this function 6 times a day when the browser is open
        setInterval getWeather(), 144000000
        return
      ), showError
    else
      $('#location').html 'Geolocation is not supported by this browser.'
    return

  # Toggle the temperature between Fahrenheit and Celsius

  changeTemp = ->
    $('#button-c').click ->
      $('#button-c').addClass 'activated'
      $('#button-f').removeClass 'activated'
      $('#temp').html Math.floor((temp - 32) * .5555555) + '&deg;C'
      return
    $('#button-f').click ->
      $('#button-f').addClass 'activated'
      $('#button-c').removeClass 'activated'
      $('#temp').html temp + '&deg;F'
      return
    return

  getLocationAndWeather()
  changeTemp()
  return

# ---
# generated by js2coffee 2.1.0

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

style.css

$blue: rgba(51, 153, 255, .6)
body
  background-color: $blue
  .container
    width: 60%
    min-width: 200px 
    margin: 0 auto
    font:
      family: 'Open Sans', sans-serif
      weight: 300
    background-color: $blue
    padding: 2em
    border-radius: 2.5em
    color: white
    margin-top: 5em
    border: 5px solid white
    text-align: center
    display: flex
    justify-content: center
    flex-wrap: wrap
    .default
      font-size: 2.2em
      @media(max-width: 400px)
        font-size: 1.5em

    p
      margin: .5em
    #name
      min-width: 100%
      font:
        size: 3em
      @media(max-width: 600px)
        font-size: 2em
      @media(max-width: 400px)
        font-size: 1.5em
    #temp
      min-width: 250px
      font:
        size: 8em
      @media(max-width: 600px)
        font-size: 5em
      @media(max-width: 400px)
        font-size: 3em
    #button-box
      margin-top: .5em
      opacity: 0
      .button
        color: white
        padding: .2em 1em
        font:
          size: 1em
          weight: 700
        border: 2px solid white
        border-radius: 1.5em
        margin: 0 .25em
        transition: all ease-in-out .5s 
        &:hover
          background-color: white
          border: 2x solid white
          color: $blue
          cursor: pointer
        &.activated
          background-color: white
          color: $blue
          border: 2px solid white
    #icon
      margin-top: 3em
      i
        font-size: 7em
        @media(max-width: 600px)
          font-size: 5em
        @media(max-width: 400px)
          font-size: 3em
    #summary
      font:
        size: 2em
      text-transform: capitalize
      @media(max-width: 400px)
        font-size: 1.5em
  pre
    border: none
    background: none
    font-family: Open Sans
    color: white
    a
      &:hover
        text-decoration: none
  

styles

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://cdnjs.cloudflare.com/ajax/libs/weather-icons/1.3.2/css/weather-icons.min.css" rel="stylesheet" />