From 82118c038581bf20573d626d89316679496f57cc Mon Sep 17 00:00:00 2001 From: Zeek Date: Sat, 29 Oct 2022 15:16:08 +0530 Subject: [PATCH] weather app javascript --- JS Weather/README.md | 12 ++++++++++ JS Weather/index.html | 24 +++++++++++++++++++ JS Weather/script.js | 55 +++++++++++++++++++++++++++++++++++++++++++ JS Weather/style.css | 42 +++++++++++++++++++++++++++++++++ 4 files changed, 133 insertions(+) create mode 100644 JS Weather/README.md create mode 100644 JS Weather/index.html create mode 100644 JS Weather/script.js create mode 100644 JS Weather/style.css diff --git a/JS Weather/README.md b/JS Weather/README.md new file mode 100644 index 0000000..7cb14df --- /dev/null +++ b/JS Weather/README.md @@ -0,0 +1,12 @@ +## A Simple Javascript Weather App +##### Uses openweathermap api to fetch weather data. + +### Usage +1. Enter the name of the city +2. Hit enter + +### API + +1. Head over to https://openweathermap.org/api, signup to get your api key. +2. Navigate to `script.js` and replace `const apikey = " "` with your key. +3. Read the API documentation if you feel like it. diff --git a/JS Weather/index.html b/JS Weather/index.html new file mode 100644 index 0000000..9090482 --- /dev/null +++ b/JS Weather/index.html @@ -0,0 +1,24 @@ + + + + + + Weather App + + + + + + +
+ + +
+
+ + diff --git a/JS Weather/script.js b/JS Weather/script.js new file mode 100644 index 0000000..1059ef0 --- /dev/null +++ b/JS Weather/script.js @@ -0,0 +1,55 @@ +// Get your own ApiKey from https://openweathermap.org/api +const apikey = "3265874a2c77ae4a04bb96236a642d2f"; + +// Grab objects via DOM +const main = document.getElementById("main"); +const form = document.getElementById("form"); +const search = document.getElementById("search"); + +// Function that returns weatherdata +const url = (city) => + `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apikey}`; // + +async function getWeatherByLocation(city) { + const resp = await fetch(url(city), { origin: "cors" }); + const respData = await resp.json(); + + console.log(respData); + + addWeatherToPage(respData); +} + +// Display the weather data +function addWeatherToPage(data) { + const temp = KtoC(data.main.temp); + + // DOM manipulation + const weather = document.createElement("div"); + weather.classList.add("weather"); + + weather.innerHTML = ` +

${temp}°C

+ ${data.weather[0].main} + `; + + // cleanup + main.innerHTML = ""; + + main.appendChild(weather); +} + +// Temperature conversion +function KtoC(K) { + return Math.floor(K - 273.15); +} + +// Event listener for form submission +form.addEventListener("submit", (e) => { + e.preventDefault(); + + const city = search.value; + + if (city) { + getWeatherByLocation(city); + } +}); diff --git a/JS Weather/style.css b/JS Weather/style.css new file mode 100644 index 0000000..aae8fdf --- /dev/null +++ b/JS Weather/style.css @@ -0,0 +1,42 @@ +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap"); + +* { + box-sizing: border-box; +} + +body { + background: linear-gradient(300deg, #ced1d6, #bfc0c0); + font-family: "Poppins", sans-serif; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin: 0; + min-height: 100vh; +} + +input { + background-color: #fff; + border: none; + border-radius: 25px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); + font-family: inherit; + font-size: 1rem; + padding: 1rem; + min-width: 300px; +} + +input:focus { + outline: none; +} + +.weather { + font-size: 2rem; + text-align: center; +} + +.weather h2 { + display: flex; + align-items: center; + margin-bottom: 0; +}