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`. --> + <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 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 ( <div className="output-sec"> <div className="location"> @@ -8,7 +20,21 @@ const Weather = (props) => { </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> );