zetabug · Pieta9221 · Oct 19, 2023
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -2,3 +2,4 @@
 
 1. zetabug
 2. AnthonyHad
+3. Pieta
diff --git a/package-lock.json b/package-lock.json
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -9,6 +9,10 @@
       name="description"
       content="Web site created using create-react-app"
     />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Alike+Angular&family=Sen:wght@400;700&family=Work+Sans&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
@@ -24,7 +28,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Weather App</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/logo.png b/public/logo.png
diff --git 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
@@ -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 ? (
-    <Weather place={place} data={data} />
+    <Weather className='sec' place={place} data={data} />
   ) : (
-    <p>no data found 😬</p>
+    <div className='search-container'>
+    <p>Oops! no data found</p>
+    <img src={sadCloud} alt="sad cloud" className="weather-icon" />
+    </div>
   );
 
   return (
     <>
       <div className="container">
+        <div className='box'>
         <h1>WEATHER APPLICATION</h1>
-        <div className="search-sec">
-          <input
-            type="text"
+        <div className="search-container">
+          <input className="search-input" type="text" name="search"
             value={search}
             placeholder="Search by City..."
-            onChange={handleSearch}
-          />
+            onChange={handleSearch} />
+          <i className="fas fa-search search-icon"></i>
+
         </div>
+
+
         <div>
           <p>or</p>
         </div>
         <div>
           <button onClick={geoHandler}>Find me!</button>
         </div>
-        <br />
-        <br />
+
         {isLoading && <LoadingIndicator />}
         {display}
+        </div>
       </div>
-      <span className="credit">Ranvir@zetabug/github</span>
+      {/* <span className="credit">Ranvir@zetabug/github</span> */}
     </>
   );
 }

diff --git 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
@@ -1,30 +1,68 @@
-*,
-::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%;
   display: flex;
   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;
+  }
+
+}
diff --git a/src/assets/img/background.png b/src/assets/img/background.png
diff --git a/src/assets/img/sad_cloud.png b/src/assets/img/sad_cloud.png
diff --git 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;
+    }
+
 }