tompociuscom/script.js at master · pociust/tompociuscom · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
document.getElementById('landing-button-div').addEventListener('click', () => {
  document
    .getElementById('section-2')
    .scrollIntoView({ block: 'start', behavior: 'smooth' });
});

const forecastURL = 'https://api.openweathermap.org/data/2.5/forecast?';
const endBaseURL = '&units=imperial&appid=35b0242376c730106a1ead757ba5708a';
const cityArray = [
  'Chicago',
  'Miami',
  'London',
  'New York',
  'Boston',
  'Tokyo',
  'Glen Ellyn',
  'Marco Island'
];

$(function() {
  var $beer, createBubbles, defaults;
  defaults = {
    MAX_BUBBLE_SIZE: 100,
    MAX_BLUR: 10,
    MAX_ANIMATION_DURATION: 8000
  };
  $beer = $('.beer');
  createBubbles = function(bubbleCount) {
    var $bubble,
      bubbleBlur,
      bubbleDelay,
      bubbleOpacity,
      bubbleScale,
      bubbleSize,
      bubbleSpeed,
      i,
      ref,
      results,
      xPos,
      yPos;
    results = [];
    for (
      i = 0, ref = bubbleCount;
      0 <= ref ? i < ref : i > ref;
      0 <= ref ? i++ : i--
    ) {
      xPos = Math.floor(Math.random() * 100 + 1);
      yPos = Math.floor(Math.random() * 25 + 1);
      bubbleSize = Math.floor(Math.random() * defaults.MAX_BUBBLE_SIZE + 1);
      bubbleDelay = Math.floor(Math.random() * 100 * bubbleCount + 1);
      bubbleScale = bubbleSize / defaults.MAX_BUBBLE_SIZE;
      bubbleBlur = bubbleScale * defaults.MAX_BLUR;
      bubbleSpeed =
        (1 - bubbleScale * bubbleScale) * defaults.MAX_ANIMATION_DURATION;
      bubbleOpacity = 0.25 * (1 - bubbleScale);
      $bubble = $('<div>')
        .addClass('bubble')
        .css({
          width: bubbleSize + 'px',
          height: bubbleSize + 'px',
          left: xPos + '%',
          top: yPos + '%',
          'animation-delay': bubbleDelay + 'ms',
          'animation-duration': bubbleSpeed + 'ms',
          filter: 'blur(' + bubbleBlur + 'px)',
          opacity: bubbleOpacity
        });
      results.push($beer.append($bubble));
    }
    return results;
  };
  return createBubbles(100);
});

let city = cityArray[Math.floor(Math.random() * cityArray.length)];
searchCity(city);

function searchCity(city) {
  let queryURL = forecastURL + `q=${city}` + endBaseURL;

  $.ajax({
    url: queryURL,
    method: 'GET'
  }).then(function(response) {
    displayCityInfo(response);
  });
}

function displayCityInfo(response) {
  let createDiv = $(
    `<h2>
      ${response.city.name},<span class="small-country"> ${response.city.country}</span>
    </h2>
    <div>
      ${response.list[0].main.temp}°F
    </div>
    <img src="http://openweathermap.org/img/wn/${response.list[0].weather[0].icon}@2x.png">
    <div>
      Humidity: ${response.list[0].main.humidity}%
    </div>
    <div>
      Wind: ${response.list[0].wind.speed}MPH
    </div>
    <div class="label absolute">Check the weather! </div>

  `
  );
  $('#searched-city-info').html(createDiv);
}