.card
 
  .detail
    .circle
    .apple-stuff
      i.fa.fa-wifi
      .time
        |12:00 AM
      i.fa.fa-battery-3.battery
    
    .weather-forecast
      .description
        |WEATHER APP <br> <i class="fa fa-bolt"></i>
      .city
        
      .temp
        
  .list
    form.weather-form
      input#city(placeholder="i.e. Detroit")
      br
      br
      button(type="submit")
        | Search Your City

@import bourbon
@import neat

$black: black
$white: #FAF7F5
$white2: rgba(255,255,255,0.9)
$gray: #9b9b9b
$blue1: #7FADAD
$yellow: #F4CD8B

+keyframes(container)
  0%
    perspective: 1000px
  100%
    perspective: 0px

+keyframes(card)
  0%
    +transform(rotateX(60deg) rotateY(-10deg) rotate(60deg) scale(1.05))
    box-shadow: 0px 0px 20px 10px shade($yellow, 20%)
  100%
    +transform(rotateX(0deg) rotateY(0deg) rotate(0deg) scale(0.9))
    box-shadow: 0px 0px 10px 4px shade($yellow, 10%)

html, body
  font-family: Roboto
  width: 100%
  margin: 0
  padding: 0
  background: $yellow
  perspective: 1000px
  -webkit-animation-fill-mode: forwards
  
  .card
    height: 38em
    width: 25em
    margin: 0 auto
    border-radius: 10px
    margin-top: 1em
    background: $blue1
    box-shadow: 0px 0px 20px 10px shade($yellow, 20%)
    overflow: hidden
    position: relative
    +animation(card 2s ease-in)
    -webkit-animation-fill-mode: forwards
      
    
    .detail
      position: absolute
      width: 100%
      height: 65%
      .circle
        position: absolute
        width: 35em
        height: 16em
        bottom: -51%
        left: 50%
        box-shadow: -2px -2px 9px shade($blue1, 7%)
        +transform(translateX(-50%))
        border-radius: 50%
        background: $white
        
  
      .apple-stuff
        padding: 2% 2%
        color: white
        background: shade($blue1, 20%)
        border-radius: 10px 10px 0px 0px
        .time
          display: inline
          position: absolute
          left: 50%
          font-weight: 300
          font-size: 0.8em
          +transform(translateX(-50%))   
        .battery
          margin-left: 21em
      .weather-forecast
        text-align: center
        color: $white2
        margin-top: 2em
        +transition(0.3s)
        .description
          font-size: 2em
          font-weight: 700
          letter-spacing: 0.06em
          position: relative
          margin-top: 2px
          i
            font-size: 4em
            margin-top: 0.3em
            text-shadow: 5px 2px 2px yellow
          
        .city
          font-weight: 300
          letter-spacing: 0.1em
          margin-top: 0.5em
        
        .temp
          font-size: 6em
          font-weight: 700
          margin-top: 0.1em
     
    
    .list
      position: absolute
      width: 100%
      height: 35%
      background: $white
      bottom: 0
      border-radius: 0px 0px 10px 10px
      h3
        
        
      .weather-form
        text-align: center
        margin-top: 5em
        input
          border: none
          font-weight: 300
          text-align: center
          position: absolute
          left: 50%
          width: 100px
          background: $white
          +transform(translateX(-50%))
          border-bottom: 3px solid rgba(0,0,0,0.2)
          &:focus
            outline: none
        button
          text-align: center
          display: inline-block
          padding: 0.4em 1em
          font-size: 1em
          position: absolute
          left: 50%
          +transform(translateX(-50%))
          border: none
          border-radius: 10px
          letter-spacing: 2px
          color: $white2
          background: $blue1
          width: 200px
          +transition(0.2s)
          &:hover
            background: shade($blue1, 15%)
          &:focus
            outline: none
          
            

API_KEY='cfa56b61bd0276e5ba17b2062f7a808a'
ROOT_URL = "http://api.openweathermap.org/data/2.5/forecast?&appid=#{API_KEY}"

String.prototype.capitalizeFirstLetter = -> 
  return this.charAt(0).toUpperCase() + this.slice(1)


fetchWeather = (city) ->
  url = "#{ROOT_URL}&q=#{city},us"
  $.get(url, (data) ->
    description = data.list[0].weather[0].description.capitalizeFirstLetter()
    kalvin = data.list[0].main.temp
    temp = Math.floor((kalvin - 273.15) * 1.8000 + 32.00 )
    $(".description").html("#{description}")
    $(".temp").html("#{temp}°F")
    $(".city").html(data.city.name + ", United States")
  )

$ ->
  $('.weather-form').submit (e)->
    city = $("input").val()
    e.preventDefault()
    fetchWeather("#{city}")
    $("input").val('')