Relaxio/script.js at main · DivyanshTulsiani/Relaxio · 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
110
111
112
113
114
115
116
117
118
119
120
121


const weatherKey = "194292bb0f634338cecba7fe5f882312";
function startbutton(){
  let inp = document.getElementById("inputbox1");
  let cityname = inp.value
  console.log("hi" + cityname);
  fetchdata(cityname);
  let disp = document.getElementById("Weatherdisplay");
  disp.style.display = "flex";
}


function weatherToMood(weather) {
  const weatherDescription = {
      "clear": "The sun's out, sunglasses on! Perfect day to shine like the weather. 😎☀️",
      "clouds": "Fluffy clouds drifting by... maybe they’re gossiping about us? ☁️🤔",
      "rain": "Raindrops are nature's way of saying 'Stay in and sip some hot cocoa.' ☔🍵",
      "thunderstorm": "Boom! Crack! Mother Nature’s hosting a rock concert. 🎸⚡",
      "snow": "Winter magic in the air! Time to build a snowman or have an epic snowball fight. ❄️⛄",
      "mist": "A dreamy mist, like you’ve stepped into a mysterious fantasy novel. 📖🌫️",
      "fog": "Fog so thick, even ghosts might get lost. Drive safe! 👻🌁",
      "haze": "The world looks like an Instagram filter today. #NoFilterNeeded 🌆",
      "smoke": "The air’s got that smoky vibe—like a BBQ party but without the food. 🍗🚫",
      "dust": "Dusty winds blowing! Feels like you’ve been transported to an old Western movie. 🤠🌵",
      "sand": "Sandstorm incoming! Time to cover up and pretend you’re in a desert adventure. 🏜️🥷",
      "ash": "Volcanic ash? Yikes! Feels like a post-apocalyptic movie scene. Stay indoors! 🌋🚷",
      "squall": "Hold onto your hats! The wind’s trying to steal them. 🎩💨",
      "tornado": "Twister alert! Channel your inner storm chaser or, better yet, seek shelter! 🌪️🏃‍♂️",
  };

  return weatherDescription[weather] || "The weather's doing its thing—time to enjoy some good tunes! 🎶😊";
}

function weatherTOEmoji(weather){
  const weatherEmojiMap= {
      "clear": "https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Sun%20with%20Face.png",
      "clouds": "https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Cloud.png",
      "rain": "https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Umbrella%20with%20Rain%20Drops.png",
      "thunderstorm": "https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Cloud%20with%20Lightning%20and%20Rain.png",
      "snow": "https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Snowman.png",
      "mist": "https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Foggy.png",
      "fog": "https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Fog.png",
      "haze": "https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Foggy.png",
      "smoke": "https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Fog.png",
      "dust": "https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Tornado.png",
      "sand": "https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Tornado.png",
      "ash": "https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Mount%20Fuji.png",
      "squall": "https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Fog.png",
      "tornado": "https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Tornado.png"

  };


  if(weatherEmojiMap[weather]){

      console.log(weatherEmojiMap[weather]);
      return weatherEmojiMap[weather];
  }
  return "https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Globe%20Showing%20Asia-Australia.png";
}
async function fetchdata(cityname) {
  try{
    const respone = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${cityname}&appid=${weatherKey}&units=metric`)
    const response2 = await fetch('https://thequoteshub.com/api/')
    if(!respone.ok){
      alert("Incorrect city name")
      throw new Error("Incorrect City Name")
    }
    if(!response2.ok){
      alert("Some Error Occured")
      throw new Error("Some Error Ocuured")
    }
    const incomdata = await respone.json()
    const incomdata2 = await response2.json()
    let authorname = await incomdata2.author
    let quote = await incomdata2.text
    console.log("success");
    let tem = await incomdata.main.temp;
    let temfeel = await incomdata.main.feels_like;
    let name = await incomdata.name
    let conditions = await incomdata.weather[0].description
    let emojitype = await incomdata.weather[0].main
    console.log(emojitype);
    let emojitype2 = emojitype.toLowerCase()
    let emoji = weatherTOEmoji(emojitype2)
    let mood = weatherToMood(emojitype2)
    console.log(emoji)
    let visible = incomdata.visibility
    console.log(tem)
    let statevar = [tem,temfeel,name,conditions,emoji,mood,authorname,quote]
    // document.getElementById("weatherdis").style.display = "flex";

    await render(statevar);
  }
  catch(e){
    alert("Enter a valid city name!!!! or Check your Internet Connection");
    console.log(e);
  }
}

async function render(state){
  let imgemoji = document.getElementById("imgemoji");
  let tempdeg = document.getElementById("temp");
  let feelslike = document.getElementById("feelslike");
  let cityname = document.getElementById("cityname");
  let Mood = document.getElementById("Mood");
  let Quote = document.getElementById("Quote")
  let authorname = document.getElementById("authorname")
  imgemoji.setAttribute("src",`${state[4]}`)
  tempdeg.textContent = `${Math.floor(state[0])}°C`
  feelslike.textContent = `Feels Like ${Math.floor(state[1])}`
  // cityname.textContent = `${state[2]}`
  cityname.innerHTML = `<span class="Behindbhopal">in</span> ${state[2]}`;
  Mood.textContent = `${state[5]}`
  Quote.textContent = `${state[7]}`
  authorname.textContent = `by ${state[6]}`
}