Skip to content

Commit b16138d

Browse files
Lonz8576Lonz8576
committed
api call started
1 parent 6336161 commit b16138d

7 files changed

+137
-71
lines changed

‎package-lock.json

+29
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
"@testing-library/jest-dom": "^5.17.0",
77
"@testing-library/react": "^13.4.0",
88
"@testing-library/user-event": "^13.5.0",
9+
"axios": "^1.7.2",
910
"bootstrap": "^5.3.3",
1011
"react": "^18.3.1",
1112
"react-dom": "^18.3.1",

‎public/manifest.json

+1-17
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,7 @@
11
{
22
"short_name": "React App",
33
"name": "Create React App Sample",
4-
"icons": [
5-
{
6-
"src": "favicon.ico",
7-
"sizes": "64x64 32x32 24x24 16x16",
8-
"type": "image/x-icon"
9-
},
10-
{
11-
"src": "logo192.png",
12-
"type": "image/png",
13-
"sizes": "192x192"
14-
},
15-
{
16-
"src": "logo512.png",
17-
"type": "image/png",
18-
"sizes": "512x512"
19-
}
20-
],
4+
215
"start_url": ".",
226
"display": "standalone",
237
"theme_color": "#000000",

‎src/App.js

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11

22
import Weather from './WeatherDaily.js';
33
import './index.css';
4+
import axios from 'axios';
45

56
export default function App() {
67
return (

‎src/ForecastDays.js

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react'
2+
import axios from 'axios';
23

34

45

‎src/WeatherDaily.js

+67-35
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,79 @@
1-
import React from "react";
1+
import React, { useState } from "react";
22
import sunny from './images/sun.png'
33
import Forecast from "./ForecastDays";
4+
import axios from 'axios';
45

56

7+
export default function Weather() {
8+
const [load, setLoad] = useState(false);
9+
const [weatherData, setWeatherData] = useState({});
10+
function handleResponse(response) {
11+
setWeatherData({
12+
temperature: response.data.temperature.current,
13+
wind: response.data.wind.speed,
14+
city: response.data.city,
15+
humidity: response.data.temperature.humidity,
16+
description: response.data.condition.description,
17+
icon: response.data.condition.icon_url
618

7-
export default function weather() {
8-
return (
9-
<div className="App">
10-
<div className='container'>
11-
<div className='weather-app'>
12-
<div className='search-up'>
13-
<i className='fa-solid fa-location-dot'></i>
14-
<div className='local'>London</div>
15-
</div>
16-
<div className='search-bar'>
17-
<input type='text' placeholder='Enter a location...' />
18-
<i className='fa-solid fa-magnifying-glass'></i>
19-
</div>
2019

21-
<div className='weather-icon'>
22-
<img src={sunny} alt='sunny' />
23-
</div>
24-
<div className='temp'>30° C</div>
20+
});
21+
22+
setLoad(true);
23+
}
24+
if (load) {
2525

26-
<div className='weather-description'>Clear & Sunny</div>
26+
return (
27+
<div className="App">
28+
<div className='container-sm'>
29+
<div className='weather-app'>
30+
<div className='search-up'>
31+
<i className='fa-solid fa-location-dot'></i>
32+
<div className='local'>{weatherData.city}</div>
33+
</div>
34+
<div className='search-bar'>
35+
<input type='search' placeholder='Enter a location...' />
36+
<button type="submit" className="btn" value="search"><i className='fa-solid fa-magnifying-glass'></i></button>
37+
</div>
38+
39+
<div className='weather-icon'>
40+
<img src={weatherData.icon} alt='sunny' />
41+
</div>
42+
<div className='temp'>{Math.round(weatherData.temperature)} <span className="unit">°C</span></div>
43+
44+
<div className='weather-description'>{weatherData.description} </div>
45+
46+
<div className='date'>Friday July 30, 2024</div>
47+
<div className='weather-details'>
48+
<div className='humidity'>Humidity
49+
<div>
50+
<i className='fa-solid fa-droplet'>{weatherData.humidity} <span>%</span> </i></div></div>
51+
52+
<div className='wind'>Wind
53+
<div>
54+
<i className='fa-solid fa-wind'>{Math.round(weatherData.wind)} <span>km/h</span> </i></div></div>
55+
</div>
56+
57+
</div>
58+
<Forecast />
59+
60+
</div>
61+
</div>
62+
63+
64+
);
2765

28-
<div className='date'>Friday July 30, 2024</div>
29-
<div className='weather-details'>
30-
<div className='humidity'>Humidity
31-
<div>
32-
<i className='fa-solid fa-droplet'>80 %</i></div></div>
66+
} else {
3367

34-
<div className='wind'>Wind
35-
<div>
36-
<i className='fa-solid fa-wind'>16 km/h</i></div></div>
37-
</div>
68+
const apiKey = "2e99ddt6a7e37f7c164ob09d070ab380";
69+
let city = "London";
70+
const apiUrl = `https://api.shecodes.io/weather/v1/current?query=${city}&key=${apiKey}&units=metric`;
71+
72+
axios.get(apiUrl).then(handleResponse);
3873

39-
</div>
40-
<Forecast />
74+
return "Loading....";
4175

42-
</div>
43-
</div>
44-
45-
46-
);
76+
}
77+
4778
}
79+

‎src/index.css

+37-19
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,39 @@
11
@import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100..900;1,100..900&display=swap');
22
@import url('https://fonts.googleapis.com/css2?family=Acme&family=Bitter:ital,wght@0,100..900;1,100..900&display=swap');
3+
@import url('https://fonts.googleapis.com/css2?family=Wix+Madefor+Display:[email protected]&display=swap');
34
*{
45
margin:0;
56
padding: 0;
67
box-sizing: border-box;
78
font-family: "Acme", sans-serif;
89
font-size: 14px;
910
}
10-
.container{
11-
width: 100%;
12-
height: 100vh;
11+
@media (max-width:420px){
12+
.box-column, .day-one, .day-three, .day-two, .forecast-box{
13+
display:none;
14+
width:0;
15+
margin:0;
16+
row-gap: 0;
17+
}
18+
.container-sm{
19+
position: block;
20+
justify-content: right;
21+
margin:0 auto;
22+
}
23+
}
24+
.container-sm{
1325
background-image:#fdb44b;
1426
display: flex;
1527
justify-content: center;
1628
align-items: center;
1729
}
1830
.weather-app{
1931
background: linear-gradient(10.6deg, rgb(5, 69, 77) 1.2%, rgb(186, 232, 232) 91.1%);
20-
21-
min-width:fit-content;
22-
max-width: 35rem;
23-
max-height: 120vh;
32+
margin-right: .5em;
33+
margin-top: 2em;
34+
margin-bottom:.5em;
35+
padding-bottom: 2em;
36+
max-height: 100vh;
2437
padding: 2em;
2538
box-shadow: -2px 18px 24px 6px rgba(0, 0, 0, 0.7);
2639
border-radius: 2em;
@@ -29,8 +42,6 @@
2942
}
3043
.forecast-box{
3144
display: grid;
32-
margin-left: 20px;
33-
3445
}
3546
.box-column{
3647
display: grid;
@@ -76,38 +87,45 @@
7687
margin-right: 1.5em;
7788
}
7889
.search-bar input::placeholder{
79-
color:antiquewhite;
90+
color:#212b32;
8091
font-family: 'Bitter', serif;
8192
font-size: 12px;
93+
font-weight:400;
8294
}
8395
.search-bar input:focus::placeholder{
8496
color:transparent;
97+
background-color: rgba(250, 235, 215, 0.349);
8598
}
86-
.search-bar i{
99+
.btn{
87100
position: absolute;
88101
transform: translateY(-50%);
89-
right: .5rem;
90-
top: 50%;
91-
color: antiquewhite;
102+
right: .5px;
103+
top: 45%;
104+
92105
}
93106
input{
94107
text-align: left;
95108
margin: .25em;
96-
background-color: #212b327c;
109+
background-color: #e3e5e67a;
97110
border-radius: 0.3em;
98111
padding: 3px;
99-
border: 1.5px solid rgb(33, 43, 50);
112+
border: 1px solid rgb(33, 43, 50);
100113
}
101114
img{
102115
width: 150px;
103116
}
104117
.temp{
105118
font-size: 54px;
106119
color: rgb(17, 16, 16);
107-
font-family:system-ui, -apple-system, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
120+
font-family:"Wix Madefor Display", sans-serif;
108121
font-weight: 600;
109122
padding-bottom:.2em;
110123
}
124+
.unit{
125+
font-size: 1.7rem;
126+
position: relative;
127+
top: -12px;
128+
}
111129
.date{
112130
margin-bottom: 2em;
113131
margin-top: 1em;
@@ -132,11 +150,11 @@ img{
132150

133151
}
134152
.humidity, .wind{
135-
background: rgba(225, 225, 226, 0.372);
153+
background: rgba(160, 208, 209, 0.788);
136154
border-radius: 15px;
137155
color: rgb(17, 16, 16);
138156
border:2px ridge rgb(33, 43, 50);
139-
padding:5px;
157+
padding:6px;
140158
}
141159

142160
.weather-details i{

0 commit comments

Comments
 (0)