DEV Community

Cover image for How to make a weather app in React using openweather api

Posted on


How to make a weather app in React using openweather api

So today i am going to show how to make a weather app in react

At first create an empty react app

npx create-react-app weather-app

cd into it and now open it in code editor

code .

Now delete app.css and open the app.js
import useState

import React, { useState } from 'react';

not make a variable and app api key

const api = {
  key: "key",
  base: ""

Now set query and weather to empty

  const [query, setQuery] = useState('');
  const [weather, setWeather] = useState({});

now lets add search feature after that we will make the search field

  const search = evt => {
    if (evt.key === "Enter") {
        .then(res => res.json())
        .then(result => {

So now to add the date and month builder

  const dateBuilder = (d) => {
    let months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
    let days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
    let day = days[d.getDay()];
    let date = d.getDate();
    let month = months[d.getMonth()];
    let year = d.getFullYear();

    return `${day} ${date} ${month} ${year}`

it will retun day date and month
so now lets build the ui
Alt Text
After that lets start the styling put the css code

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

body {
  font-family: "montseratt", sans-serif;

.app {
  background-image: url("./assets/cold-bg.jpg");
  background-size: cover;
  background-position: bottom;
  transition: 0.4s ease;

.app.warm {
  background-image: url("./assets/warm-bg.jpg");

main {
  min-height: 100vh;
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.75)
  padding: 25px;

.search-box {
  width: 100%;
  margin: 0 0 75px;

.search-box .search-bar {
  display: block;
  width: 100%;
  padding: 15px;

  appearance: none;
  background: none;
  border: none;
  outline: none;

  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 0px 0px 16px 16px;
  margin-top: -25px;

  box-shadow: 0px 5px rgba(0, 0, 0, 0.2);

  color: #313131;
  font-size: 20px;

  transition: 0.4s ease;

.search-box .search-bar:focus {
  background-color: rgba(255, 255, 255, 0.75);

.location-box .location {
  color: #fff;
  font-size: 32px;
  font-weight: 500;
  text-align: center;
  text-shadow: 3px 3px rgba(50, 50, 70, 0.5);

.location-box .date {
  color: #fff;
  font-size: 20px;
  font-weight: 300;
  font-style: italic;
  text-align: center;
  text-shadow: 2px 2px rgba(50, 50, 70, 0.5);

.weather-box {
  text-align: center;

.weather-box .temp {
  position: relative;
  display: inline-block;
  margin: 30px auto;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 16px;

  padding: 15px 25px;

  color: #fff;
  font-size: 102px;
  font-weight: 900;

  text-shadow: 3px 6px rgba(50, 50, 70, 0.5);
  text-align: center;
  box-shadow: 3px 6px rgba(0, 0, 0, 0.2);

.weather-box .weather {
  color: #fff;
  font-size: 48px;
  font-weight: 700;
  text-shadow: 3px 3px rgba(50, 50, 70, 0.5);

.description {
  color: #fff;
  font-size: 18px;

Then start the react app

npm start

there you have it
Alt Text

Thank you for reading goodbye

Top comments (3)

wearypossum4770 profile image
Stephen Smith

Thank you for the post. I think a good change for this can be.
export function dateBuilder(date = new Date(), options = {}) {
let opts = {
weekday: "long",
year: "numeric",
month: "long",
day: "numeric",
return date.toLocaleString("en-US", opts);

jupiteris profile image
Jupiter Programmer

Hello, Hybrid. Worthful!!!

drukey profile image

Hi thanks, such a great tutorial. What if I need to display the current weather of other cities, like not based on my current location but for other cities?

Timeless DEV post...

Git Concepts I Wish I Knew Years Ago

The most used technology by developers is not Javascript.

It's not Python or HTML.

It hardly even gets mentioned in interviews or listed as a pre-requisite for jobs.

I'm talking about Git and version control of course.

One does not simply learn git