Day 5 progress

Sheikh-JamirAlam · Feb 6, 2023 · f827997 · f827997
1 parent ead2ebb
commit f827997
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 19 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -49,6 +49,7 @@ function App() {
       setTimeZoneName(searchedCity[0].timezone);
       setTime(new Intl.DateTimeFormat('en-US', options).format(date));
       const timerId = setInterval(refreshDate, 1000);
+      setIsClickedSearch(false);
       return () => {
         clearInterval(timerId);
       };
@@ -138,8 +139,6 @@ function App() {
       const userData = await response.json();
       await handleSearch(userData.city);
       setIsLoading(false);
-    } else {
-      console.log("Failed to fetch data");
     }
   }
 
@@ -166,21 +165,21 @@ function App() {
           backgroundImage: `url("./src/assets/${data.weather[0].main.toLowerCase()}.jpg")`
         }}
       >
-        <div className="flex flex-col place-content-center mx-auto font-josefin font-normal text-lg text-gray-200">
-          <div className="place-content-evenly w-128 h-128 mb-12 flex flex-col rounded-xl glass-card">
-            <div className="m-5 flex place-content-between">
-              <h3 className="ml-5">{data.name}, {data.sys.country}</h3>
+        <div className="flex flex-col place-content-center mx-auto font-josefin font-normal text-base md:text-lg text-gray-200">
+          <div className="place-content-evenly w-72 h-96 md:w-128 md:h-128 mb-12  flex flex-col rounded-xl glass-card">
+            <div className="m-3 md:m-5 flex place-content-between">
+              <h3 className="ml-3 md:ml-5">{data.name}, {data.sys.country}</h3>
               <div className="flex">
                 <span className="material-symbols-outlined text-base text-gray-300">schedule</span>
-                <p className="mr-5 ml-1">{time}</p>
+                <p className="mr-3 md:mr-5 ml-1">{time}</p>
               </div>
             </div>
-            <div className="m-5 flex flex-col justify-center">
-              <img src={`https://basmilius.github.io/weather-icons/production/fill/all/${icon}.svg`} alt="weather icon" className="w-52 place-self-center" />
+            <div className="m-3 md:m-5 flex flex-col justify-center">
+              <img src={`https://basmilius.github.io/weather-icons/production/fill/all/${icon}.svg`} alt="weather icon" className="w-44 md:w-52 place-self-center" />
               <p className="place-self-center">{data.weather[0].main}</p>
             </div>
-            <div className="m-5 flex place-content-between">
-              <div className="ml-5">
+            <div className="m-3 md:m-5 flex place-content-between">
+              <div className="ml-3 md:ml-5">
                 <div className="flex">
                   <span className="material-symbols-outlined text-gray-300">air</span>
                   <p className="ml-3">{Math.floor(data.wind.speed)} m/s</p>
@@ -194,35 +193,38 @@ function App() {
                   <p className="ml-3">{data.main.pressure} hPa</p>
                 </div>
               </div>
-              <div className="mr-5 flex flex-col">
-                <h1 className="text-6xl">{Math.floor(data.main.temp)}°</h1>
+              <div className="mr-3 md:mr-5 flex flex-col">
+                <h1 className="text-5xl md:text-6xl">{Math.floor(data.main.temp)}°</h1>
                 <p className="text-gray-300">Feels like {Math.floor(data.main.feels_like)}°</p>
               </div>
             </div>
           </div>
           <div
-            className={`w-14 h-14 mx-auto flex glass-card place-content-center ${!isSearchDisabled ? "justify-between animate-expand" : "items-center cursor-pointer hover:scale-110"} rounded-full transition-transform ease-in-out delay-50 duration-300`}
+            className={`w-14 h-14 mx-auto flex glass-card place-content-center ${!isSearchDisabled ? "justify-between animate-expand_mobile md:animate-expand" : "items-center cursor-pointer hover:scale-110"} rounded-full transition-transform ease-in-out delay-50 duration-300`}
             onClick={event => {
               setIsSearchDisabled(false);
             }}
           >
             <span
-              className={`material-symbols-outlined text-3xl place-self-center ml-3 cursor-pointer ${!isSearchDisabled ? "visible relative" : "invisible absolute"}`}
+              className={`material-symbols-outlined text-3xl place-self-center ml-1 md:ml-3 cursor-pointer ${!isSearchDisabled ? "visible relative" : "invisible absolute"}`}
+              onClick={event => {
+                getLocation();
+              }}
             >home_pin</span>
             <input
               type="text"
               name="searchtext"
               placeholder="Search by city name."
               autoComplete="off"
               value={handleChange}
-              className={`h-8 w-96 pl-2 bg-transparent place-self-center outline-none border-b-2 border-gray-500 focus:border-gray-300 ${handleError && "border-red-600 focus:border-red-600"} ${!isSearchDisabled ? "visible relative" : "invisible absolute"}`}
+              className={`h-8 w-52 md:w-96 pl-2 bg-transparent place-self-center outline-none border-b-2 border-gray-500 focus:border-gray-300 ${handleError && "border-red-600 focus:border-red-600"} ${!isSearchDisabled ? "visible relative" : "invisible absolute"}`}
               onChange={event => {
                 setHandleChange(event.target.value);
                 setHandleError(false);
               }}
             />
             <span
-              className={`material-symbols-outlined text-3xl place-self-center cursor-pointer ${!isSearchDisabled && "mr-3"} ${isSearchDisabled && "pointer-events-none"}`}
+              className={`material-symbols-outlined text-3xl place-self-center cursor-pointer ${!isSearchDisabled && "mr-1 md:mr-3"} ${isSearchDisabled && "pointer-events-none"}`}
               onClick={event => {
                 handleSearch(handleChange);
                 setIsClickedSearch(true);

diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -24,13 +24,20 @@ module.exports = {
       keyframes: {
         expand: {
           "100%": {
-            "width": "512px",
+            "width": "32rem",
+            "border-radius": "0.75rem"
+          }
+        },
+        expand_mobile: {
+          "100%": {
+            "width": "18rem",
             "border-radius": "0.75rem"
           }
         }
       },
       animation: {
-        expand: "expand 150ms ease forwards"
+        expand: "expand 150ms ease forwards",
+        expand_mobile: "expand_mobile 150ms ease forwards"
       }
     }
   },