Skip to content

Commit

Permalink
Make simple weather app
Browse files Browse the repository at this point in the history
  • Loading branch information
brenelz committed Jun 17, 2023
1 parent 0e22cb4 commit b3316dd
Showing 1 changed file with 60 additions and 1 deletion.
61 changes: 60 additions & 1 deletion src/routes/index.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,66 @@
import { Show, createSignal } from "solid-js";

const apiKey = import.meta.env.VITE_WEATHER_API_KEY;

export default function App() {
const [cityName, setCityName] = createSignal('');
const [submittedCityName, setSubittedCityName] = createSignal('');
const [tempKelvin, setTempKelvin] = createSignal<number>();
const [error, setError] = createSignal(false);
const [tempUnit, setTempUnit] = createSignal('Celcius')

const tempCelsius = () => tempKelvin() ? Math.round(tempKelvin() - 273.15) : undefined;

const handleSubmit = async (e: SubmitEvent) => {
e.preventDefault();

if (!cityName()) return;

const result = await fetch(
`https://api.openweathermap.org/data/2.5/weather?q=${cityName()}&appid=${apiKey}`
);

const weather = await result.json();

setError(!weather?.main?.temp);
setTempKelvin(weather?.main?.temp);
setSubittedCityName(weather?.name);
};

return (
<>
Initial
<h2>Weather</h2>
<form onSubmit={handleSubmit}>
<input value={cityName()} placeholder="City name" onInput={(e) => {
setCityName(e.target.value);
}} />
<button type="submit">
Check Weather
</button>
</form>
<Show when={error()}>
<p>
<strong>An error occured</strong>
</p>
</Show>
<Show when={submittedCityName()}>
<p>
The current weather in <strong>{submittedCityName()}</strong> is:{' '}

<Show when={tempUnit() === 'Celcius'} fallback={tempKelvin()}>
{tempCelsius()}
</Show>
</p>
<p>

<button onClick={() => {
setTempUnit('Celcius');
}}>Celcius</button>

<button onClick={() => {
setTempUnit('Kelvin');
}}>Kelvin</button></p>
</Show>
</>
)
}

0 comments on commit b3316dd

Please sign in to comment.