Added temperature toggle option

zetabug · May 20, 2023 · 908bef8 · 908bef8
1 parent d1a83c2
commit 908bef8
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 2 deletions.
diff --git 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
@@ -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`.
     -->
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ"
+      crossorigin="anonymous"
+    />
     <title>React App</title>
   </head>
   <body>
@@ -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`.
     -->
+    <script
+      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
+      crossorigin="anonymous"
+    ></script>
   </body>
 </html>
diff --git a/src/components/Weather.js b/src/components/Weather.js
@@ -1,14 +1,40 @@
-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 (
     <div className="output-sec">
       <div className="location">
         {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="temp mx-5">
+        Temperature : {temp}°{tempUnit}
+      </div>
+      <div className="d-flex">
+        <label className="form-check-label mx-2">°C</label>
+        <div className="form-check form-switch" onClick={toggleTemp}>
+          <input
+            className="form-check-input"
+            type="checkbox"
+            role="switch"
+            id="tempUnit"
+          />
+          <label className="form-check-label">°F</label>
+        </div>
+      </div>
       <div className="humidity">Humidity : {props.data.humidity}</div>
     </div>
   );
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,3 +2,4 @@

		1. zetabug
		2. AnthonyHad
		3. akshayghatiki311