thinkswell · PBJI · Oct 13, 2023 · Oct 11, 2023 · Oct 11, 2023 · Oct 13, 2023
diff --git a/WeatherApp/Shuklaaa/README.md b/WeatherApp/Shuklaaa/README.md
@@ -0,0 +1,16 @@
+#Weather App
+
+##Overview
+This is a simple weather app that provides current weather information for a location using data from a weather API. It is built using HTML, CSS, and JavaScript. The special thing about it is that the background image changes according to the search location.
+
+##Features
+- Current weather information including temperature, description, and location.
+- Dynamic background image that changes based on the weather conditions.
+- Easy-to-use and intuitive user interface.
+
+##SCREENSHOTS
+![image](https://github.com/Shuklaaa/javascript-mini-projects/assets/93446673/1b12e800-0e5c-46f3-8b67-aef5780c3c9a)
+![image](https://github.com/Shuklaaa/javascript-mini-projects/assets/93446673/0ac3cb4e-3972-4573-a297-1cdb17b26d26)
+![image](https://github.com/Shuklaaa/javascript-mini-projects/assets/93446673/6800e633-2a6a-4b3e-9de8-5a1560914479)
+
+
diff --git a/WeatherApp/Shuklaaa/index.html b/WeatherApp/Shuklaaa/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>WEATHER APP</title>
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="./style.css">
+    <script src="./script.js" defer></script>
+</head>
+
+<body>
+    <div class="card">
+        <div class="search">
+            <input type="text" class="search-bar" placeholder="Enter name of City, State">
+            <button><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024"
+                    height="1.5em" width="1.5em" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z">
+                    </path>
+                </svg></button>
+        </div>
+        <div class="weather loading">
+            <h2 class="city">Weather in Denver</h2>
+            <h1 class="temp">51°C</h1>
+            <div class="flex">
+                <img src="https://openweathermap.org/img/wn/04n.png" alt="" class="icon" />
+                <div class="description">Cloudy</div>
+            </div>
+            <div class="humidity">Humidity: 60%</div>
+            <div class="wind">Wind speed: 62km/h</div>
+        </div>
+    </div>
+</body>
+
+</html>
+
diff --git a/WeatherApp/Shuklaaa/script.js b/WeatherApp/Shuklaaa/script.js
@@ -0,0 +1,107 @@
+let weather = {
+    "apikey": "466ddaa21a8de191e9f608bd11a56acb",
+    fetchWeather: function(city){
+        fetch(
+        "https://api.openweathermap.org/data/2.5/weather?q="
+        + city 
+        + "&units=metric&appid=" 
+        + this.apikey
+        )
+        .then((response) => response.json())
+        .then((data) => this.displayWeather(data));
+    },
+
+    displayWeather: function(data){
+        const{ name } = data;
+        const{ icon, description } = data.weather[0];
+        const{ temp, humidity } = data.main;
+        const{ speed } = data.wind;
+        // console.log(name,icon,description,temp,humidity,speed);
+        document.querySelector(".city").innerText = "Weather in " + name;
+        document.querySelector(".icon").src = "https://openweathermap.org/img/wn/"+ icon +".png";
+        document.querySelector(".description").innerText = description;
+        document.querySelector(".temp").innerText = temp +"°C";
+        document.querySelector(".humidity").innerText = "Humidity: "+ humidity + "%";
+        document.querySelector(".wind").innerText = "Wind speed: "+ speed + "km/h";
+        document.querySelector(".weather").classList.remove("loading");
+        document.body.style.backgroundImage = "url('https://source.unsplash.com/1600x900/?" + name + "')"
+    },
+    search: function(){
+        this.fetchWeather(document.querySelector(".search-bar").value);
+    }
+};
+
+let geocode = {
+    reverseGeocode: function (latitude ,longitude) {
+        var api_key = '089943fd115440dbb4d95b091479e834';
+
+  var api_url = 'https://api.opencagedata.com/geocode/v1/json'
+
+  var request_url = api_url
+    + '?'
+    + 'key=' + api_key
+    + '&q=' + encodeURIComponent(latitude + ',' + longitude)
+    + '&pretty=1'
+    + '&no_annotations=1';
+
+  // see full list of required and optional parameters:
+  // https://opencagedata.com/api#forward
+
+  var request = new XMLHttpRequest();
+  request.open('GET', request_url, true);
+
+  request.onload = function() {
+    // see full list of possible response codes:
+    // https://opencagedata.com/api#codes
+
+    if (request.status === 200){
+      // Success!
+      var data = JSON.parse(request.responseText);
+      weather.fetchWeather(data.results[0].components.city);
+
+    } else if (request.status <= 500){
+      // We reached our target server, but it returned an error
+
+      console.log("unable to geocode! Response code: " + request.status);
+      var data = JSON.parse(request.responseText);
+      console.log('error msg: ' + data.status.message);
+    } else {
+      console.log("server error");
+    }
+  };
+
+  request.onerror = function() {
+    // There was a connection error of some sort
+    console.log("unable to connect to server");
+  };
+
+  request.send();  // make the request
+    },
+
+    getLocation: function(){
+        function success(data){
+            geocode.reverseGeocode(data.coords.latitude, data.coords.longitude);
+
+
+            if(navigator.geolocation){
+                navigator.geolocation.getCurrentPosition(success, console.error);
+            }
+            else{
+                weather.fetchWeather("denver");
+            }
+        }
+    }
+}
+
+document.querySelector(".search button").addEventListener("click", function () {
+    weather.search();
+});
+
+document.querySelector(".search-bar").addEventListener("keyup", function(event) {
+    if(event.key == 'Enter'){
+        weather.search();
+    }
+});
+
+
+geocode.getLocation();
diff --git a/WeatherApp/Shuklaaa/style.css b/WeatherApp/Shuklaaa/style.css
@@ -0,0 +1,84 @@
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    font-family: 'Open Sans', sans-serif;
+    background: #222;
+    background-image: url('https://source.unsplash.com/1600x900/?landscape');
+    font-size: 120%;
+}
+
+.card {
+    background: #000000d0;
+    color: white;
+    padding: 2em;
+    border-radius: 35px;
+    width: 100%;
+    max-width: 420px;
+    margin: 1em;
+}
+
+.search {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+button {
+    margin: 0.5em;
+    border-radius: 50%;
+    border: none;
+    height: 44px;
+    width: 44px;
+    outline: none;
+    background: #7c7c7c2b;
+    color: white;
+    cursor: pointer;
+    transition: 0.2s ease-in-out;
+}
+
+button:hover {
+    background: #7c7c7c6b;
+}
+
+input.search-bar {
+    border: none;
+    outline: none;
+    padding: 0.4em 1em;
+    border-radius: 24px;
+    background: #7c7c7c2b;
+    color: white;
+    font-family: inherit;
+    font-size: 105%;
+    width: calc(100% - 100px);
+}
+
+.flex{
+    display: flex;
+    text-align: center;
+}
+
+.description{
+    text-transform:capitalize;
+    margin-top: 10px;
+}
+
+.weather.loading{
+    visibility: hidden;
+    max-height: 20px;
+    position: relative;
+}
+.weather.loading::after{
+    visibility: visible;
+    content: "Loading...";
+    color: white;
+    position: absolute;
+    top: 0;
+}
+
+h1.temp {
+    margin: 0;
+    margin-bottom: 0.5em;
+}