diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index dde92bd..b3c0c6c 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -2,3 +2,4 @@ 1. zetabug 2. AnthonyHad +3. Aryann15 \ No newline at end of file diff --git a/src/App.js b/src/App.js index 99bd8f3..15f8c61 100644 --- a/src/App.js +++ b/src/App.js @@ -1,16 +1,16 @@ -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) { @@ -18,7 +18,7 @@ function App() { } 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=${ @@ -81,7 +81,17 @@ function App() { {isLoading && } {display} - Ranvir@zetabug/github +
+

+

Ranvir@zetabug/github

+ GitHub Logo +

+
); } diff --git a/src/app.css b/src/app.css index e437085..4e69bb4 100644 --- a/src/app.css +++ b/src/app.css @@ -1,52 +1,50 @@ -*, -::after, -::before { - padding: 0; - margin: 0; - box-sizing: border-box; - font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; -} h1 { + font-size: 3rem; + font-weight: 600; + margin-bottom: 2rem; text-align: center; - margin-top: 3rem; } -.container { - height: 100vh; - width: 100%; + +/* Styling for main div */ +.main_div { 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; + justify-content: center; + height: 100vh; + background-color: rgba(180, 58, 204, 0.5); } -img { - height: 100px; +/* Styling for container div */ +.container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: rgba(53, 93, 202, 0.5); + padding: 2rem; + border-radius: 1rem; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); + width: 90%; + max-width: 800px; + margin: 0 auto; + margin-top: 2rem; } .credit { - position: fixed; - top: 10px; - right: 10px; - font-size: 1.5rem; -} -p { - font-size: 2rem; + font-size: 0.8rem; + color: #777; + margin-top: 1rem; + text-align: center; } -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; +.footer { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + padding: 1rem; + background-color: #aedbe3; } +body { + background-color: #a5c6e9; /*light orange*/ +} \ No newline at end of file diff --git a/src/weather app.png b/src/weather app.png new file mode 100644 index 0000000..8b3c440 Binary files /dev/null and b/src/weather app.png differ