Made severe UI fixes to NextJs WeatherApp (#961)

* Made severe UI fixes to NextJs/Basic/WeatherApp

* Added the logo for a particular weather change

Next-JS-Projects/Basic/Weather-Website/app/page.module.css

@@ -1,97 +1,104 @@
-@import url(https://fonts.googleapis.com/css?family=Poiret+One);
+@import url('https://fonts.googleapis.com/css2?family=Poiret+One&family=Poppins:wght@400;700&display=swap');
 @import url(https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css);
 
-
 .main {
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
-  padding: 6rem;
+  height: 100vh;
+  background: linear-gradient(120deg, #6a11cb, #2575fc);
+  font-family: 'Poppins', sans-serif;
+  margin: -8px;
 }
 
 .widget {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  height: 550px;
+  position: relative;
+  height: 600px;
   width: 500px;
-  transform: translate(-50%, -50%);
-  background: linear-gradient(120deg, #9d4edd, #5a189a);
-  cursor: pointer;
+  background: rgba(255, 255, 255, 0.1);
   border-radius: 20px;
+  backdrop-filter: blur(10px);
+  padding: 2rem;
   box-shadow: 0 27px 55px 0 rgba(0, 0, 0, 0.3), 0 17px 17px 0 rgba(0, 0, 0, 0.15);
 }
 
-.weatherLocation{
+.weatherLocation {
   display: flex;
-  align-items: center;
   justify-content: center;
-  border-radius: 20px;
-  padding: 2rem;
-}
-
-.weatherLocation button{
-  background: #080705;
-  color:#fff;
-  border: 1px solid transparent;
-}
-.weatherLocation input:focus{
-  outline: 0 none;
+  margin-bottom: 1.5rem;
 }
 
-.widget .weatherIcon {
-  height: 60%;
-  border-top-left-radius: 20px;
-  border-top-right-radius: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  font-size: 100px;
-  color: white
-}
- .widget .weatherIcon i {
-  padding-top: 30px;
-}
-.input_field {
-  width: 60%;
-  border-radius: 50px;
+.weatherLocation input {
   border: none;
-  height: 40px;
-  margin-right: 20px;
+  border-radius: 50px;
+  padding: 0.7rem 1rem;
+  font-size: 1.1rem;
+  width: 60%;
   text-align: center;
-  font-size: 20px;
 }
-.search_button {
-  width: 80px;
-  height: 40px;
+
+.weatherLocation button {
   border-radius: 50px;
+  border: none;
+  padding: 0.7rem 1rem;
+  margin-left: 1rem;
+  font-size: 1.1rem;
+  background: #080705;
+  color: white;
   cursor: pointer;
 }
+
+.time {
+  text-align: center;
+  font-size: 1.5rem;
+  color: white;
+  margin-bottom: 1rem;
+  font-family: 'Poiret One', cursive;
+}
+
 .icon_and_weatherInfo {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 40px;
-  margin-top: 50px;
+  margin-top: 30px;
 }
+
+.weatherIcon i {
+  font-size: 100px;
+  color: white;
+}
+
 .temperature {
-  font-size: 55px;
+  font-size: 60px;
   color: white;
 }
+
 .place {
   text-align: center;
   font-size: 35px;
-  margin-top: 70px;
+  margin-top: 30px;
   color: white;
+  font-weight: 700;
 }
+
 .weatherCondition {
+  text-align: center;
   color: white;
+  font-size: 1.2rem;
 }
+
 .date {
   text-align: center;
-  font-size: 20px;
-  margin-top: 20px;
+  font-size: 1.2rem;
   color: white;
+  margin-top: 20px;
+  font-family: 'Poiret One', cursive;
+}
 
-}
+@media (max-width: 768px) {
+  .widget {
+    width: 90%;
+  }
+}

Next-JS-Projects/Basic/Weather-Website/app/page.tsx

@@ -14,7 +14,9 @@ const Home = () => {
   const date = getCurrentDate();
   const [weatherData, setWeatherData] = useState<any>(null);
   const [city, setCity] = useState("Ghaziabad");
+  const [time, setTime] = useState<string>("");
 
+  // Fetch Weather Data by City
   async function fetchData(cityName: string) {
     try {
       const response = await fetch(
@@ -27,6 +29,7 @@ const Home = () => {
     }
   }
 
+  // Fetch Weather Data by Coordinates
   async function fetchDataByCoordinates(latitude: number, longitude: number) {
     try {
       const response = await fetch(
@@ -39,6 +42,27 @@ const Home = () => {
     }
   }
 
+  // Mapping for weather conditions to icons
+  const weatherIconMapping = {
+    clear: "wi-day-sunny",
+    rain: "wi-rain",
+    thunderstorm: "wi-thunderstorm",
+    snow: "wi-snow",
+    mist: "wi-fog",
+    clouds: "wi-cloudy",
+    fog: "wi-fog",
+  };
+
+  // Update Clock
+  useEffect(() => {
+    const timer = setInterval(() => {
+      const now = new Date();
+      setTime(now.toLocaleTimeString());
+    }, 1000);
+    return () => clearInterval(timer);
+  }, []);
+
+  // Get user coordinates for weather data
   useEffect(() => {
     if ("geolocation" in navigator) {
       navigator.geolocation.getCurrentPosition(
@@ -53,6 +77,11 @@ const Home = () => {
     }
   }, []);
 
+  // Determine weather icon based on the description
+  const weatherDescription = weatherData?.weather[0]?.main?.toLowerCase();
+  const weatherIconClass =
+    weatherIconMapping[weatherDescription] || "wi-day-cloudy";
+
   return (
     <main className={styles.main}>
       <article className={styles.widget}>
@@ -72,21 +101,15 @@ const Home = () => {
             onChange={(e) => setCity(e.target.value)}
           />
           <button className={styles.search_button} type="submit">
-            Seach
+            Search
           </button>
         </form>
+        <div className={styles.time}>Current Time: {time}</div>
         {weatherData && weatherData.weather && weatherData.weather[0] ? (
           <>
             <div className={styles.icon_and_weatherInfo}>
               <div className={styles.weatherIcon}>
-                {weatherData?.weather[0]?.description === "rain" ||
-                weatherData?.weather[0]?.description === "fog" ? (
-                  <i
-                    className={`wi wi-day-${weatherData?.weather[0]?.description}`}
-                  ></i>
-                ) : (
-                  <i className="wi wi-day-cloudy"></i>
-                )}
+                <i className={`wi ${weatherIconClass}`}></i>
               </div>
               <div className={styles.weatherInfo}>
                 <div className={styles.temperature}>
@@ -111,4 +134,4 @@ const Home = () => {
   );
 };
 
-export default Home;
+export default Home;