Skip to content
This repository was archived by the owner on Nov 19, 2023. It is now read-only.

Added temperature toggle option #22

Open
akshayghatiki311 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Added temperature toggle option #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CONTRIBUTING.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,4 @@

1. zetabug
2. AnthonyHad
3. akshayghatiki311
11 changes: 11 additions & 0 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
30 changes: 28 additions & 2 deletions src/components/Weather.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
Expand Down