Skip to content

Commit ba29288

Browse files
JayeshYadav99JayeshYadav99
authored
Merge pull request #1 from thinkswell/master
uPDATING BRANCH
2 parents 1c62183 + a2204b3 commit ba29288

File tree

6 files changed

+425
-0
lines changed

6 files changed

+425
-0
lines changed

‎WeatherApp/djv03/.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
config.js

‎WeatherApp/djv03/README.md

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
# Project Name
2+
3+
MyWheather App
4+
![Alt text](image.png)
5+
## Table of Contents
6+
7+
- [Getting Started](#getting-started)
8+
- [Usage](#usage)
9+
- [Contributing](#contributing)
10+
- [License](#license)
11+
12+
## Getting Started
13+
14+
These instructions will help you get your project up and running.
15+
16+
### Step 1: Get your Keys
17+
18+
go to [rapidapi.com](https://rapidapi.com/apininjas/api/weather-by-api-ninjas/) and sign up and copy key from given code snippets which would be(as of writing this now) on left side of page
19+
20+
### Step 2: Make configuration
21+
22+
make config.js file in /WheatherApp and add you api key in place of 'your_key_here' from given code snippet below
23+
```javascript
24+
var config = {
25+
API_KEY:'your_key_here'
26+
}
27+
```
28+
### Step 3: Run
29+
now to go to index.html and run either by Live server(if you have extension) or copy path to index.html of /WheatherApp and paste in into your browser

‎WeatherApp/djv03/image.png

55.6 KB
Loading

‎WeatherApp/djv03/index.html

+200
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,200 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<meta name="theme-color" content="#712cf9">
8+
<title>MyWhether.com</title>
9+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
10+
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
11+
<link rel="canonical" href="https://getbootstrap.com/docs/5.2/examples/pricing/">
12+
<link href="/docs/5.2/dist/css/bootstrap.min.css" rel="stylesheet"
13+
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
14+
15+
<!-- Favicons -->
16+
<link rel="apple-touch-icon" href="/docs/5.2/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
17+
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
18+
<link rel="icon" href="/docs/5.2/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
19+
<link rel="mask-icon" href="/docs/5.2/assets/img/favicons/safari-pinned-tab.svg" color="#712cf9">
20+
21+
22+
<link rel="stylesheet" href="./style.css">
23+
</head>
24+
25+
<body>
26+
<div class="main">
27+
<!-- HTML of Navbar starts here -->
28+
<nav class="navbar navbar-expand-lg ">
29+
<div class="container-fluid">
30+
<a class="navbar-brand fw-bold" href="#">MyWhether</a>
31+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
32+
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
33+
<span class="navbar-toggler-icon"></span>
34+
</button>
35+
<div class="collapse navbar-collapse" id="navbarSupportedContent">
36+
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
37+
38+
39+
40+
</ul>
41+
<button class="btn btn-outline-success">add your city</button>
42+
43+
</div>
44+
</div>
45+
</nav>
46+
<form class="d-flex searchcontainer" role="search">
47+
<input id="city" class="form-control me-2 " type="search" placeholder="Search your city here" aria-label="Search">
48+
<button class="btn btn-outline-success" type="submit" id="submit">Search </button>
49+
</form>
50+
51+
52+
<!-- HTML of main body starts here -->
53+
<main>
54+
<div class="text-center my-4 fs-1 fw-normal">Wheather of
55+
<div id="loader" class="loader"></div>
56+
<span style="color: rgb(14, 14, 126) ;font-weight: bold;"id="cityName" class="fw-bold ">
57+
58+
</span>
59+
</div>
60+
<div class="d-flex flex-column flex-sm-row ">
61+
62+
<div class="col card-width cards ">
63+
<div class="card m-4 rounded-3 shadow-sm d-flex flex-col justify-content-center align-items-center ">
64+
<div class="w-full card-header py-3 border ">
65+
<h4 class="my-0 fw-normal">Temprature</h4>
66+
</div>
67+
<div class="card-body">
68+
<h1 class="card-title pricing-card-title"><span id="temp"></span><small
69+
class="text-muted fw-light"> <span>&#8451;</span> </small></h1>
70+
<ul class="list-unstyled mt-3 mb-4">
71+
<li></li>
72+
73+
</ul>
74+
75+
</div>
76+
</div>
77+
</div>
78+
<div class="col card-width cards">
79+
<div class="card m-4 rounded-3 shadow-sm d-flex flex-col justify-content-center align-items-center ">
80+
<div class="card-header py-3">
81+
<h4 class="my-0 mx-4 fw-normal ">Wind</h4>
82+
</div>
83+
<div class="card-body">
84+
<h1 class="card-title pricing-card-title"><span id="wind_speed"></span><small class="text-muted fw-light">
85+
km/hr</small></h1>
86+
<ul class="list-unstyled mt-3 mb-4">
87+
<li></li>
88+
89+
</ul>
90+
91+
</div>
92+
</div>
93+
</div>
94+
<div class="col card-width cards">
95+
<div class="card m-4 rounded-3 shadow-sm d-flex flex-col justify-content-center align-items-center ">
96+
<div class="card-header py-3 ">
97+
<h4 class="my-0 fw-normal">humidity</h4>
98+
</div>
99+
<div class="card-body">
100+
<h1 class="card-title pricing-card-title"><span id="humidity"></span><small
101+
class="text-muted fw-light">%</small></h1>
102+
<ul class="list-unstyled mt-3 mb-4">
103+
<li> </li>
104+
105+
</ul>
106+
107+
</div>
108+
</div>
109+
</div>
110+
<div class="col card-width cards">
111+
<div class="card m-4 rounded-3 shadow-sm d-flex flex-col justify-content-center align-items-center ">
112+
<div class="card-header py-3 ">
113+
<h4 class="my-0 fw-normal">Min temp</h4>
114+
</div>
115+
<div class="card-body">
116+
<h1 class="card-title pricing-card-title"><span id="min_temp"></span><small class="text-muted fw-light"><span>&#8451;</span>
117+
</small></h1>
118+
<ul class="list-unstyled mt-3 mb-4">
119+
<li> </li>
120+
121+
</ul>
122+
123+
</div>
124+
</div>
125+
</div>
126+
<div class="col card-width cards">
127+
<div class="card m-4 rounded-3 shadow-sm d-flex flex-col justify-content-center align-items-center ">
128+
<div class="card-header py-3 ">
129+
<h4 class="my-0 fw-normal">Max temp</h4>
130+
</div>
131+
132+
<div class="card-body">
133+
<h1 class="card-title pricing-card-title"><span id="max_temp"></span><small class="text-muted fw-light">
134+
<span>&#8451;</span></small></h1>
135+
</div>
136+
</div>
137+
</div>
138+
</div>
139+
140+
<!-- HTML of city wheather table starts here -->
141+
<div class="table-responsive">
142+
<table class="table text-center">
143+
<thead>
144+
<tr>
145+
<th style="width: 14%;" class="mx-auto"></th>
146+
<th style="width: 12%;">Temprature</th>
147+
<th style="width: 12%;">Wind</th>
148+
<th style="width: 12%;">humidity</th>
149+
</tr>
150+
</thead>
151+
<tbody>
152+
<tr>
153+
<th scope="row" class="text-start">Delhi</th>
154+
<td><span id="delhi_temp"></span></td>
155+
<td><span id="delhi_wind_speed"></span></td>
156+
<td><span id="delhi_humidity"></span></td>
157+
</tr>
158+
<tr>
159+
<th scope="row" class="text-start">London</th>
160+
<td><span id="london_temp"></span></td>
161+
<td><span id="london_wind_speed"></span></td>
162+
<td><span id="london_humidity"></span></td>
163+
</tr>
164+
</tbody>
165+
166+
<tbody>
167+
<tr>
168+
<th scope="row" class="text-start">New York</th>
169+
<td><span id="newyork_temp"></span></td>
170+
<td><span id="newyork_wind_speed"></span></td>
171+
<td><span id="newyork_humidity"></span></td>
172+
</tr>
173+
<tr>
174+
<th scope="row" class="text-start">Tokyo</th>
175+
176+
<td><span id="tokyo_temp"></span></td>
177+
<td><span id="tokyo_wind_speed"></span></td>
178+
<td><span id="tokyo_humidity"></span></td>
179+
180+
181+
</tbody>
182+
</table>
183+
</div>
184+
</main>
185+
186+
187+
<!-- footer starts here -->
188+
</div>
189+
<footer class="text-center ">
190+
<hr class="m-auto mt-4" style="width: 50%">
191+
Made using <a style="text-decoration: none;" href="https://rapidapi.com/" target="_blank">rapidapi.com</a> by <a style="text-decoration: none;" href="https://github.com/djv03" target="_blank">Dhruvin</a>
192+
</footer>
193+
</div>
194+
195+
<!-- linking Javascript file -->
196+
<script type='text/javascript' src='config.js'></script>
197+
<script src="./script.js"></script>
198+
</body>
199+
200+
</html>

‎WeatherApp/djv03/script.js

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
var key =config.API_KEY + '' ;
2+
console.log(typeof key)
3+
const loader = document.getElementById('loader');
4+
5+
function showLoader() {
6+
loader.style.display = 'block';
7+
}
8+
9+
function hideLoader() {
10+
loader.style.display = 'none';
11+
}
12+
const options =
13+
{
14+
method: 'GET',
15+
headers: {
16+
'X-RapidAPI-Key': key,
17+
'X-RapidAPI-Host': 'weather-by-api-ninjas.p.rapidapi.com'
18+
}
19+
};
20+
21+
//making fetch request
22+
23+
const getdata = async (city) => {
24+
//getting name of city from input field
25+
26+
cityName.innerHTML = city.slice(0,1).toUpperCase()+ city.slice(1,cityName.length) ;
27+
showLoader();
28+
await fetch('https://weather-by-api-ninjas.p.rapidapi.com/v1/weather?city=' + city, options)
29+
.then(response => response.json())
30+
.then(response => {
31+
32+
// changing content of page based on response object
33+
temp.innerHTML = response.temp,
34+
wind_speed.innerHTML = response.wind_speed,
35+
humidity.innerHTML = response.humidity,
36+
min_temp.innerHTML = response.min_temp,
37+
max_temp.innerHTML = response.max_temp,
38+
39+
hideLoader();
40+
})
41+
.catch(() => {
42+
hideLoader();
43+
err => console.log(err + "an error has ocuured");
44+
});
45+
}
46+
47+
// wheather of specific city
48+
49+
fetch('https://weather-by-api-ninjas.p.rapidapi.com/v1/weather?city=delhi', options)
50+
.then(response => response.json())
51+
.then(response => {
52+
delhi_temp.innerHTML = response.temp,
53+
delhi_wind_speed.innerHTML = response.wind_speed,
54+
delhi_humidity.innerHTML = response.humidity
55+
})
56+
.catch(err => console.log(err + "an error has ocuured"));
57+
58+
59+
60+
fetch('https://weather-by-api-ninjas.p.rapidapi.com/v1/weather?city=london', options)
61+
.then(response => response.json())
62+
.then(response => {
63+
64+
london_temp.innerHTML = response.temp,
65+
london_wind_speed.innerHTML = response.wind_speed,
66+
london_humidity.innerHTML = response.humidity
67+
})
68+
.catch(err => console.log(err + "an error has ocuured"));
69+
70+
fetch('https://weather-by-api-ninjas.p.rapidapi.com/v1/weather?city=new york', options)
71+
.then(response => response.json())
72+
.then(response => {
73+
74+
newyork_temp.innerHTML = response.temp,
75+
newyork_wind_speed.innerHTML = response.wind_speed,
76+
newyork_humidity.innerHTML = response.humidity
77+
})
78+
.catch(err => console.log(err + "an error has ocuured"));
79+
80+
fetch('https://weather-by-api-ninjas.p.rapidapi.com/v1/weather?city=tokyo', options)
81+
.then(response => response.json())
82+
.then(response => {
83+
tokyo_temp.innerHTML = response.temp,
84+
tokyo_wind_speed.innerHTML = response.wind_speed,
85+
tokyo_humidity.innerHTML = response.humidity
86+
})
87+
.catch(err => console.log(err + "an error has ocuured"));
88+
89+
90+
document.getElementById("submit").addEventListener("click", (e) => {
91+
e.preventDefault();
92+
getdata(document.getElementById("city").value)
93+
94+
})
95+
96+
getdata("delhi");

0 commit comments

Comments
 (0)