From c6a366990451bebe5ccf1b9e8196296ba56729c5 Mon Sep 17 00:00:00 2001 From: Sibasis Badatya <98338367+Sibasisbadatya@users.noreply.github.com> Date: Tue, 25 Oct 2022 22:21:45 +0530 Subject: [PATCH 1/2] Create index.html --- sibasis#4/index.html | 41 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 sibasis#4/index.html diff --git a/sibasis#4/index.html b/sibasis#4/index.html new file mode 100644 index 00000000..4d42f243 --- /dev/null +++ b/sibasis#4/index.html @@ -0,0 +1,41 @@ + + + + + + + Weather Forecast + + + + +
+
+ + +
+
+ +
+ +
+
+ +
+ +
+
+ +
+
+ +
+
+ +
+ +
+ + + + From 2d2beed2d00f1c3879054f088c0d5a4e52a9831e Mon Sep 17 00:00:00 2001 From: Sibasis Badatya <98338367+Sibasisbadatya@users.noreply.github.com> Date: Tue, 25 Oct 2022 22:22:12 +0530 Subject: [PATCH 2/2] Add files via upload --- sibasis#4/wc.css | 274 +++++++++++++++++++++++++++++++++++++++++++++++ sibasis#4/wc.js | 43 ++++++++ 2 files changed, 317 insertions(+) create mode 100644 sibasis#4/wc.css create mode 100644 sibasis#4/wc.js diff --git a/sibasis#4/wc.css b/sibasis#4/wc.css new file mode 100644 index 00000000..174fbcc7 --- /dev/null +++ b/sibasis#4/wc.css @@ -0,0 +1,274 @@ +@import url('https://fonts.googleapis.com/css2?family=Allison&family=Arimo&family=Bebas+Neue&family=Caveat&family=Cookie&family=Dancing+Script&family=Josefin+Sans&family=Kdam+Thmor+Pro&family=Lobster+Two&family=Pathway+Gothic+One&family=Racing+Sans+One&family=Style+Script&family=Teko:wght@300&family=Water+Brush&display=swap');html { + font-size: 62.5%; + overflow-x: hidden; + padding: 0px; + margin: opx; +} + +body { + background-color: #5f27cd; +} +.interface{ + display: grid; + height: 10vh; + grid-template-columns: 3fr 1fr 1fr; + transform: translate(10vw,5vh); + font-size: 8rem; + color:#ff9ff3; + text-shadow: 2px 2px 4px black; + font-family: 'Allison', cursive; +} +#text{ + height: 60%; + width: 25%; +} +#submit{ + height: 60%; + width: 100%; + background-color: #1dd1a1; +} + +.result { + top: 20vh; + width: 60vw; + height: 50vh; + display: grid; + grid-template-rows: 1fr 1fr 1fr 1fr; + justify-content: center; + position: relative; + transform: translate(20vw, 10vh); + align-content: center; + font-size: 6rem; + color: #ff6b6b; + text-shadow: 2px 2px 4px black; + font-family: 'Pathway Gothic One', sans-serif; +} + +.degree { + font-size: 5rem; + color: #48dbfb; + text-shadow: 2px 2px 4px black; +} + +.status { + font-size: 5rem; + color: #48dbfb; +} + +.speed { + font-size: 5rem; + color: #48dbfb; +} + +.humidity { + font-size: 5rem; + color: #48dbfb; +} +@media only screen and (max-width:1020px) +{ + .interface{ + display: grid; + height: 7vh; + grid-template-columns: 3fr 1fr 1fr; + transform: translate(10vw,5vh); + font-size: 6rem; + color:#ff9ff3; + text-shadow: 2px 2px 4px black; + font-family: 'Allison', cursive; + } + .result { + top: 20vh; + width: 60vw; + height: 40vh; + display: grid; + grid-template-rows: 1fr 1fr 1fr 1fr; + justify-content: center; + position: relative; + transform: translate(20vw, 10vh); + align-content: center; + font-size: 4rem; + color: #ff6b6b; + text-shadow: 2px 2px 4px black; + font-family: 'Pathway Gothic One', sans-serif; + } +} + + +@media only screen and (max-width:780px) +{ + .interface{ + display: flex; + flex-direction: column; + width: 80vw; + row-gap: 2vw; + transform: translate(10vw,0vh); + font-size: 6rem; + color:#ff9ff3; + text-shadow: 2px 2px 4px black; + font-family: 'Allison', cursive; + } + .result { + top: 10vh; + width: 70vw; + height: 40vh; + display: grid; + grid-template-rows: 1fr 1fr 1fr 1fr; + justify-content: center; + position: relative; + transform: translate(18vw, 15vh); + align-content: center; + font-size: 3rem; + color: #ff6b6b; + text-shadow: 1.5px 1.5px 3px black; + font-family: 'Pathway Gothic One', sans-serif; + } + #text{ + height: 30%; + width: 50%; + } + #submit{ + height: 60%; + width: 60%; + background-color: #1dd1a1; + } + +.degree { + font-size: 3rem; + color: #48dbfb; + text-shadow: 2px 2px 4px black; +} + +.status { + font-size: 3rem; + color: #48dbfb; +} + +.speed { + font-size: 3rem; + color: #48dbfb; +} + +.humidity { + font-size: 3rem; + color: #48dbfb; +} +} + +@media only screen and (max-width:450px) +{ + .interface{ + display: flex; + flex-direction: column; + width: 80vw; + row-gap: 2vw; + transform: translate(10vw,0vh); + font-size: 5rem; + color:#ff9ff3; + text-shadow: 2px 2px 4px black; + font-family: 'Allison', cursive; + } + .result { + top: 10vh; + width: 70vw; + height: 40vh; + display: grid; + grid-template-rows: 1fr 1fr 1fr 1fr; + justify-content: center; + position: relative; + transform: translate(18vw, 15vh); + align-content: center; + font-size: 3rem; + color: #ff6b6b; + text-shadow: 1.5px 1.5px 3px black; + font-family: 'Pathway Gothic One', sans-serif; + } + #text{ + height: 30%; + width: 50%; + } + #submit{ + height: 60%; + width: 60%; + background-color: #1dd1a1; + } + +.degree { + font-size: 3rem; + color: #48dbfb; + text-shadow: 2px 2px 4px black; +} + +.status { + font-size: 3rem; + color: #48dbfb; +} + +.speed { + font-size: 3rem; + color: #48dbfb; +} + +.humidity { + font-size: 3rem; + color: #48dbfb; +} +} +@media only screen and (max-width:350px) +{ + .interface{ + display: flex; + flex-direction: column; + width: 80vw; + margin: 0px; + transform: translate(10vw,0vh); + font-size: 8rem; + color:#ff9ff3; + text-shadow: 2px 2px 4px black; + font-family: 'Allison', cursive; + } + .result { + top: 10vh; + width: 70vw; + height: 30vh; + display: grid; + grid-template-rows: 1fr 1fr 1fr 1fr; + justify-content: center; + position: relative; + transform: translate(18vw, 40vh); + align-content: center; + font-size: 3rem; + color: #ff6b6b; + text-shadow: 1.5px 1.5px 3px black; + font-family: 'Pathway Gothic One', sans-serif; + } + #text{ + height: 10%; + width: 50%; + } + #submit{ + height: 30%; + width: 60%; + background-color: #1dd1a1; + } + +.degree { + font-size: 2rem; + color: #48dbfb; + text-shadow: 2px 2px 4px black; +} + +.status { + font-size: 2rem; + color: #48dbfb; +} + +.speed { + font-size: 2rem; + color: #48dbfb; +} + +.humidity { + font-size: 2rem; + color: #48dbfb; +} +} \ No newline at end of file diff --git a/sibasis#4/wc.js b/sibasis#4/wc.js new file mode 100644 index 00000000..2b4ec69c --- /dev/null +++ b/sibasis#4/wc.js @@ -0,0 +1,43 @@ +const API_KEY = "3d0847f566fc85c1d0868d45f56ecb5c"; + +const getWeather = async (city) => { + document.querySelector(".result").innerText="Loading Data..."; + const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric`) + const data = await response.json(); + return showWeather(data); +} + +const showWeather = (data) => { + console.log(data); + if(data.cod=="404"){ + document.querySelector(".result").innerText = `Please Enter a Valid Name`; + return; + } + document.querySelector(".result").innerHTML = ` +
+ Temperature: ${data.main.temp}° C +
+
+ Status: ${data.weather[0].main} +
+
+ Wind Speed: ${data.wind.speed}km/h +
+
+ Humidity:${data.main.humidity}g.m-3 +
+ ` +} + + + + +function show() { + event.preventDefault(); + getWeather(text.value); +} +// https://api.openweathermap.org/data/2.5/weather?q={city name}&appid={API key} + +// https://api.openweathermap.org/data/2.5/weather?q={city name},{country code}&appid={API key} + +// https://api.openweathermap.org/data/2.5/weather?q={city name},{state code},{country code}&appid={API key} \ No newline at end of file