codemistic · gantavyamalviya · Oct 1, 2022 · Oct 1, 2022
diff --git a/Weather Forecast Webapp/.idea/.gitignore b/Weather Forecast Webapp/.idea/.gitignore
diff --git a/Weather Forecast Webapp/.idea/modules.xml b/Weather Forecast Webapp/.idea/modules.xml
diff --git a/Weather Forecast Webapp/.idea/weather app.iml b/Weather Forecast Webapp/.idea/weather app.iml
diff --git a/Weather Forecast Webapp/Instructions.md b/Weather Forecast Webapp/Instructions.md
@@ -0,0 +1,7 @@
+
+> This project is made by [Shashank-Pandey](https://github.com/shashank-iter)
+
+## Instructions
+> This project will not work as i haven't uploaded the API key with it.
+> Go to [Open-Weather](https://openweathermap.org/api) and make an account to get to free API Key.
+> Paste you API key in script.js file in js folder and it will start working.
diff --git a/Weather Forecast Webapp/css/bck.jpg b/Weather Forecast Webapp/css/bck.jpg
diff --git a/Weather Forecast Webapp/css/bckg.png b/Weather Forecast Webapp/css/bckg.png
diff --git a/Weather Forecast Webapp/css/style.css b/Weather Forecast Webapp/css/style.css
@@ -0,0 +1,95 @@
+*{
+    margin: 0;
+    padding: 0;
+  }
+
+  body {
+    background:linear-gradient(90deg,#614385, #516395);
+    line-height: 1.5;
+    font-size: 125%;
+    display: flex;
+  }
+
+  /*--------------------------------------- CARD ------------------------------------------*/
+
+  .container {
+            position: relative;
+            background: rgba( 255, 255, 255, 0.25 );
+box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
+backdrop-filter: blur( 4px );
+-webkit-backdrop-filter: blur( 4px );
+border-radius: 10px;
+border: 1px solid rgba( 255, 255, 255, 0.18 );
+            padding: 0 1em 1em;
+            margin: 150px 500px 400px auto;
+            -webkit-filter: drop-shadow(0 1em 1em rgba(226, 91, 91, 0.1));
+            filter: drop-shadow(0 1em 1em rgba(226, 91, 91, 0.1));
+            border-radius: 10px;
+            -webkit-border-radius: 10px;
+            -moz-border-radius: 10px;
+            -ms-border-radius: 10px;
+            -o-border-radius: 10px;
+            overflow: hidden;
+}
+
+  /*-------------------------------- FOR THE TILTED CARD------------------------------------ */
+
+
+
+  /* ------------------------------------------------------------------------------------------*/
+
+  .content {
+    position: relative;
+    margin: 0 60px auto;
+    padding: 0 1em;
+  }
+
+  h1 {
+    border-bottom: 4px solid rebeccapurple;
+    padding-bottom: 0.25em;
+    margin-bottom: 0.25em;
+    text-align: center;
+    font-family: Verdana, Geneva, Tahoma, sans-serif;
+
+  }
+
+  /*----------------------------------- INPUT BOX---------------------------------------*/
+
+  .input {
+      width: 100%;
+      border: none;
+      outline: none;
+      font-size: 1.4rem;
+      height: 50px;
+      padding: 10px 10px;
+      text-align: center;
+      font-weight: bold;
+      background: rgba( 255, 255, 255, 0.25 );
+box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
+backdrop-filter: blur( 4px );
+-webkit-backdrop-filter: blur( 4px );
+border-radius: 10px;
+border: 1px solid rgba( 255, 255, 255, 0.18 );
+  }
+
+  /*------------------------------------DETAILS----------------------------------------- */
+
+  .main-weather {
+      display: none;
+      padding: 20px;
+      line-height: 2.2rem;
+      border-radius: 10px;
+      height: 30vh;
+      text-align: center;
+      color:  #23313E;
+      font-weight: bold;
+  }
+
+  .temp {
+
+      margin: 25px ;
+      font-size:40pt;
+      font-weight: 700;
+  }
+
+  /*---------------------------------------------------------------------------------------*/
diff --git a/Weather Forecast Webapp/fromPart.js b/Weather Forecast Webapp/fromPart.js
@@ -0,0 +1,3 @@
+
+console.log(44)
+console.log("genzdevs")
diff --git a/Weather Forecast Webapp/index.html b/Weather Forecast Webapp/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./css/style.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"
+    />
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.0/moment.min.js"
+      integrity="sha512-Izh34nqeeR7/nwthfeE0SI3c8uhFSnqxV0sI9TvTcXiFJkMd6fB644O64BRq2P/LA/+7eRvCw4GmLsXksyTHBg=="
+      crossorigin="anonymous"
+    ></script>
+    <title>Weather</title>
+  </head>
+
+  <body>
+
+    <div class="container">
+      <div class="content">
+        <h1>WEATHER APP</h1>
+        <input id="input" class="input" placeholder="Enter the City Name" />
+      </div>
+
+      <div class="main-weather">
+        <p id="date">Date</p>
+        <div id="city">City</div>
+        <div class="temp" id="temp">Temp</div>
+        <div id="min-max">Min and Max Temp</div>
+        <div id="weather-type">Sunny</div>
+      </div>
+    </div>
+
+    <script src="./js/script.js"></script>
+  </body>
+</html>
diff --git a/Weather Forecast Webapp/js/script.js b/Weather Forecast Webapp/js/script.js
@@ -0,0 +1,59 @@
+/*---------------------------------------API--------------------------------------------*/
+
+const api = {
+    key: "", /* <=== ENTER YOU API KEY WITHIN THE QUOTES*/
+    base: "https://api.openweathermap.org/data/2.5/weather?",
+}
+
+/*-------------------FUNCTION TO DISPLAY DATE AND TIME USING MOMENT.JS-------------------*/
+
+const date = moment();
+document.getElementById("date").innerHTML = date.format("Mo MMM YYYY dddd, h:mm:ss");
+
+
+/*-----------------------FUNCTION TO TAKE THE VALUES WHEN ENTERED------------------------*/
+
+    const Input = document.getElementById('input');
+
+    Input.addEventListener('keypress', (event) => {
+
+    if(event.keyCode == 13) {
+        getWeather(Input.value);  //passing the input value to getWeather function
+        document.querySelector('.main-weather').style.display = "block"; //used to show the details as intially the display is set as none
+    }
+});
+
+/*-------------------------------FUNCTION TO GET WEATHER--------------------------------*/
+
+
+function getWeather(city) {
+    fetch(`${api.base}q=${city}&appid=${api.key}&units=metric`)   // format for calling api is given on the web docs
+                                                                  // units=metric used for celcius, if you remove it the temperature would be in Fahrenheit
+    .then(details => {
+        return details.json();  // Sending all details to showWeather function in form of json
+
+    }).then(showWeather);
+}
+
+/*-------------------------------FUNCTION TO SHOW WEATHER--------------------------------*/
+
+
+function showWeather(details){  //Taking the received values from API into this function
+
+    // console.log(details);
+
+    let city = document.getElementById('city');
+    city.innerHTML = `${details.name}, ${details.sys.country}`;
+
+    let temperature = document.getElementById('temp');
+    temperature.innerHTML = `${Math.round(details.main.temp)}&deg;C`; //Rounding off the temp using math function
+
+    let minMax = document.getElementById('min-max');
+    minMax.innerHTML = `${Math.round(details.main.temp_min)}&deg;C (Min) and ${Math.round(details.main.temp_max)}&deg;C (Max) `; //Rounding off the temp using math function
+
+    let weatherType = document.getElementById('weather-type');
+    weatherType.innerHTML = `${details.weather[0].main}`;
+}
+
+/*----------------------------------------------------------------------------------------*/
+