Create a Weather app using React Js

Sasindu K. — Tue, 20 Sep 2022 08:58:11 +0000

Hey there create a whether app using React js and openweathermap API

Folder structure

App.js file

import logo from './logo.svg';
import './App.css';
import Weather from './components/Weather';

function App() {
  return (
    <div className="App">
     <Weather/>
    </div>
  );
}

export default App;

Weather.js file

import React, { useState } from 'react'
import './Weather.css'
import WeatherCard from './WeatherCard'

export default function Weather() {

    const [formData, setFormData] = useState([]);
    const [data, setData] = useState(null);

    const apiKey = 'ENTER YPOUR API KEY'; // https://openweathermap.org/

    const handlerChange = (e) => {
        setFormData(prev => ({ ...prev, [e.target.name]: e.target.value }))
    }


    const handlerSubmit = async () => {
        if (!formData.city) {
            alert("Please Eneter City");
            return
        }

        if (!formData.country) {
            alert("Please Eneter Country");
            return
        }


        const res = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${formData.city},${formData.country}&appid=${apiKey}`).then((res) => {
            res.json().then((data) => {
                setData(data);
                console.log(data);
            });
            ;
        }).catch((err) => {
            console.log(err);
            setData(null)
            return
        })




    }

    return (
        <div className='weather'>

            <br />

            {!data ? (
                <div>
                    <span className='title' style={{
                        fontSize: 35
                    }}>This is Your weather</span>
                    <input type="text" onChange={handlerChange} className='input-control' name="city" placeholder="Enter your city" />
                    <input type="text" onChange={handlerChange} className='input-control' name="country" placeholder="Enter your Country" />
                    <button className='btn' onClick={handlerSubmit}>
                        Find Now Weather
                    </button>
                </div>
            ) : (
                <>
                    <WeatherCard {...data} />

                    <div class="location-container">
                        <button onClick={() => setData(null)} class="location-button"> <i data-feather="map-pin"></i><span>Change location</span></button>
                    </div>
                </>

            )}


            {/* Weather Card */}
            {/* */}

        </div>
    )
}

WeatherCard.js file

import React from 'react'
import './WeatherCard.css'

export default function WeatherCard({ name, sys, main, weather, wind,visibility }) {
    return (
        <div>

            <div class="container">
                <div class="weather-side">
                    <div class="weather-gradient"></div>
                    <div class="date-container">
                        <h2 class="date-dayname"></h2><span class="date-day">
                            {new Date().toLocaleDateString()}
                        </span><i class="location-icon" data-feather="map-pin"></i><span class="location">
                            {name} {sys.country}
                        </span>
                    </div>
                    <div class="weather-container"><i class="weather-icon" data-feather="sun"></i>
                        <img src={`http://openweathermap.org/img/wn/${weather[0].icon}.png`} width={85} />
                        <span>

                        </span>
                        <h1 class="weather-temp">{Math.floor(main.temp - 273.15)} °C</h1>
                        <h4>
                        Hight/Low {" - "}
                            {Math.floor(main.temp_max - 273.15)}
                            / {" "}
                            {Math.floor(main.temp_max - 273.15)} °C
                        </h4>



                        <h3 class="weather-desc">{weather[0].main} ({weather[0].description})</h3>
                    </div>
                </div>
                <div style={{
                    width: '350px'
                }} class="info-side">
                    <div class="today-info-container">
                        <div class="today-info">
                            <div class="precipitation"> <span class="title">PRESSURE</span><span class="value">{main.pressure} hPa</span>
                                <div class="clear"></div>
                            </div>
                            <div class="humidity"> <span class="title">HUMIDITY</span><span class="value">{main.humidity} %</span>
                                <div class="clear"></div>
                            </div>
                            <div class="wind"> <span class="title">WIND</span><span class="value">{Math.floor((wind.speed * 18) / 5)} km/h</span>
                                <div class="clear"></div>
                            </div>
                            <div class="wind"> <span class="title">VISIBILITY</span><span class="value">{visibility / 1000} km</span>
                                <div class="clear"></div>
                            </div>
                        </div>
                    </div>
                    <div class="week-container">

                    </div>

                </div>
            </div>
        </div>
    )
}

Final Code - Github Code

Hello there how are u :)

Sasindu K. — Mon, 29 Aug 2022 19:28:38 +0000

This is so fare and some image i want


> 

## [](**url**)

DEV Community: Sasindu K.

Create a Weather app using React Js

Hello there how are u :)