Skip to content

Commit 756036c

Browse files
gantavyamalviyagantavyamalviya
authored
Merge pull request #3 from shashank-iter/main
Weather forecast webapp added
2 parents 039aa78 + 953d72c commit 756036c

10 files changed

Lines changed: 222 additions & 0 deletions

File tree

‎Weather Forecast Webapp/.idea/.gitignore‎

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Weather Forecast Webapp/.idea/modules.xml‎

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Weather Forecast Webapp/.idea/weather app.iml‎

Lines changed: 9 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Weather Forecast Webapp/Instructions.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
2+
> This project is made by [Shashank-Pandey](https://github.com/shashank-iter)
3+
4+
## Instructions
5+
> This project will not work as i haven't uploaded the API key with it.
6+
> Go to [Open-Weather](https://openweathermap.org/api) and make an account to get to free API Key.
7+
> Paste you API key in script.js file in js folder and it will start working.

‎Weather Forecast Webapp/css/bck.jpg‎

7.34 MB
Loading

‎Weather Forecast Webapp/css/bckg.png‎

10.2 KB
Loading

‎Weather Forecast Webapp/css/style.css‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
}
5+
6+
body {
7+
background:linear-gradient(90deg,#614385, #516395);
8+
line-height: 1.5;
9+
font-size: 125%;
10+
display: flex;
11+
}
12+
13+
/*--------------------------------------- CARD ------------------------------------------*/
14+
15+
.container {
16+
position: relative;
17+
background: rgba( 255, 255, 255, 0.25 );
18+
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
19+
backdrop-filter: blur( 4px );
20+
-webkit-backdrop-filter: blur( 4px );
21+
border-radius: 10px;
22+
border: 1px solid rgba( 255, 255, 255, 0.18 );
23+
padding: 0 1em 1em;
24+
margin: 150px 500px 400px auto;
25+
-webkit-filter: drop-shadow(0 1em 1em rgba(226, 91, 91, 0.1));
26+
filter: drop-shadow(0 1em 1em rgba(226, 91, 91, 0.1));
27+
border-radius: 10px;
28+
-webkit-border-radius: 10px;
29+
-moz-border-radius: 10px;
30+
-ms-border-radius: 10px;
31+
-o-border-radius: 10px;
32+
overflow: hidden;
33+
}
34+
35+
/*-------------------------------- FOR THE TILTED CARD------------------------------------ */
36+
37+
38+
39+
/* ------------------------------------------------------------------------------------------*/
40+
41+
.content {
42+
position: relative;
43+
margin: 0 60px auto;
44+
padding: 0 1em;
45+
}
46+
47+
h1 {
48+
border-bottom: 4px solid rebeccapurple;
49+
padding-bottom: 0.25em;
50+
margin-bottom: 0.25em;
51+
text-align: center;
52+
font-family: Verdana, Geneva, Tahoma, sans-serif;
53+
54+
}
55+
56+
/*----------------------------------- INPUT BOX---------------------------------------*/
57+
58+
.input {
59+
width: 100%;
60+
border: none;
61+
outline: none;
62+
font-size: 1.4rem;
63+
height: 50px;
64+
padding: 10px 10px;
65+
text-align: center;
66+
font-weight: bold;
67+
background: rgba( 255, 255, 255, 0.25 );
68+
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
69+
backdrop-filter: blur( 4px );
70+
-webkit-backdrop-filter: blur( 4px );
71+
border-radius: 10px;
72+
border: 1px solid rgba( 255, 255, 255, 0.18 );
73+
}
74+
75+
/*------------------------------------DETAILS----------------------------------------- */
76+
77+
.main-weather {
78+
display: none;
79+
padding: 20px;
80+
line-height: 2.2rem;
81+
border-radius: 10px;
82+
height: 30vh;
83+
text-align: center;
84+
color: #23313E;
85+
font-weight: bold;
86+
}
87+
88+
.temp {
89+
90+
margin: 25px ;
91+
font-size:40pt;
92+
font-weight: 700;
93+
}
94+
95+
/*---------------------------------------------------------------------------------------*/

‎Weather Forecast Webapp/fromPart.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
2+
console.log(44)
3+
console.log("genzdevs")

‎Weather Forecast Webapp/index.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="./css/style.css" />
7+
<link
8+
rel="stylesheet"
9+
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"
10+
/>
11+
<script
12+
src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.0/moment.min.js"
13+
integrity="sha512-Izh34nqeeR7/nwthfeE0SI3c8uhFSnqxV0sI9TvTcXiFJkMd6fB644O64BRq2P/LA/+7eRvCw4GmLsXksyTHBg=="
14+
crossorigin="anonymous"
15+
></script>
16+
<title>Weather</title>
17+
</head>
18+
19+
<body>
20+
21+
<div class="container">
22+
<div class="content">
23+
<h1>WEATHER APP</h1>
24+
<input id="input" class="input" placeholder="Enter the City Name" />
25+
</div>
26+
27+
<div class="main-weather">
28+
<p id="date">Date</p>
29+
<div id="city">City</div>
30+
<div class="temp" id="temp">Temp</div>
31+
<div id="min-max">Min and Max Temp</div>
32+
<div id="weather-type">Sunny</div>
33+
</div>
34+
</div>
35+
36+
<script src="./js/script.js"></script>
37+
</body>
38+
</html>

‎Weather Forecast Webapp/js/script.js‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
/*---------------------------------------API--------------------------------------------*/
2+
3+
const api = {
4+
key: "", /* <=== ENTER YOU API KEY WITHIN THE QUOTES*/
5+
base: "https://api.openweathermap.org/data/2.5/weather?",
6+
}
7+
8+
/*-------------------FUNCTION TO DISPLAY DATE AND TIME USING MOMENT.JS-------------------*/
9+
10+
const date = moment();
11+
document.getElementById("date").innerHTML = date.format("Mo MMM YYYY dddd, h:mm:ss");
12+
13+
14+
/*-----------------------FUNCTION TO TAKE THE VALUES WHEN ENTERED------------------------*/
15+
16+
const Input = document.getElementById('input');
17+
18+
Input.addEventListener('keypress', (event) => {
19+
20+
if(event.keyCode == 13) {
21+
getWeather(Input.value); //passing the input value to getWeather function
22+
document.querySelector('.main-weather').style.display = "block"; //used to show the details as intially the display is set as none
23+
}
24+
});
25+
26+
/*-------------------------------FUNCTION TO GET WEATHER--------------------------------*/
27+
28+
29+
function getWeather(city) {
30+
fetch(`${api.base}q=${city}&appid=${api.key}&units=metric`) // format for calling api is given on the web docs
31+
// units=metric used for celcius, if you remove it the temperature would be in Fahrenheit
32+
.then(details => {
33+
return details.json(); // Sending all details to showWeather function in form of json
34+
35+
}).then(showWeather);
36+
}
37+
38+
/*-------------------------------FUNCTION TO SHOW WEATHER--------------------------------*/
39+
40+
41+
function showWeather(details){ //Taking the received values from API into this function
42+
43+
// console.log(details);
44+
45+
let city = document.getElementById('city');
46+
city.innerHTML = `${details.name}, ${details.sys.country}`;
47+
48+
let temperature = document.getElementById('temp');
49+
temperature.innerHTML = `${Math.round(details.main.temp)}&deg;C`; //Rounding off the temp using math function
50+
51+
let minMax = document.getElementById('min-max');
52+
minMax.innerHTML = `${Math.round(details.main.temp_min)}&deg;C (Min) and ${Math.round(details.main.temp_max)}&deg;C (Max) `; //Rounding off the temp using math function
53+
54+
let weatherType = document.getElementById('weather-type');
55+
weatherType.innerHTML = `${details.weather[0].main}`;
56+
}
57+
58+
/*----------------------------------------------------------------------------------------*/
59+

0 commit comments

Comments
 (0)