Skip to content

Commit

Permalink
Merge pull request #278 from Sibasisbadatya/main
Browse files Browse the repository at this point in the history 
issue no #46 resolved(weather web app)
  • Loading branch information
@IshitaSatpathy
IshitaSatpathy authored Oct 25, 2022
2 parents 6cab3bf + 2d2beed commit f945608
Show file tree
Hide file tree
Showing 3 changed files with 358 additions and 0 deletions.
41 changes: 41 additions & 0 deletions sibasis#4/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<!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 Forecast</title>
<link rel="stylesheet" href="wc.css">
</head>
<body>

<div class="interface" align="center">
<div class="input">
<label for="text">Enter your city name:</label>
<input type="text" id="text" value="">
</div>
<div class="sub">
<input type="button" id="submit" value="submit" onclick="show()">
</div>

</div>
<div class="result">

<div class="degree">

</div>
<div class="status">

</div>
<div class="speed">

</div>
<div class="humidity">

</div>

</div>

<script src="wc.js"></script>
</body>
</html>
274 changes: 274 additions & 0 deletions sibasis#4/wc.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}
}
43 changes: 43 additions & 0 deletions sibasis#4/wc.js
View file
Original file line number Diff line number Diff line change
@@ -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 = `
<div class="degree">
<b> Temperature: ${data.main.temp}&deg; C</b>
</div>
<div class="status">
<b>Status: ${data.weather[0].main}</b>
</div>
<div class="speed">
<b>Wind Speed: ${data.wind.speed}km/h</b>
</div>
<div class="humidity">
<b> Humidity:${data.main.humidity}g.m-3</b>
</div>
`
}




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}

0 comments on commit f945608

Please sign in to comment.