cloudly/script.js at main · devsamahd/cloudly · 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
/**
 * Weather App
 * TODO: Complete getWeatherData() to return json response Promise
 * TODO: Complete searchCity() to get user input and get data using getWeatherData()
 * TODO: Complete showWeatherData() to set the data in the the html file from response
 */

/* DIV ID's you'll need access to 👇
"city-name"
"weather-type"
"temp"
"min-temp"
"max-temp"
*/

// API_KEY for maps api

/**
 * Retrieve weather data from openweathermap
 * HINT: Use fetch()
 * HINT: URL should look like this:
 * https://api.openweathermap.org/data/2.5/weather?q=detroit&appid=a8e71c9932b20c4ceb0aed183e6a83bb&units=imperial
 */
const Text = (id, goto) => {
  document.getElementById(id).innerText = goto
}

getWeatherData = (city) => {
  const options = {
    method: 'GET',
    headers: {
      'X-RapidAPI-Key': '977c02944amsh1f7e9a998a71dcfp104073jsn8c7906a0feef',
      'X-RapidAPI-Host': 'weatherapi-com.p.rapidapi.com'
    }
  };

  return fetch(`https://weatherapi-com.p.rapidapi.com/current.json?q=${city}`, options)
    .then(response => response.json())
    .then(response =>  response)
    .catch(err => err);
  //CODE GOES HERE
}
/**
 * Retrieve city input and get the weather data
 * HINT: Use the promise returned from getWeatherData()
 */
const searchCity = async() => {
  const city = document.getElementById('city-input').value;
  // CODE GOES HERE
  const data = await getWeatherData(city)
  showWeatherData(data)
  }


/**
 * Show the weather data in HTML
 * HINT: make sure to console log the weatherData to see how the data looks like
 */
const showWeatherData = ({current, location}) => {
  //CODE GOES HERE
 try{
  location = `${location.name}, ${location.country}`
 temp = current.temp_c
  Text("weather-type",current.condition.text)
  Text("city-name",location)
  Text("temp",temp)
  Text("humidity",current.humidity)
  Text("wind",current.wind_kph)
 } catch(err){
  console.log("This is the error:",err)
 }
}

// Randoms
// const showWeatherData = ({current, location}) => {
//   //CODE GOES HERE
//  try{
//   location = `${location.name}, ${location.country}`
//  temp = current.temp_c
//   Text("weather-type",current.condition.text)
//   Text("city-name",location)
//   Text("temp",temp)
//   Text("humidity",current.humidity)
//   Text("wind",current.wind_kph)
//  } catch(err){
//   console.log("This is the error:",err)
//  }
// }