Skip to main content

Weather

Big O

Fake data React JS​

import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import "./styles.css";

const mockWeatherData = {
  "New York": {
    temperature: "22°C",
    humidity: "56%",
    windSpeed: "15 km/h",
  },
  "Los Angeles": {
    temperature: "27°C",
    humidity: "45%",
    windSpeed: "10 km/h",
  },
  London: {
    temperature: "15°C",
    humidity: "70%",
    windSpeed: "20 km/h",
  },
};

function formatCityName(city) {
  return city
    .toLowerCase()
    .split(" ")
    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
    .join(" ");
}

function WeatherDashboard() {
  const [city, setCity] = useState("");
  const [weatherData, setWeatherData] = useState(null);
  const [previousSearch, setPreviousSearch] = useState([]);

  const handleSearch = (selectedCity) => {
    const searchCity = selectedCity || city;
    const formattedCity = formatCityName(searchCity);
    if (mockWeatherData[formattedCity]) {
      setWeatherData(mockWeatherData[formattedCity]);
      if (!selectedCity && !previousSearch.includes(formattedCity)) {
        setPreviousSearch([...previousSearch, formattedCity]);
      }
    } else {
      setWeatherData(null);
    }
  };

  return (
    <div className="weather-dashboard">
      <input
        type="text"
        id="citySearch"
        placeholder="Search for a city..."
        value={city}
        onChange={(e) => setCity(e.target.value)}
      />
      <button id="searchButton" onClick={() => handleSearch()}>
        Search
      </button>
      <div id="WeatherData">
        {weatherData ? (
          <>
            <div>Temperature: {weatherData.temperature}</div>
            <div>Humidity: {weatherData.humidity}</div>
            <div>Wind Speed: {weatherData.windSpeed}</div>
          </>
        ) : (
          <div>City not found.</div>
        )}
      </div>
      <div id="previousSearches">
        {previousSearch.length > 0 && (
          <div>
            <h3>Previous Searches:</h3>
            <div>
              {previousSearch.map((city, index) => (
                <button
                  key={index}
                  onClick={() => handleSearch(city)}
                  style={{
                    margin: "5px",
                    padding: "5px 10px",
                    cursor: "pointer",
                  }}
                >
                  {city}
                </button>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}
CSS Weather

Fake data React TS​

import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import "./styles.css";

const mockWeatherData = {
  "New York": {
    temperature: "22°C",
    humidity: "56%",
    windSpeed: "15 km/h",
  },
  "Los Angeles": {
    temperature: "27°C",
    humidity: "45%",
    windSpeed: "10 km/h",
  },
  London: {
    temperature: "15°C",
    humidity: "70%",
    windSpeed: "20 km/h",
  },
};

function formatCityName(city) {
  return city
    .toLowerCase()
    .split(" ")
    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
    .join(" ");
}

function WeatherDashboard() {
  const [city, setCity] = useState("");
  const [weatherData, setWeatherData] = useState(null);
  const [previousSearch, setPreviousSearch] = useState([]);

  const handleSearch = (selectedCity) => {
    const searchCity = selectedCity || city;
    const formattedCity = formatCityName(searchCity);
    if (mockWeatherData[formattedCity]) {
      setWeatherData(mockWeatherData[formattedCity]);
      if (!selectedCity && !previousSearch.includes(formattedCity)) {
        setPreviousSearch([...previousSearch, formattedCity]);
      }
    } else {
      setWeatherData(null);
    }
  };

  return (
    <div className="weather-dashboard">
      <input
        type="text"
        id="citySearch"
        placeholder="Search for a city..."
        value={city}
        onChange={(e) => setCity(e.target.value)}
      />
      <button id="searchButton" onClick={() => handleSearch()}>
        Search
      </button>
      <div id="WeatherData">
        {weatherData ? (
          <>
            <div>Temperature: {weatherData.temperature}</div>
            <div>Humidity: {weatherData.humidity}</div>
            <div>Wind Speed: {weatherData.windSpeed}</div>
          </>
        ) : (
          <div>City not found.</div>
        )}
      </div>
      <div id="previousSearches">
        {previousSearch.length > 0 && (
          <div>
            <h3>Previous Searches:</h3>
            <div>
              {previousSearch.map((city, index) => (
                <button
                  key={index}
                  onClick={() => handleSearch(city)}
                  style={{
                    margin: "5px",
                    padding: "5px 10px",
                    cursor: "pointer",
                  }}
                >
                  {city}
                </button>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}
CSS Weather

Real fetching React JS​

import React, { useState, useEffect } from "react";
import { createRoot } from "react-dom/client";
import "./styles.css";

const API_KEY = "API_KEY";
const BASE_URL = "https://api.openweathermap.org/data/2.5/weather";

function WeatherDashboard() {
  const [city, setCity] = useState("");
  const [weatherData, setWeatherData] = useState(null);
  const [previousSearch, setPreviousSearch] = useState([]);

  useEffect(() => {
    if (city) {
      fetchWeatherData(city);
    }
  }, [city]);

  const fetchWeatherData = async (cityName) => {
    const formattedCity = formatCityName(cityName);
    try {
      const response = await fetch(
        `${BASE_URL}?q=${formattedCity}&appid=${API_KEY}&units=metric`,
      );
      if (response.ok) {
        const data = await response.json();
        setWeatherData({
          temperature: `${data.main.temp}°C`,
          humidity: `${data.main.humidity}%`,
          windSpeed: `${data.wind.speed} m/s`,
        });
        if (!previousSearch.includes(formattedCity)) {
          setPreviousSearch([...previousSearch, formattedCity]);
        }
      } else {
        setWeatherData(null);
      }
    } catch (error) {
      console.error("Error fetching weather data:", error);
      setWeatherData(null);
    }
  };

  const handleSearch = () => {
    fetchWeatherData(city);
  };

  const handlePreviousSearchClick = (city) => {
    setCity(city);
  };

  return (
    <div className="weather-dashboard">
      <input
        type="text"
        id="citySearch"
        placeholder="Search for a city..."
        value={city}
        onChange={(e) => setCity(e.target.value)}
      />
      <button id="searchButton" onClick={handleSearch}>
        Search
      </button>
      <div id="WeatherData">
        {weatherData ? (
          <>
            <div>Temperature: {weatherData.temperature}</div>
            <div>Humidity: {weatherData.humidity}</div>
            <div>Wind Speed: {weatherData.windSpeed}</div>
          </>
        ) : (
          <div>City not found.</div>
        )}
      </div>
      <div id="previousSearches">
        {previousSearch.length > 0 && (
          <div>
            <h3>Previous Searches:</h3>
            <div>
              {previousSearch.map((city, index) => (
                <button
                  key={index}
                  onClick={() => handlePreviousSearchClick(city)}
                  style={{
                    margin: "5px",
                    padding: "5px 10px",
                    cursor: "pointer",
                  }}
                >
                  {city}
                </button>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

function formatCityName(city) {
  return city
    .toLowerCase()
    .split(" ")
    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
    .join(" ");
}
CSS Weather

Real fetching React TS​

import React, { useState, useEffect } from "react";
import { createRoot } from "react-dom/client";
import "./styles.css";

const API_KEY = "API_KEY";
const BASE_URL = "https://api.openweathermap.org/data/2.5/weather";

interface WeatherData {
  temperature: string;
  humidity: string;
  windSpeed: string;
}

function WeatherDashboard() {
  const [city, setCity] = useState<string>("");
  const [weatherData, setWeatherData] = useState<WeatherData | null>(null);
  const [previousSearch, setPreviousSearch] = useState<string[]>([]);

  useEffect(() => {
    if (city) {
      fetchWeatherData(city);
    }
  }, [city]);

  const fetchWeatherData = async (cityName: string) => {
    const formattedCity = formatCityName(cityName);
    try {
      const response = await fetch(
        `${BASE_URL}?q=${formattedCity}&appid=${API_KEY}&units=metric`,
      );
      if (response.ok) {
        const data = await response.json();
        setWeatherData({
          temperature: `${data.main.temp}°C`,
          humidity: `${data.main.humidity}%`,
          windSpeed: `${data.wind.speed} m/s`,
        });
        if (!previousSearch.includes(formattedCity)) {
          setPreviousSearch([...previousSearch, formattedCity]);
        }
      } else {
        setWeatherData(null);
      }
    } catch (error) {
      console.error("Error fetching weather data:", error);
      setWeatherData(null);
    }
  };

  const handleSearch = () => {
    fetchWeatherData(city);
  };

  const handlePreviousSearchClick = (city: string) => {
    setCity(city);
  };

  return (
    <div className="weather-dashboard">
      <input
        type="text"
        id="citySearch"
        placeholder="Search for a city..."
        value={city}
        onChange={(e) => setCity(e.target.value)}
      />
      <button id="searchButton" onClick={handleSearch}>
        Search
      </button>
      <div id="WeatherData">
        {weatherData ? (
          <>
            <div>Temperature: {weatherData.temperature}</div>
            <div>Humidity: {weatherData.humidity}</div>
            <div>Wind Speed: {weatherData.windSpeed}</div>
          </>
        ) : (
          <div>City not found.</div>
        )}
      </div>
      <div id="previousSearches">
        {previousSearch.length > 0 && (
          <div>
            <h3>Previous Searches:</h3>
            <div>
              {previousSearch.map((city, index) => (
                <button
                  key={index}
                  onClick={() => handlePreviousSearchClick(city)}
                  style={{
                    margin: "5px",
                    padding: "5px 10px",
                    cursor: "pointer",
                  }}
                >
                  {city}
                </button>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

function formatCityName(city: string): string {
  return city
    .toLowerCase()
    .split(" ")
    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
    .join(" ");
}
CSS Weather