Skip to content

Commit 77e21bf

Browse files
author
Le Tuan Kiet
committed
[RTT-04] Implate UI Weather APP
1 parent 2044716 commit 77e21bf

File tree

12 files changed

+29109
-1296
lines changed

12 files changed

+29109
-1296
lines changed

‎package-lock.json‎

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

‎package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"@types/react-dom": "^18.0.0",
1616
"@types/uuid": "^8.3.4",
1717
"axios": "^0.27.2",
18+
"lodash": "^4.17.21",
1819
"react": "^18.2.0",
1920
"react-dom": "^18.2.0",
2021
"react-scripts": "5.0.1",
@@ -46,5 +47,8 @@
4647
"last 1 firefox version",
4748
"last 1 safari version"
4849
]
50+
},
51+
"devDependencies": {
52+
"@types/lodash": "^4.14.186"
4953
}
5054
}

‎public/index.html‎

Lines changed: 22 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,20 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1" />
7-
<meta name="theme-color" content="#000000" />
8-
<meta
9-
name="description"
10-
content="Web site created using create-react-app"
11-
/>
12-
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13-
<!--
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1" />
8+
<meta name="theme-color" content="#000000" />
9+
<meta name="description" content="Web site created using create-react-app" />
10+
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
11+
<!--
1412
manifest.json provides metadata used when your web app is installed on a
1513
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
1614
-->
17-
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18-
<!--
15+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
16+
<link href="https://unpkg.com/boxicons@2.0.9/css/boxicons.min.css" rel="stylesheet">
17+
<!--
1918
Notice the use of %PUBLIC_URL% in the tags above.
2019
It will be replaced with the URL of the `public` folder during the build.
2120
Only files inside the `public` folder can be referenced from the HTML.
@@ -24,12 +23,13 @@
2423
work correctly both with client-side routing and a non-root public URL.
2524
Learn how to configure a non-root public URL by running `npm run build`.
2625
-->
27-
<title>React App</title>
28-
</head>
29-
<body>
30-
<noscript>You need to enable JavaScript to run this app.</noscript>
31-
<div id="root"></div>
32-
<!--
26+
<title>React App</title>
27+
</head>
28+
29+
<body>
30+
<noscript>You need to enable JavaScript to run this app.</noscript>
31+
<div id="root"></div>
32+
<!--
3333
This HTML file is a template.
3434
If you open it directly in the browser, you will see an empty page.
3535
@@ -39,5 +39,6 @@
3939
To begin the development, run `npm start` or `yarn start`.
4040
To create a production bundle, use `npm run build` or `yarn build`.
4141
-->
42-
</body>
43-
</html>
42+
</body>
43+
44+
</html>

‎src/App.css‎

