Skip to content

Commit 7ab573b

Browse files
Pieta9221Pieta9221
committed
zetabug#15 Added Styling
1 parent 502562d commit 7ab573b

File tree

13 files changed

+240
-44
lines changed

13 files changed

+240
-44
lines changed

‎CONTRIBUTING.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@
22

33
1. zetabug
44
2. AnthonyHad
5+
3. Pieta

‎package-lock.json‎

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

‎public/favicon.ico‎

416 Bytes
Binary file not shown.

‎public/index.html‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@
99
name="description"
1010
content="Web site created using create-react-app"
1111
/>
12+
<link rel="preconnect" href="https://fonts.googleapis.com">
13+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
14+
<link href="https://fonts.googleapis.com/css2?family=Alike+Angular&family=Sen:wght@400;700&family=Work+Sans&display=swap" rel="stylesheet">
15+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
1216
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
1317
<!--
1418
manifest.json provides metadata used when your web app is installed on a
@@ -24,7 +28,7 @@
2428
work correctly both with client-side routing and a non-root public URL.
2529
Learn how to configure a non-root public URL by running `npm run build`.
2630
-->
27-
<title>React App</title>
31+
<title>Weather App</title>
2832
</head>
2933
<body>
3034
<noscript>You need to enable JavaScript to run this app.</noscript>

‎public/logo.png‎

75.4 KB
Loading

‎readme.md‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,48 @@
1+
# WeatherApp
2+
3+
WeatherApp is a simple and user-friendly weather application that provides real-time weather information for your location and other locations worldwide. Stay informed about the current weather conditions, forecasts, and more with WeatherApp.
4+
5+
![WeatherApp Screenshot](./public/logo.png)
6+
7+
## Features
8+
9+
- Real-time weather updates based on your location.
10+
- Search for weather information in any location.
11+
- Beautiful and intuitive user interface.
12+
13+
14+
## Getting Started
15+
16+
### Prerequisites
17+
18+
Before you begin, ensure you have met the following requirements:
19+
20+
- A modern web browser.
21+
- Internet connectivity to fetch weather data.
22+
23+
### Installation
24+
25+
WeatherApp is a web-based application, so there is no installation required. Simply visit the website or launch the app to start using it.
26+
27+
## Usage
28+
29+
1. **Location-Based Weather**:
30+
- Upon opening the app, you can grant the app access to your current location and display the current weather conditions for that location.
31+
32+
2. **Search for Other Locations**:
33+
- Use the search bar to enter the name of a city or location you want to check the weather for.
34+
35+
36+
37+
## Contributing
38+
39+
Contributions are welcome! If you'd like to contribute to WeatherApp, please follow these steps:
40+
41+
1. Fork the repository on GitHub.
42+
2. Create a new branch with a descriptive name for your feature or fix.
43+
3. Make your changes and commit them.
44+
4. Push your branch to your fork on GitHub.
45+
5. Submit a pull request to the main repository.
46+
47+
Please review our [Contributing Guidelines](CONTRIBUTING.md) for more information.
148

‎src/App.js‎

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { useState, useEffect } from 'react';
33

44
import Weather from './components/Weather';
55
import LoadingIndicator from './UI/LoadingIndicator';
6+
import sadCloud from './assets/img/sad_cloud.png';
67

78
import './app.css';
89

