diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index dde92bd..d9d12e5 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -2,3 +2,4 @@ 1. zetabug 2. AnthonyHad +3. Pieta \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 85454e7..9647bec 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15372,7 +15372,7 @@ "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==" }, "node_modules/svgo": { - "version": "1.3.2", + "version": "2.0.4", "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz", "integrity": "sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==", "deprecated": "This SVGO version is no longer supported. Upgrade to v2.x.x.", @@ -27821,8 +27821,7 @@ "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==" }, "svgo": { - "version": "1.3.2", - "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz", + "version": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz", "integrity": "sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==", "requires": { "chalk": "^2.4.1", diff --git a/public/favicon.ico b/public/favicon.ico index a11777c..5a06262 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/index.html b/public/index.html index aa069f2..d7154ae 100644 --- a/public/index.html +++ b/public/index.html @@ -9,6 +9,10 @@ name="description" content="Web site created using create-react-app" /> + + + + - React App + Weather App diff --git a/public/logo.png b/public/logo.png new file mode 100644 index 0000000..d87ec0f Binary files /dev/null and b/public/logo.png differ diff --git a/readme.md b/readme.md index 8b13789..8cc0dfc 100644 --- a/readme.md +++ b/readme.md @@ -1 +1,48 @@ +# WeatherApp + +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. + +![WeatherApp Screenshot](./public/logo.png) + +## Features + +- Real-time weather updates based on your location. +- Search for weather information in any location. +- Beautiful and intuitive user interface. + + +## Getting Started + +### Prerequisites + +Before you begin, ensure you have met the following requirements: + +- A modern web browser. +- Internet connectivity to fetch weather data. + +### Installation + +WeatherApp is a web-based application, so there is no installation required. Simply visit the website or launch the app to start using it. + +## Usage + +1. **Location-Based Weather**: + - Upon opening the app, you can grant the app access to your current location and display the current weather conditions for that location. + +2. **Search for Other Locations**: + - Use the search bar to enter the name of a city or location you want to check the weather for. + + + +## Contributing + +Contributions are welcome! If you'd like to contribute to WeatherApp, please follow these steps: + +1. Fork the repository on GitHub. +2. Create a new branch with a descriptive name for your feature or fix. +3. Make your changes and commit them. +4. Push your branch to your fork on GitHub. +5. Submit a pull request to the main repository. + +Please review our [Contributing Guidelines](CONTRIBUTING.md) for more information. diff --git a/src/App.js b/src/App.js index 99bd8f3..a3da8e9 100644 --- a/src/App.js +++ b/src/App.js @@ -3,6 +3,7 @@ import { useState, useEffect } from 'react'; import Weather from './components/Weather'; import LoadingIndicator from './UI/LoadingIndicator'; +import sadCloud from './assets/img/sad_cloud.png'; import './app.css'; @@ -41,6 +42,7 @@ function App() { }`; const response = await fetch(url, options); const responseData = await response.json(); + return responseData; }, []); @@ -53,35 +55,41 @@ function App() { }, [location, search, fetchData]); let display = data ? ( - + ) : ( -

no data found 😬

+
+

Oops! no data found

+ sad cloud +
); return ( <>
+

WEATHER APPLICATION

-
- + + onChange={handleSearch} /> + +
+ +

or

-
-
+ {isLoading && } {display} +
- Ranvir@zetabug/github + {/* Ranvir@zetabug/github */} ); } diff --git a/src/UI/LoadingIndicator.css b/src/UI/LoadingIndicator.css index 78f64ce..14a3361 100644 --- a/src/UI/LoadingIndicator.css +++ b/src/UI/LoadingIndicator.css @@ -11,10 +11,10 @@ width: 44px; height: 44px; margin: 6px; - border: 6px solid #ff2058; + border: 6px solid #F7CBFD; border-radius: 50%; animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; - border-color: #ff2058 transparent transparent transparent; + border-color: #F7CBFD transparent transparent transparent; } .lds-ring div:nth-child(1) { animation-delay: -0.45s; diff --git a/src/app.css b/src/app.css index e437085..82ae4be 100644 --- a/src/app.css +++ b/src/app.css @@ -1,15 +1,17 @@ -*, -::after, -::before { +* { padding: 0; margin: 0; box-sizing: border-box; - font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; + font-family: 'Sen', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; } + h1 { text-align: center; - margin-top: 3rem; + margin-top: 2rem; + color: #fff; + font-size: 2rem; } + .container { height: 100vh; width: 100%; @@ -17,14 +19,50 @@ h1 { flex-direction: column; align-items: center; gap: 2rem; + background: radial-gradient(134.01% 122.64% at 39.87% 96.67%, #F7CBFD 0%, #7758D1 99.61%); +} + +.box { + margin: auto; + height: 90%; + max-width: 80%; + padding: 1rem 2rem; + display: flex; + flex-direction: column; + align-items: center; + gap: 2rem; + border-radius: 26px; + /* background: linear-gradient(269deg, #362A84 8.64%, #5936B4 97.57%); */ + background-image: url('./assets/img/background.png'); + background-size: cover; + background-position: center; + box-shadow: -40px 60px 150px 0px rgba(59, 38, 123, 0.70); } -input { + +.search-container { + position: relative; + display: flex; + align-items: center; + gap: 1rem; +} + +.search-input { + max-width: 500px; + padding: 10px 30px 10px 10px; + border: 1px solid #ccc; + border-radius: 25px; outline: none; - border: 1px solid black; - width: 300px; - height: 30px; - padding: 4px; - color: #000; + border-radius: 10px; + background: #F7CBFD; + box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) inset; + transition: all 0.3s; +} + +.search-icon { + position: absolute; + right: 10px; + color: #888; + pointer-events: none; } img { @@ -36,17 +74,51 @@ img { right: 10px; font-size: 1.5rem; } + p { - font-size: 2rem; + font-size: 1.5rem; + text-align: center; + color: #fff; } + button { cursor: pointer; - background-color: transparent; - border: 1px solid #8a2b06; - padding: 0.5rem 2rem; + background-color: #7758D1; + color: #fff; + border: none; + padding: 1rem 2rem; border-radius: 25px; - margin-left: 1rem; - font-family: 'Courier New', Courier, monospace; font-weight: bold; + transition: background-color 0.3s; +} + +button:hover { + background-color: #F7CBFD; } + + +.button-container { + display: flex; + justify-content: center; +} + + +.sec{ + margin-bottom: 1rem; +} +@media screen and (max-width: 768px) { + .search-input { + padding: 10px; + max-width: 250px; + } + + h1 { + font-size: 1.5rem; + } + + p { + font-size: 1rem; + } + +} \ No newline at end of file diff --git a/src/assets/img/background.png b/src/assets/img/background.png new file mode 100644 index 0000000..48ac1f4 Binary files /dev/null and b/src/assets/img/background.png differ diff --git a/src/assets/img/sad_cloud.png b/src/assets/img/sad_cloud.png new file mode 100644 index 0000000..039d9fe Binary files /dev/null and b/src/assets/img/sad_cloud.png differ diff --git a/src/components/Weather.css b/src/components/Weather.css index 869cc99..766d7b9 100644 --- a/src/components/Weather.css +++ b/src/components/Weather.css @@ -1,10 +1,69 @@ -.output-sec { + +.weather-container { display: flex; - flex-direction: column; align-items: center; - gap: 0.8rem; + gap: 1rem; font-size: 1.5rem; + background: radial-gradient(134.01% 122.64% at 39.87% 96.67%, #F7CBFD 0%, #7758D1 99.61%); + padding: 1rem; + border-radius: 10px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); + margin-top: 80px; +} + +.left-section, +.right-section { + display: flex; + flex-direction: column; + align-items: center; + flex-grow: 1; + flex-basis: 0; + text-align: center; + justify-content: center; } -.output-sec .location { + +.weather-icon { + width: 100px; + height: 100px; +} + +.location { text-transform: uppercase; + font-weight: bold; + color: #362A84; +} + +.sky-status { + color: #333; +} + +.temp, +.humidity { + color: #555; +} + + +@media screen and (max-width: 768px) { + .weather-container { + font-size: 1rem; + flex-direction: column; + margin-top: 10px; + } + + .weather-icon { + width: 80px; + height: 80px; + } + + .left-section, + .right-section { + flex-grow: 0; + flex-basis: auto; + } + + .weather-icon { + width: 80px; + height: 80px; + } + } diff --git a/src/components/Weather.js b/src/components/Weather.js index c3685e6..8a3bbe0 100644 --- a/src/components/Weather.js +++ b/src/components/Weather.js @@ -1,15 +1,21 @@ +// Weather.js +import React from 'react'; import './Weather.css'; const Weather = (props) => { return ( -
-
- {props.place.name}, {props.place.region} +
+
+ +
{props.data.condition.text}
+
+
+
+ {props.place.name}, {props.place.region} +
+
Temperature: {props.data.temp_c}°C
+
Humidity:{props.data.humidity}
- -
{props.data.condition.text}
-
Temperature : {props.data.temp_c}°C
-
Humidity : {props.data.humidity}
); };