Shell
x
1
1
npx create-react-app weatherappShell
1
1
1
cd weatherappShell
1
1
1
npm i bootstrapApp.js
JavaScript
1
74
74
1
import React from "react";2
3
import Titles from "./components/Titles";4
import Form from "./components/Form";5
import Weather from "./components/Weather";6
7
const API_KEY = "###yourapikey###;8
9
class App extends React.Component {10
state = {11
temperature: undefined,12
city: undefined,13
country: undefined,14
humidity: undefined,15
description: undefined,16
error: undefined17
}18
getWeather = async (e) => {19
e.preventDefault();20
const city = e.target.elements.city.value;21
const country = e.target.elements.country.value;22
const api_call = await fetch(`http://api.openweathermap.org/data/2.5/weather?q=${city},${country}&appid=${API_KEY}&units=metric`);23
const data = await api_call.json();24
if (city && country) {25
this.setState({26
temperature: data.main.temp,27
city: data.name,28
country: data.sys.country,29
humidity: data.main.humidity,30
description: data.weather[0].description,31
error: ""32
});33
} else {34
this.setState({35
temperature: undefined,36
city: undefined,37
country: undefined,38
humidity: undefined,39
description: undefined,40
error: "Please enter the values."41
});42
}43
}44
render() {45
return (46
<div>47
<div className="wrapper">48
<div className="main">49
<div className="container">50
<div className="row">51
<div className="col-xs-5 title-container">52
<Titles />53
</div>54
<div className="col-xs-7 form-container">55
<Form getWeather={this.getWeather} />56
<Weather 57
temperature={this.state.temperature} 58
humidity={this.state.humidity}59
city={this.state.city}60
country={this.state.country}61
description={this.state.description}62
error={this.state.error}63
/>64
</div>65
</div>66
</div>67
</div>68
</div>69
</div>70
);71
}72
};73
74
export default App;Here you need to replace the openweathermap api key.
After that, make a components folder and inside this you need to make
Form.js
JavaScript
1
11
11
1
import React from "react";2
3
const Form = props => (4
<form onSubmit={props.getWeather}>5
<input type="text" name="city" placeholder="City..."/>6
<input type="text" name="country" placeholder="Country..."/>7
<button>Get Weather</button>8
</form>9
);10
11
export default Form;Titles.js
JavaScript
1
10
10
1
import React from "react";2
3
const Titles = () => (4
<div>5
<h1 className="title-container__title">Weather Finder</h1>6
<h3 className="title-container__subtitle">Find out temperature, conditions and more</h3>7
</div>8
);9
10
export default Titles;Weather.js
JavaScript
1
31
31
1
import React from "react";2
3
const Weather = props => (4
<div className="weather__info">5
{ 6
props.city && props.country && <p className="weather__key"> Location: 7
<span className="weather__value"> { props.city }, { props.country }</span>8
</p> 9
}10
{ 11
props.temperature && <p className="weather__key"> Temperature: 12
<span className="weather__value"> { props.temperature } </span>13
</p> 14
}15
{ 16
props.humidity && <p className="weather__key"> Humidity: 17
<span className="weather__value"> { props.humidity } </span>18
</p> 19
}20
{ 21
props.description && <p className="weather__key"> Conditions: 22
<span className="weather__value"> { props.description } </span>23
</p> 24
}25
{ 26
props.error && <p className="weather__error">{ props.error }</p> 27
}28
</div>29
);30
31
export default Weather;App.css
CSS
1
127
127
1
@import url('https://fonts.googleapis.com/css?family=Merriweather:100,200,300,300i,400,400i,700');2
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:400,700');3
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400');4
5
body {6
font-family: "Open Sans", serif;7
}8
9
.wrapper {10
background: linear-gradient(to right, #e67e22, #e74c3c);11
height: 100vh;12
display: flex;13
justify-content: center;14
align-items: center;15
}16
17
.main {18
height: 90vh;19
background: #fff;20
box-shadow: 0px 13px 40px -13px rgba(0,0,0,0.75);21
width: 80%;22
margin: 0 auto;23
}24
25
.title-container {26
height: 90vh;27
background: url("img/bg.jpg") center center no-repeat;28
background-size: cover;29
display: flex;30
align-items: center;31
justify-content: center;32
text-align: center;33
color: #000;34
}35
36
.title-container__title {37
font-size: 50px;38
letter-spacing: 2px;39
line-height: 1.3;40
font-family: 'Roboto Slab', serif;41
}42
43
.title-container__subtitle {44
font-style: italic;45
font-weight: 100;46
letter-spacing: 1px;47
line-height: 1.5;48
font-family: "Merriweather", serif;49
}50
51
.form-container {52
background-color: #2c3e50;53
height: 90vh;54
padding-top: 100px;55
padding-left: 50px;56
}57
58
input[type="text"] {59
background-color: transparent;60
border: 0;61
border-bottom: solid 1px #f16051;62
width: 30%;63
padding-bottom: 4px;64
color: #fff !important;65
font-weight: lighter;66
letter-spacing: 2px;67
margin-bottom: 30px;68
margin-right: 20px;69
font-size: 20px;70
}71
72
input[type="text"] { 73
outline: none;74
}75
76
input:autofill {77
box-shadow: 0 0 0 30px #2c3e50 inset;78
text-fill-color: #fff !important;79
}80
81
button {82
border: 0;83
padding: 8px 20px;84
margin: 0 2px;85
border-radius: 2px;86
font-weight: lighter;87
letter-spacing: 1px;88
font-size: 15px;89
cursor: pointer;90
background-color: #f16051;91
color: #fff;92
font-weight: 100;93
}94
95
button:active {96
outline: none;97
}98
99
.weather__info {100
width: 60%;101
font-size: 20px;102
font-weight: 200;103
letter-spacing: 2px;104
}105
106
.weather__key {107
color: #f16051;108
border-bottom: solid 2px rgba(255,255,255,0.06);109
padding: 20px 0 20px 0;110
font-weight: 400;111
}112
113
.weather__key:last-child {114
border: 0;115
}116
117
.weather__value {118
color: #fff;119
font-weight: 200;120
}121
122
.weather__error {123
color: #f16051;124
font-size: 20px;125
letter-spacing: 1px;126
font-weight: 200;127
}Screenshot of Weather App Using React Bootstrap OpenWeatherMap API