@@ -41,6 +42,7 @@ function App() {
4142
}`;
4243
const response = await fetch(url, options);
4344
const responseData = await response.json();
45+
4446
return responseData;
4547
}, []);
4648

@@ -53,35 +55,41 @@ function App() {
5355
}, [location, search, fetchData]);
5456

5557
let display = data ? (
56-
<Weather place={place} data={data} />
58+
<Weather className='sec' place={place} data={data} />
5759
) : (
58-
<p>no data found 😬</p>
60+
<div className='search-container'>
61+
<p>Oops! no data found</p>
62+
<img src={sadCloud} alt="sad cloud" className="weather-icon" />
63+
</div>
5964
);
6065

6166
return (
6267
<>
6368
<div className="container">
69+
<div className='box'>
6470
<h1>WEATHER APPLICATION</h1>
65-
<div className="search-sec">
66-
<input
67-
type="text"
71+
<div className="search-container">
72+
<input className="search-input" type="text" name="search"
6873
value={search}
6974
placeholder="Search by City..."
70-
onChange={handleSearch}
71-
/>
75+
onChange={handleSearch} />
76+
<i className="fas fa-search search-icon"></i>
77+
7278
</div>
79+
80+
7381
<div>
7482
<p>or</p>
7583
</div>
7684
<div>
7785
<button onClick={geoHandler}>Find me!</button>
7886
</div>
79-
<br />
80-
<br />
87+
8188
{isLoading && <LoadingIndicator />}
8289
{display}
90+
</div>
8391
</div>
84-
<span className="credit">Ranvir@zetabug/github</span>
92+
{/* <span className="credit">Ranvir@zetabug/github</span> */}
8593
</>
8694
);
8795
}

‎src/UI/LoadingIndicator.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@
1111
width: 44px;
1212
height: 44px;
1313
margin: 6px;
14-
border: 6px solid #ff2058;
14+
border: 6px solid #F7CBFD;
1515
border-radius: 50%;
1616
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
17-
border-color: #ff2058 transparent transparent transparent;
17+
border-color: #F7CBFD transparent transparent transparent;
1818
}
1919
.lds-ring div:nth-child(1) {
2020
animation-delay: -0.45s;

‎src/app.css‎

Lines changed: 89 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,68 @@
1-
*,
2-
::after,
3-
::before {
1+
* {
42
padding: 0;
53
margin: 0;
64
box-sizing: border-box;
7-
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
5+
font-family: 'Sen', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
86
}
7+
98
h1 {
109
text-align: center;
11-
margin-top: 3rem;
10+
margin-top: 2rem;
11+
color: #fff;
12+
font-size: 2rem;
1213
}
14+
1315
.container {
1416
height: 100vh;
1517
width: 100%;
1618
display: flex;
1719
flex-direction: column;
1820
align-items: center;
1921
gap: 2rem;
22+
background: radial-gradient(134.01% 122.64% at 39.87% 96.67%, #F7CBFD 0%, #7758D1 99.61%);
23+
}
24+
25+
.box {
26+
margin: auto;
27+
height: 90%;
28+
max-width: 80%;
29+
padding: 1rem 2rem;
30+
display: flex;
31+
flex-direction: column;
32+
align-items: center;
33+
gap: 2rem;
34+
border-radius: 26px;
35+
/* background: linear-gradient(269deg, #362A84 8.64%, #5936B4 97.57%); */
36+
background-image: url('./assets/img/background.png');
37+
background-size: cover;
38+
background-position: center;
39+
box-shadow: -40px 60px 150px 0px rgba(59, 38, 123, 0.70);
2040
}
21-
input {
41+
42+
.search-container {
43+
position: relative;
44+
display: flex;
45+
align-items: center;
46+
gap: 1rem;
47+
}
48+
49+
.search-input {
50+
max-width: 500px;
51+
padding: 10px 30px 10px 10px;
52+
border: 1px solid #ccc;
53+
border-radius: 25px;
2254
outline: none;
23-
border: 1px solid black;
24-
width: 300px;
25-
height: 30px;
26-
padding: 4px;
27-
color: #000;
55+
border-radius: 10px;
56+
background: #F7CBFD;
57+
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) inset;
58+
transition: all 0.3s;
59+
}
60+
61+
.search-icon {
62+
position: absolute;
63+
right: 10px;
64+
color: #888;
65+
pointer-events: none;
2866
}
2967

3068
img {
@@ -36,17 +74,51 @@ img {
3674
right: 10px;
3775
font-size: 1.5rem;
3876
}
77+
3978
p {
40-
font-size: 2rem;
79+
font-size: 1.5rem;
80+
text-align: center;
81+
color: #fff;
4182
}
4283

84+
4385
button {
4486
cursor: pointer;
45-
background-color: transparent;
46-
border: 1px solid #8a2b06;
47-
padding: 0.5rem 2rem;
87+
background-color: #7758D1;
88+
color: #fff;
89+
border: none;
90+
padding: 1rem 2rem;
4891
border-radius: 25px;
49-
margin-left: 1rem;
50-
font-family: 'Courier New', Courier, monospace;
5192
font-weight: bold;
93+
transition: background-color 0.3s;
94+
}
95+
96+
button:hover {
97+
background-color: #F7CBFD;
5298
}
99+
100+
101+
.button-container {
102+
display: flex;
103+
justify-content: center;
104+
}
105+
106+
107+
.sec{
108+
margin-bottom: 1rem;
109+
}
110+
@media screen and (max-width: 768px) {
111+
.search-input {
112+
padding: 10px;
113+
max-width: 250px;
114+
}
115+
116+
h1 {
117+
font-size: 1.5rem;
118+
}
119+
120+
p {
121+
font-size: 1rem;
122+
}
123+
124+
}

‎src/assets/img/background.png‎

530 KB
Loading

0 commit comments

Comments
 (0)