Adding final fixes

Bhuminandan · Aug 5, 2023 · 9177e8c · 9177e8c
commit 9177e8c
Show file tree

Hide file tree

Showing 8 changed files with 484 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,11 @@
+Live WeatherApp
+
+- City Addition: Easily add new cities through an intuitive input field and the "Add" button. The app validates inputs to ensure they're not empty and have not been added before.
+- Live Weather Cards: Each city you add comes to life with a dedicated weather card. These cards showcase:
+- Weather icons that vividly represent conditions (☔ rainy, ☀️ sunny, ☁️ cloudy, 💨 windy)
+- Comprehensive weather information including current temperature, high and low temperatures, and weather conditions.
+- Additional data from the API, such as humidity, pressure, and wind speed.
+- Smart Sorting: The app maintains an array of cities and cleverly sorts them based on temperature. You'll always find the coldest and hottest cities at a glance.
+- Responsive Display: Whether you're on a desktop or using your mobile device, the app's responsive design ensures a seamless and visually appealing experience.
+
+Enjoy exploring the world's weather with these enriching features! 🌦️📱
diff --git a/assets/Cloudy.png b/assets/Cloudy.png
diff --git a/assets/Rainy.png b/assets/Rainy.png
diff --git a/assets/tornado.png b/assets/tornado.png
diff --git a/assets/windy.png b/assets/windy.png
diff --git a/index.html b/index.html
@@ -0,0 +1,104 @@
+<!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" />
+    <link rel="stylesheet" href="./styles/styles.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
+      integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
+    />
+    <title>Weather APP</title>
+  </head>
+  <body>
+    <div class="main">
+      <div class="container">
+        <div class="container__title">
+          <h1>Weather App</h1>
+        </div>
+        <div class="container__search">
+          <div class="container__search-input">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              viewBox="0 0 16 16"
+              fill="none"
+            >
+              <path
+                d="M6.3833 12.7666C7.76953 12.7666 9.04785 12.3184 10.0938 11.5713L14.0283 15.5059C14.2109 15.6885 14.4517 15.7798 14.709 15.7798C15.2485 15.7798 15.6304 15.3647 15.6304 14.8335C15.6304 14.5845 15.5474 14.3438 15.3647 14.1694L11.4551 10.2515C12.2769 9.17236 12.7666 7.83594 12.7666 6.3833C12.7666 2.87207 9.89453 0 6.3833 0C2.88037 0 0 2.86377 0 6.3833C0 9.89453 2.87207 12.7666 6.3833 12.7666ZM6.3833 11.3887C3.64404 11.3887 1.37793 9.12256 1.37793 6.3833C1.37793 3.64404 3.64404 1.37793 6.3833 1.37793C9.12256 1.37793 11.3887 3.64404 11.3887 6.3833C11.3887 9.12256 9.12256 11.3887 6.3833 11.3887Z"
+                fill="#EBEBF5"
+                fill-opacity="0.6"
+              />
+            </svg>
+            <input
+              type="text"
+              placeholder="Search for a city or Airport"
+              required
+            />
+          </div>
+          <div class="container__add-city-btn">
+            <button class="add_city">Add City</button>
+          </div>
+          <div class="error-message">Enter valid city name!</div>
+        </div>
+        <div class="container__weather-cards">
+          <!-- <div class="single-card">
+            <div class="background-svg">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="343"
+                height="175"
+                viewBox="0 0 343 175"
+                fill="none"
+              >
+                <path
+                  d="M0.42749 66.4396C0.42749 31.6455 0.42749 14.2484 11.7535 5.24044C23.0794 -3.76754 40.0301 0.147978 73.9315 7.97901L308.33 62.1238C324.686 65.9018 332.864 67.7909 337.646 73.8031C342.427 79.8154 342.427 88.2086 342.427 104.995V131C342.427 151.742 342.427 162.113 335.984 168.556C329.54 175 319.169 175 298.427 175H44.4275C23.6857 175 13.3148 175 6.87114 168.556C0.42749 162.113 0.42749 151.742 0.42749 131V66.4396Z"
+                  fill="url(#paint0_linear_642_26)"
+                />
+                <defs>
+                  <linearGradient
+                    id="paint0_linear_642_26"
+                    x1="0.42749"
+                    y1="128"
+                    x2="354.57"
+                    y2="128"
+                    gradientUnits="userSpaceOnUse"
+                  >
+                    <stop stop-color="#5936B4" />
+                    <stop offset="1" stop-color="#362A84" />
+                  </linearGradient>
+                </defs>
+              </svg>
+            </div>
+            <div class="single-card-top">
+              <div class="temp">13°</div>
+              <div class="weather-img">
+                <img src="./assets/Cloudy.png" alt="cloudy" />
+              </div>
+            </div>
+            <div class="single-card-bottom">
+              <div class="card-bottom-left">
+                <div class="atmospheric-pressure">
+                  <div class="atm-pre-high">H:16</div>
+                  <div class="atm-pre-low">L:8</div>
+                </div>
+                <div class="city-name">Tokyo, Japan</div>
+              </div>
+              <div class="card-bottom-right">Tornado</div>
+            </div>
+          </div> -->
+        </div>
+      </div>
+    </div>
+    <script src="./script.js"></script>
+  </body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,117 @@
+let currentCardsArr = [];
+
+let searchBtn = document.querySelector(".container__add-city-btn button");
+searchBtn.addEventListener("click", () => {
+    let apiKey = "0d37d999b4705308cc960c47e35d754d"
+    let inputCityName = document.querySelector(".container__search-input input");
+    getWeatherDetails(apiKey, inputCityName.value.toLocaleLowerCase());
+    inputCityName.value = "";
+})
+
+
+let error = document.querySelector(".error-message");
+async function getWeatherDetails(apiKey, cityName) {
+    try{
+    let Url = `https://api.openweathermap.org/data/2.5/weather?q=${cityName}&appid=${apiKey}&units=metric`
+    let response = await fetch(Url);
+    let data = await response.json();
+    createCard(data);
+    error.style.display = "none";
+    }catch (data) {
+        error.style.display = "block";
+    }
+}
+
+let cardsContainer = document.querySelector(".container__weather-cards");
+let weatherImg = document.querySelector(".weather-img img")
+function createCard(cityData) {
+    let maxTemp = Math.floor(cityData.main.temp_max);
+    let minTemp = Math.floor(cityData.main.temp_min);
+    let cityName = cityData.name;
+    let temperature = Math.floor(cityData.main.temp);
+    let weatherType = cityData.weather[0].main;
+    let weatherImgString;
+    if (cityData.weather[0].main == "Clouds") 
+    {
+        weatherImgString = "./assets/Cloudy.png";
+
+    } 
+    if(cityData.weather[0].main == "Clear") 
+    {
+        weatherImgString = "./assets/Cloudy.png";
+    } 
+    if(cityData.weather[0].main == "Haze") 
+    {
+        weatherImgString = "./assets/windy.png";
+    } 
+    if(cityData.weather[0].main == "Rain") 
+    {
+        weatherImgString = "./assets/Rainy.png";
+    } 
+    if(cityData.weather[0].main == "Drizzle") 
+    {
+        weatherImgString = "./assets/tornado.png";
+    } 
+    if (cityData.weather[0].main == "Mist") 
+    {
+        weatherImgString = "./assets/windy.png";
+    }
+
+    let CardDiv = document.createElement("div");
+    CardDiv.classList.add("single-card");
+    CardDiv.classList.add("animate__animated", "animate__fadeIn");
+    let cardHtml = `<div class="background-svg">
+                        <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="343"
+                        height="175"
+                        viewBox="0 0 343 175"
+                        fill="none"
+                        >
+                        <path
+                            d="M0.42749 66.4396C0.42749 31.6455 0.42749 14.2484 11.7535 5.24044C23.0794 -3.76754 40.0301 0.147978 73.9315 7.97901L308.33 62.1238C324.686 65.9018 332.864 67.7909 337.646 73.8031C342.427 79.8154 342.427 88.2086 342.427 104.995V131C342.427 151.742 342.427 162.113 335.984 168.556C329.54 175 319.169 175 298.427 175H44.4275C23.6857 175 13.3148 175 6.87114 168.556C0.42749 162.113 0.42749 151.742 0.42749 131V66.4396Z"
+                            fill="url(#paint0_linear_642_26)"
+                        />
+                        <defs>
+                            <linearGradient
+                            id="paint0_linear_642_26"
+                            x1="0.42749"
+                            y1="128"
+                            x2="354.57"
+                            y2="128"
+                            gradientUnits="userSpaceOnUse"
+                            >
+                            <stop stop-color="#5936B4" />
+                            <stop offset="1" stop-color="#362A84" />
+                            </linearGradient>
+                        </defs>
+                        </svg>
+                    </div>
+                    <div class="single-card-top">
+                        <div class="temp">${temperature}°</div>
+                        <div class="weather-img">
+                        <img src="${weatherImgString}" alt="cloudy" />
+                        </div>
+                    </div>
+                    <div class="single-card-bottom">
+                        <div class="card-bottom-left">
+                        <div class="atmospheric-pressure">
+                            <div class="atm-pre-high">H:${maxTemp}</div>
+                            <div class="atm-pre-low">L:${minTemp}</div>
+                        </div>
+                        <div class="city-name">${cityName}</div>
+                        </div>
+                        <div class="card-bottom-right">${weatherType}</div>
+                    </div>`
+             CardDiv.innerHTML = cardHtml;
+             currentCardsArr.push({temperature,CardDiv}); 
+             appendUi(currentCardsArr);  
+}
+
+function appendUi(currentCardsArr) {
+    cardsContainer.innerHTML = "";
+    currentCardsArr.sort((a,b) => a.temperature - b.temperature);
+    currentCardsArr.forEach((card) => {
+        cardsContainer.appendChild(card.CardDiv);
+    })
+}