Lines changed: 192 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,203 @@
1-
.App {
1+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
2+
*{
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
font-family: 'Poppins', sans-serif;
7+
}
8+
body{
9+
display: flex;
10+
align-items: center;
11+
justify-content: center;
12+
min-height: 100vh;
13+
background: #43AFFC;
14+
}
15+
::selection{
16+
color: #fff;
17+
background: #43AFFC;
18+
}
19+
.wrapper{
20+
width: 400px;
21+
background: #fff;
22+
border-radius: 7px;
23+
box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.05);
24+
}
25+
.wrapper header{
26+
display: flex;
27+
font-size: 21px;
28+
font-weight: 500;
29+
color: #43AFFC;
30+
padding: 16px 15px;
31+
align-items: center;
32+
border-bottom: 1px solid #ccc;
33+
}
34+
header i{
35+
font-size: 0em;
36+
cursor: pointer;
37+
margin-right: 8px;
38+
}
39+
.wrapper.active header i{
40+
margin-left: 5px;
41+
font-size: 30px;
42+
}
43+
.wrapper .input-part{
44+
padding: 20px 25px 30px;
45+
}
46+
.wrapper.active .input-part{
47+
display: none;
48+
}
49+
.input-part .info-txt{
50+
display: none;
51+
font-size: 17px;
252
text-align: center;
53+
padding: 12px 10px;
54+
border-radius: 7px;
55+
margin-bottom: 15px;
356
}
4-
5-
.App-logo {
6-
height: 40vmin;
7-
pointer-events: none;
57+
.input-part .info-txt.error{
58+
color: #721c24;
59+
display: block;
60+
background: #f8d7da;
61+
border: 1px solid #f5c6cb;
862
}
9-
10-
@media (prefers-reduced-motion: no-preference) {
11-
.App-logo {
12-
animation: App-logo-spin infinite 20s linear;
13-
}
63+
.input-part .info-txt.pending{
64+
color: #0c5460;
65+
display: block;
66+
background: #d1ecf1;
67+
border: 1px solid #bee5eb;
1468
}
15-
16-
.App-header {
17-
background-color: #282c34;
18-
min-height: 100vh;
69+
.input-part :where(input, button){
70+
width: 100%;
71+
height: 55px;
72+
border: none;
73+
outline: none;
74+
font-size: 18px;
75+
border-radius: 7px;
76+
}
77+
.input-part input{
78+
text-align: center;
79+
padding: 0 15px;
80+
border: 1px solid #ccc;
81+
}
82+
.input-part input:is(:focus, :valid){
83+
border: 2px solid #43AFFC;
84+
}
85+
.input-part input::placeholder{
86+
color: #bfbfbf;
87+
}
88+
.input-part .separator{
89+
height: 1px;
90+
width: 100%;
91+
margin: 25px 0;
92+
background: #ccc;
93+
position: relative;
1994
display: flex;
20-
flex-direction: column;
2195
align-items: center;
2296
justify-content: center;
23-
font-size: calc(10px + 2vmin);
24-
color: white;
2597
}
26-
27-
.App-link {
28-
color: #61dafb;
98+
.separator::before{
99+
content: "or";
100+
color: #b3b3b3;
101+
font-size: 19px;
102+
padding: 0 15px;
103+
background: #fff;
104+
}
105+
.input-part button{
106+
color: #fff;
107+
cursor: pointer;
108+
background: #43AFFC;
109+
transition: 0.3s ease;
110+
}
111+
.input-part button:hover{
112+
background: #1d9ffc;
29113
}
30114

31-
@keyframes App-logo-spin {
32-
from {
33-
transform: rotate(0deg);
34-
}
35-
to {
36-
transform: rotate(360deg);
37-
}
115+
.wrapper .weather-part{
116+
display: none;
117+
margin: 30px 0 0;
118+
align-items: center;
119+
justify-content: center;
120+
flex-direction: column;
121+
}
122+
.wrapper.active .weather-part{
123+
display: flex;
124+
}
125+
.weather-part img{
126+
max-width: 125px;
127+
}
128+
.weather-part .temp{
129+
display: flex;
130+
font-weight: 500;
131+
font-size: 72px;
132+
}
133+
.weather-part .temp .numb{
134+
font-weight: 600;
135+
}
136+
.weather-part .temp .deg{
137+
font-size: 40px;
138+
display: block;
139+
margin: 10px 5px 0 0;
38140
}
141+
.weather-part .weather{
142+
font-size: 21px;
143+
text-align: center;
144+
margin: -5px 20px 15px;
145+
}
146+
.weather-part .location{
147+
display: flex;
148+
font-size: 19px;
149+
padding: 0 20px;
150+
text-align: center;
151+
margin-bottom: 30px;
152+
align-items: flex-start;
153+
}
154+
.location i{
155+
font-size: 22px;
156+
margin: 4px 5px 0 0;
157+
}
158+
.weather-part .bottom-details{
159+
display: flex;
160+
width: 100%;
161+
justify-content: space-between;
162+
border-top: 1px solid #ccc;
163+
}
164+
.bottom-details .column{
165+
display: flex;
166+
width: 100%;
167+
padding: 15px 0;
168+
align-items: center;
169+
justify-content: center;
170+
}
171+
.column i{
172+
color: #5DBBFF;
173+
font-size: 40px;
174+
}
175+
.column.humidity{
176+
border-left: 1px solid #ccc;
177+
}
178+
.column .details{
179+
margin-left: 3px;
180+
}
181+
.details .temp, .humidity span{
182+
font-size: 18px;
183+
font-weight: 500;
184+
margin-top: -3px;
185+
}
186+
.details .temp .deg{
187+
margin: 0;
188+
font-size: 17px;
189+
padding: 0 2px 0 1px;
190+
}
191+
.column .details p{
192+
font-size: 14px;
193+
margin-top: -6px;
194+
}
195+
.humidity i{
196+
font-size: 37px;
197+
}
198+
199+
.text-error{
200+
color:red;
201+
text-align: center;
202+
margin-top: 1rem;
203+
}

0 commit comments

Comments
 (0)