WEATHER APPLICATION
-
-
-
-
+
+
+
+
);
}
diff --git a/src/UI/LoadingIndicator.css b/src/UI/LoadingIndicator.css
index 78f64ce..d7ab6a3 100644
--- 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 #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;
diff --git a/src/app.css b/src/app.css
index e437085..a47e315 100644
--- a/src/app.css
+++ b/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;
\ No newline at end of file
diff --git a/src/components/Weather.css b/src/components/Weather.css
deleted file mode 100644
index 869cc99..0000000
--- a/src/components/Weather.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.output-sec {
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 0.8rem;
- font-size: 1.5rem;
-}
-.output-sec .location {
- text-transform: uppercase;
-}
diff --git a/src/components/Weather.js b/src/components/Weather.js
index c3685e6..38988af 100644
--- a/src/components/Weather.js
+++ b/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 (
- WEATHER APPLICATION
+
+
+
+
+
+
-
-
- {isLoading &&
- Ranvir@zetabug/github
-
+ +
or
-
-
- -
- {isLoading &&
+
+
+
+ {isLoading ?
+
+
-
+
+ 
-
+
);
};
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..37cc651
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: ["./src/**/*.{js,jsx,ts,tsx}"],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+};
{props.place.name}, {props.place.region}
- {props.data.condition.text}
- Temperature : {props.data.temp_c}°C
- Humidity : {props.data.humidity}
+ {props.data.condition.text}
+ Temperature : {props.data.temp_c}°C
+ Humidity : {props.data.humidity}