Added styling

CONTRIBUTING.md

@@ -2,3 +2,4 @@
 
 1. zetabug
 2. AnthonyHad
+3. JonathanDPotter

package.json

@@ -34,5 +34,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.13",
+    "postcss": "^8.4.18",
+    "tailwindcss": "^3.2.2"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/App.js

@@ -1,24 +1,24 @@
-import React, { useCallback } from 'react';
-import { useState, useEffect } from 'react';
+import React, { useCallback } from "react";
+import { useState, useEffect } from "react";
 
-import Weather from './components/Weather';
-import LoadingIndicator from './UI/LoadingIndicator';
+import Weather from "./components/Weather";
+import LoadingIndicator from "./UI/LoadingIndicator";
 
-import './app.css';
+import "./app.css";
 
 function App() {
   const [data, setData] = useState(null);
   const [place, setPlace] = useState(null);
-  const [search, setSearch] = useState('');
-  const [location, setLocation] = useState('');
+  const [search, setSearch] = useState("");
+  const [location, setLocation] = useState("");
   const [isLoading, setIsLoading] = useState(false);
 
   function handleSearch(e) {
     setSearch(e.target.value);
   }
 
   async function geoHandler() {
-    setSearch('');
+    setSearch("");
     setIsLoading(true);
     await navigator.geolocation.getCurrentPosition((position) => {
       const crd = position.coords;
@@ -30,10 +30,10 @@ function App() {
 
   const fetchData = useCallback(async (search, location) => {
     const options = {
-      method: 'GET',
+      method: "GET",
       headers: {
-        'X-RapidAPI-Key': '0173291af0msh62b3ca25953f210p13d732jsn66b4d9f97708',
-        'X-RapidAPI-Host': 'weatherapi-com.p.rapidapi.com',
+        "X-RapidAPI-Key": "0173291af0msh62b3ca25953f210p13d732jsn66b4d9f97708",
+        "X-RapidAPI-Host": "weatherapi-com.p.rapidapi.com",
       },
     };
     const url = `https://weatherapi-com.p.rapidapi.com/current.json?q=${
@@ -55,34 +55,47 @@ function App() {
   let display = data ? (
     <Weather place={place} data={data} />
   ) : (
-    <p>no data found 😬</p>
+    <div className="flex flex-col items-center justify-center bg-slate-700 rounded-xl p-[1rem]">
+        <p className="text-2xl">no data found</p>
+        <p className="text-3xl">😬</p>
+    </div>
   );
 
   return (
-    <>
-      <div className="container">
-        <h1>WEATHER APPLICATION</h1>
-        <div className="search-sec">
-          <input
-            type="text"
-            value={search}
-            placeholder="Search by City..."
-            onChange={handleSearch}
-          />
-        </div>
-        <div>
+    <div className="flex h-[100vh] w-[100vw] overflow-hidden flex-col items-center  bg-amber-200 ">
+      <header className="h-[10vh] w-[100vw] bg-slate-700 flex items-center justify-center">
+        <h1 className="text-white text-2xl">WEATHER APPLICATION</h1>
+      </header>
+      <div className="h-[10vh] w-[100vw] flex  items-center justify-center">
+        <input
+          className="h-[2rem] border-b-2 border-b-slate-700 text-slate-700 px-2"
+          type="text"
+          value={search}
+          placeholder="Search by City..."
+          onChange={handleSearch}
+        />
+      </div>
+      <div className="h-[10vh] w-[100vw] flex items-center justify-center ">
+        <hr className="border-4 absolute w-[90vw] border-slate-700 z-0" />
+        <div className="flex items-center justify-center h-[10vh] w-[10vh] rounded-full bg-slate-700 text-white text-2xl z-10">
           <p>or</p>
         </div>
-        <div>
-          <button onClick={geoHandler}>Find me!</button>
-        </div>
-        <br />
-        <br />
-        {isLoading && <LoadingIndicator />}
-        {display}
       </div>
-      <span className="credit">Ranvir@zetabug/github</span>
-    </>
+      <div className="h-[10vh] w-[100vw] flex items-center justify-center ">
+        <button
+          className="p-4 bg-slate-700 rounded-xl text-lg text-white"
+          onClick={geoHandler}
+        >
+          Find me!
+        </button>
+      </div>
+      <div className="h-[50vh] w-[100vw] flex flex-col items-center justify-center text-white">
+        {isLoading ? <LoadingIndicator /> : display}
+      </div>
+      <footer className="h-[10vh] w-[100vw] bg-slate-700 text-white flex items-center justify-end pr-[1rem]">
+        <span>Ranvir@zetabug/github</span>
+      </footer>
+    </div>
   );
 }
 

src/UI/LoadingIndicator.css

@@ -11,10 +11,10 @@
   width: 44px;
   height: 44px;
   margin: 6px;
-  border: 6px solid #ff2058;
+  border: 6px solid #991b1b;
   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: #991b1b transparent transparent transparent;
 }
 .lds-ring div:nth-child(1) {
   animation-delay: -0.45s;

src/app.css

@@ -1,52 +1,13 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
+
 *,
 ::after,
 ::before {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
-  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
-}
-h1 {
-  text-align: center;
-  margin-top: 3rem;
-}
-.container {
-  height: 100vh;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 2rem;
-}
-input {
-  outline: none;
-  border: 1px solid black;
-  width: 300px;
-  height: 30px;
-  padding: 4px;
-  color: #000;
-}
-
-img {
-  height: 100px;
-}
-.credit {
-  position: fixed;
-  top: 10px;
-  right: 10px;
-  font-size: 1.5rem;
-}
-p {
-  font-size: 2rem;
-}
-
-button {
-  cursor: pointer;
-  background-color: transparent;
-  border: 1px solid #8a2b06;
-  padding: 0.5rem 2rem;
-  border-radius: 25px;
-  margin-left: 1rem;
-  font-family: 'Courier New', Courier, monospace;
-  font-weight: bold;
+  font-family:'Poppins', sans-serif;
 }
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/components/Weather.js

@@ -1,15 +1,28 @@
-import './Weather.css';
+import { useEffect, useState } from "react";
 
 const Weather = (props) => {
+  const [iconSize, setIconSize] = useState(
+    window.innerHeight < 700 ? 64 : 128
+  );
+
+  useEffect(() => {
+    setIconSize(window.innerHeight < 700 ? 64 : 128);
+  }, [window.innerHeight]);
+
   return (
-    <div className="output-sec">
-      <div className="location">
+    <div className="flex flex-col items-center gap-[.8rem] text-2xl border-8 rounded-lg border-red-800 p-[1rem] bg-slate-700">
+      <div className="uppercase">
         {props.place.name}, {props.place.region}
       </div>
-      <img src={props.data.condition.icon} alt="" />
-      <div className="sky-status">{props.data.condition.text}</div>
-      <div className="temp">Temperature : {props.data.temp_c}°C</div>
-      <div className="humidity">Humidity : {props.data.humidity}</div>
+      <img
+        width={iconSize}
+        height={iconSize}
+        src={props.data.condition.icon}
+        alt={props.data.condition.text}
+      />
+      <div>{props.data.condition.text}</div>
+      <div>Temperature : {props.data.temp_c}°C</div>
+      <div>Humidity : {props.data.humidity}</div>
     </div>
   );
 };

tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{js,jsx,ts,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};