Add files via upload

MadhusudanAnand · May 29, 2021 · be3489d · be3489d
1 parent 407e85f
commit be3489d
Show file tree

Hide file tree

Showing 3 changed files with 189 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,30 @@
+<!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="style.css">
+    <title>Weather App</title>
+</head>
+<body>
+    <div class="app-main">
+        <div class="searchInputBox">
+            <input type="text" id="input-box" class="input-box" placeholder="Enter city name..." autocomplete="off">
+        </div>
+        <divclass="weather-body">
+            <div class="location-details">
+                <div class="city"id="city"></div>
+                <div class="date"id="date"></div>
+            </div>
+            <div class="weather-status">
+                <div class="temp"id="temp"></div>
+                <div class="min-max"id="min-max"></div>
+                <div class="weather"id="weather"></div>
+                <div class="img"></div>
+            </div>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,76 @@
+const weatherApi = {
+    key: "abfe07c7242727ad21ec691df7ab63b7",
+    baseUrl: "https://api.openweathermap.org/data/2.5/weather"
+}
+
+const searchInputBox = document.getElementById('input-box');
+//event listner Function on Keypress
+searchInputBox.addEventListener('keypress', (event) => {
+
+    if (event.keyCode == 13) {
+        console.log(searchInputBox.value);
+        getWeatherReport(searchInputBox.value);
+        document.querySelector(".location-details").style.display = "block";
+        document.querySelector(".weather-status").style.display = "block";
+        document.querySelector(".temp").style.display = "block";
+        document.querySelector(".min-max").style.display = "block";
+        document.querySelector(".weather").style.display = "block";
+    }
+});
+//Get weather Report
+function getWeatherReport(city) {
+    fetch(`${weatherApi.baseUrl}?q=${city}&appid=${weatherApi.key}&units=metric`)
+        .then(weather => {
+            return weather.json();
+        }).then(showWeatherReport);
+}
+//show weather Report
+function showWeatherReport(weather) {
+    console.log(weather);
+
+    let city = document.getElementById('city');
+    city.innerText = `${weather.name} , ${weather.sys.country}`;
+
+    let temp = document.getElementById('temp');
+    temp.innerHTML = `${Math.round(weather.main.temp)}&deg;C`;
+
+    let max = document.getElementById('min-max');
+    max.innerHTML = `${Math.floor(weather.main.temp_min)}&deg;C(min) / ${Math.ceil(weather.main.temp_max)}&deg;C(max)`;
+
+    let weatherType = document.getElementById('weather');
+    weatherType.innerText = `${weather.weather[0].main}`;
+
+    let date = document.getElementById('date');
+    let todatDate = new Date();
+    date.innerText = dateManage(todatDate);
+
+    if (weatherType.textContent == 'Clear') {
+        document.body.style.backgroundImage = "url('images/a.jpg')";
+    } else if (weatherType.textContent == 'Clouds') {
+        document.body.style.backgroundImage = "url('images/cloudy.jpg')";
+    } else if (weatherType.textContent == 'Rain') {
+        document.body.style.backgroundImage = "url('images/rainy.jpg')";
+    } else if (weatherType.textContent == 'Snow') {
+        document.body.style.backgroundImage = "url('images/snowy.jpg')";
+    } else if (weatherType.textContent == 'Thunderstrom') {
+        document.body.style.backgroundImage = "url('images/thunderstrom.jpg')";
+    } else if (weatherType.textContent == 'Haze') {
+        document.body.style.backgroundImage = "url('images/cloudy.jpg')";
+    }
+}
+
+//Date manage
+function dateManage(dateArg) {
+    let days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+    let months = ["January", "Febraury", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
+    let year = dateArg.getFullYear();
+    let month = months[dateArg.getMonth()];
+    let date = dateArg.getDate();
+    let day = days[dateArg.getDay()];
+
+    return `${date} ${month} (${day}), ${year}`;
+}
+
+//api.openweathermap.org/data/2.5/weather?q={city name}&appid={API key}
+
+//abfe07c7242727ad21ec691df7ab63b7
diff --git a/style.css b/style.css
@@ -0,0 +1,83 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    background-image: url('images/suny.jpg');
+    height: 100vh;
+    overflow: hidden;
+    background-repeat: no-repeat;
+    background-position: top center;
+    font-family: Arial, Helvetica, sans-serif;
+    background-size: cover;
+}
+
+.app-main {
+    width: 50vh;
+    margin: 100px auto;
+    background-color: rgba(240, 248, 255, 0.6);
+    padding: 20px;
+    text-align: center;
+}
+
+.app-main>* {
+    margin-bottom: 20px;
+}
+
+.input-box {
+    width: 100%;
+    background-color: rgba(255, 255, 255, 0.6);
+    border: none;
+    outline: none;
+    color: rgb(128, 33, 5);
+    font-size: 1.2rem;
+    height: 50px;
+    border-radius: 5px;
+    padding: 0 10px;
+    text-align: center;
+}
+
+.input-box:focus {
+    background-color: rgba(255, 255, 255);
+}
+
+.weather-body {
+    display: none;
+    color: #582233;
+    padding: 20px;
+    line-height: 2rem;
+    border-radius: 10px;
+    background-color: rgba(255, 255, 255, 0.6);
+    height: 50vh;
+}
+
+.location-details {
+    display: none;
+    color: rgb(85, 23, 4);
+    font-weight: bold;
+}
+
+.weather-status {
+    display: none;
+    color: rgb(77, 20, 3);
+    padding: 20px;
+}
+
+.temp {
+    display: none;
+    color: rgb(70, 17, 1);
+    font-size: 50pt;
+    font-weight: 700;
+    margin: 20px 0;
+    text-shadow: 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.min-max,
+.weather {
+    display: none;
+    margin: 20px 0;
+    font-size: 12pt;
+    font-weight: 600;
+}