From 908bef8aec3d74109f9f84b71876058632a9fa48 Mon Sep 17 00:00:00 2001 From: Akshay Date: Sun, 21 May 2023 00:46:35 +0530 Subject: [PATCH] Added temperature toggle option --- CONTRIBUTING.md | 1 + public/index.html | 11 +++++++++++ src/components/Weather.js | 30 ++++++++++++++++++++++++++++-- 3 files changed, 40 insertions(+), 2 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index dde92bd..a3511f3 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -2,3 +2,4 @@ 1. zetabug 2. AnthonyHad +3. akshayghatiki311 diff --git a/public/index.html b/public/index.html index aa069f2..000f406 100644 --- a/public/index.html +++ b/public/index.html @@ -24,6 +24,12 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> + React App @@ -39,5 +45,10 @@ To begin the development, run `npm start` or `yarn start`. To create a production bundle, use `npm run build` or `yarn build`. --> + diff --git a/src/components/Weather.js b/src/components/Weather.js index c3685e6..ae52411 100644 --- a/src/components/Weather.js +++ b/src/components/Weather.js @@ -1,6 +1,18 @@ -import './Weather.css'; +import "./Weather.css"; +import { useState } from "react"; const Weather = (props) => { + const [tempUnit, setTempUnit] = useState("C"); + const [temp, setTemp] = useState(props.data.temp_c); + const toggleTemp = async () => { + if (tempUnit === "C") { + setTempUnit("F"); + setTemp(props.data.temp_f); + } else if (tempUnit === "F") { + setTempUnit("C"); + setTemp(props.data.temp_c); + } + }; return (
@@ -8,7 +20,21 @@ const Weather = (props) => {
{props.data.condition.text}
-
Temperature : {props.data.temp_c}°C
+
+ Temperature : {temp}°{tempUnit} +
+
+ +
+ + +
+
Humidity : {props.data.humidity}
);