Skip to content

Commit

Permalink
Weather App Mini App Completed
Browse files Browse the repository at this point in the history
  • Loading branch information
@Shreyasgkhakal100
Shreyasgkhakal100 authored Jan 5, 2022
0 parents commit 30e7585
Show file tree
Hide file tree
Showing 4 changed files with 583 additions and 0 deletions.
Binary file added weather-app-video.mp4
Binary file not shown.
51 changes: 51 additions & 0 deletions weather-app.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<!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 App</title>
<link href="weather_app.css" rel="stylesheet"/>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC5bwreCZGKc3hKUdkfd_3TEfmSoN9OfNY">
</script>
</head>

<body>
<div id="header">
<div><h1>SK Weather App</h1></div>
<div>
<input type="text" id="city" placeholder="Enter city name" />
<button onclick="mainGetWeather()">Show Weather</button>
</div>
</div>
<div id="container">
<div id="map_div">
<div id="map"></div>
</div>
<div id="todaysWeather">
<div class="leftDiv">
<img src="https://purepng.com/public/uploads/large/weather-forecast-symbol-v7o.png" width="200px"/>
<h1>Todays Weather<br> Forcast</h1></div>
<div class="rightDiv">
<div id="div1"></div>
<div id="div2">
<div id="data_div"></div>
</div>
</div>
</div>
<div id="finalDiv">
<h1 style="text-align: center;">Weather Data For Week</h1><br>
<div id="weekData">

</div>
</div>

</body>

</html>

<script src="weather_app.js">

</script>
301 changes: 301 additions & 0 deletions weather_app.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,301 @@
body, h1{
margin: 0px;
padding: 0px;
}
#header{
width: 100%;
position: fixed;
height: 80px;
background-color: black;
z-index: 9999;
color: white;
display: flex;
justify-content: space-between;
}
#header > div{
margin: 20px;
}
#header > div > input{
width: 300px;
height: 25px;
border: 2px solid white;
background-color: transparent;
color: white;
padding: 5px;
font-size: 16px;
border-radius: 5px;
}
#header button{
height: 38px;
margin:0px;
border-radius: 5px;
border: 2px solid white;
background-color: transparent;
color: white;
font-size: 16px;
cursor: pointer;
}
#header button:hover{
height: 38px;
margin:0px;
border-radius: 5px;
border: 2px solid white;
background-color: white;
color: black;
font-size: 16px;
cursor: pointer;
}
#map_div{
border: 1px solid black;
padding-top: 80px;
}
#map {
width: 100%;
height: 400px;
}
#todaysWeather{
width: 100%;
min-height: 200px;
height: auto;
border-bottom: 2px solid #62a6ff;
border-top: 2px solid #62a6ff;
background-color: #b3d4ff;
display: flex;
}
.leftDiv{
width: 30%;
border: 2px solid black;
text-align: center;
padding: 10px;
margin: 10px;
border-radius: 10px;
}
.rightDiv{
width: 70%;
margin: 10px;
border-radius: 10px;
display: flex;
justify-content: space-between;
border: 2px solid black;
}
#div1{
width: 48%;
border: 2px solid black;
border-radius: 10px;
}
#div2{
width: 48%;
border-radius: 10px;
text-align: center;
}
#cityMap{
width: 100%;
height: 100%;
border: 0px;
border-radius: 10px;
}
#finalDiv{
width: 100%;
height: auto;
background-image: url("https://t4.ftcdn.net/jpg/04/61/23/23/360_F_461232389_XCYvca9n9P437nm3FrCsEIapG4SrhufP.jpg");
margin: 0px;
padding: 30px;

}
#weekData{
width: 70%;
height: 200px;
border: 2px solid #1c1c1c;
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-gap: 5px;
background-color: #1c1c1c;
margin: auto;
border-radius: 10px;
color: white;
}
#weekData>div:nth-child(1){
background-color: #333333;
}
.dayDiv{
border: 1px solid rgba(255, 255, 255, 0.226);
border-radius: 10px;
text-align: center;
}
.dayDiv>img{
width: 48px;
}


@media only screen and (min-width: 0px) and (max-width: 376px) {
#header{
flex-direction: column;
align-items: center;
height: auto;
width: 100%;
margin: 0px;
padding: 0px;
position: relative;
}
#header > div > input{
width: auto;
}
#weekData{
width: 90%;
height: auto;
border: 2px solid #1c1c1c;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 5px;
background-color: #1c1c1c;
margin: auto;
border-radius: 10px;
color: white;
}
#map_div{
border: 1px solid black;
padding-top: 0px;
}
#map {
width: 100%;
height: 350px;
}
#todaysWeather{
width: 100%;
min-height: 200px;
height: auto;
border-bottom: 2px solid #62a6ff;
border-top: 2px solid #62a6ff;
background-color: #b3d4ff;
display: flex;
flex-direction: column;
}
.leftDiv{
width: 90%;
border: 2px solid black;
text-align: center;
padding: 10px;
margin: 5px;
border-radius: 10px;
}
.rightDiv{
width: 93%;
margin: 10px;
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
border: 2px solid black;
}
#div1{
width: 100%;
border: 2px solid black;
border-radius: 10px;
height: 250px;
}
#div2{
width: 100%;
border-radius: 10px;
text-align: center;
}
#cityMap{
width: 100%;
height: 100%;
border: 0px;
border-radius: 10px;
}
#finalDiv{
width: 84%;
height: auto;
background-image: url("https://t4.ftcdn.net/jpg/04/61/23/23/360_F_461232389_XCYvca9n9P437nm3FrCsEIapG4SrhufP.jpg");
margin: 0px;
padding: 30px;

}

}
@media only screen and (min-width: 376px) and (max-width: 768px) {
#header{
align-items: center;
height: auto;
width: 100%;
margin: 0px;
padding: 0px;
}
#header > div > input{
width: auto;
}
#weekData{
width: 100%;
height: auto;
border: 2px solid #1c1c1c;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 5px;
background-color: #1c1c1c;
margin: auto;
border-radius: 10px;
color: white;
}
#map_div{
border: 1px solid black;
padding-top: 80px;
}
#map {
width: 100%;
height: 350px;
}
#todaysWeather{
width: 100%;
min-height: 200px;
height: auto;
border-bottom: 2px solid #62a6ff;
border-top: 2px solid #62a6ff;
background-color: #b3d4ff;
display: flex;
}
.leftDiv{
width: 90%;
border: 2px solid black;
text-align: center;
padding: 10px;
margin: 5px;
border-radius: 10px;
align-items: center;
}
.rightDiv{
width: 93%;
margin: 10px;
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
border: 2px solid black;
}
#div1{
width: 100%;
border: 2px solid black;
border-radius: 10px;
height: 200px;
}
#div2{
width: 100%;
border-radius: 10px;
text-align: center;
}
#cityMap{
width: 100%;
height: 100%;
border: 0px;
border-radius: 10px;
}
#finalDiv{
width: 92.2%;
height: auto;
background-image: url("https://t4.ftcdn.net/jpg/04/61/23/23/360_F_461232389_XCYvca9n9P437nm3FrCsEIapG4SrhufP.jpg");
margin: 0px;
padding: 30px;

}

}
Loading

0 comments on commit 30e7585

Please sign in to comment.