{"id":3487,"date":"2022-09-21T21:20:13","date_gmt":"2022-09-21T16:20:13","guid":{"rendered":"https:\/\/www.edopedia.com\/blog\/?p=3487"},"modified":"2022-09-21T21:20:15","modified_gmt":"2022-09-21T16:20:15","slug":"make-a-weather-app-using-react-bootstrap-openweathermap-api","status":"publish","type":"post","link":"https:\/\/www.edopedia.com\/blog\/make-a-weather-app-using-react-bootstrap-openweathermap-api\/","title":{"rendered":"Make a Weather App Using React Bootstrap OpenWeatherMap API"},"content":{"rendered":"\n
npx create-react-app weatherapp<\/pre><\/div>\n\n\n\n
cd weatherapp<\/pre><\/div>\n\n\n\n
npm i bootstrap<\/pre><\/div>\n\n\n\n
App.js<\/h2>\n\n\n\n
import React from "react";\n\nimport Titles from ".\/components\/Titles";\nimport Form from ".\/components\/Form";\nimport Weather from ".\/components\/Weather";\n\nconst API_KEY = "###yourapikey###;\n\nclass App extends React.Component {\n  state = {\n    temperature: undefined,\n    city: undefined,\n    country: undefined,\n    humidity: undefined,\n    description: undefined,\n    error: undefined\n  }\n  getWeather = async (e) => {\n    e.preventDefault();\n    const city = e.target.elements.city.value;\n    const country = e.target.elements.country.value;\n    const api_call = await fetch(`http:\/\/api.openweathermap.org\/data\/2.5\/weather?q=${city},${country}&appid=${API_KEY}&units=metric`);\n    const data = await api_call.json();\n    if (city && country) {\n      this.setState({\n        temperature: data.main.temp,\n        city: data.name,\n        country: data.sys.country,\n        humidity: data.main.humidity,\n        description: data.weather[0].description,\n        error: ""\n      });\n    } else {\n      this.setState({\n        temperature: undefined,\n        city: undefined,\n        country: undefined,\n        humidity: undefined,\n        description: undefined,\n        error: "Please enter the values."\n      });\n    }\n  }\n  render() {\n    return (\n      <div>\n        <div className="wrapper">\n          <div className="main">\n            <div className="container">\n              <div className="row">\n                <div className="col-xs-5 title-container">\n                  <Titles \/>\n                <\/div>\n                <div className="col-xs-7 form-container">\n                  <Form getWeather={this.getWeather} \/>\n                  <Weather \n                    temperature={this.state.temperature} \n                    humidity={this.state.humidity}\n                    city={this.state.city}\n                    country={this.state.country}\n                    description={this.state.description}\n                    error={this.state.error}\n                  \/>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    );\n  }\n};\n\nexport default App;<\/pre><\/div>\n\n\n\n
Here you need to replace the\u00a0openweathermap<\/code>\u00a0api key.<\/p>\n\n\n\n
After that, make a\u00a0components<\/code>\u00a0folder and inside this you need to make<\/p>\n\n\n\n
Form.js<\/h2>\n\n\n\n
import React from "react";\n\nconst Form = props => (\n\t<form onSubmit={props.getWeather}>\n\t\t<input type="text" name="city" placeholder="City..."\/>\n\t\t<input type="text" name="country" placeholder="Country..."\/>\n\t\t<button>Get Weather<\/button>\n\t<\/form>\n);\n\nexport default Form;<\/pre><\/div>\n\n\n\n
Titles.js<\/h2>\n\n\n\n
import React from "react";\n\nconst Titles = () => (\n\t<div>\n\t\t<h1 className="title-container__title">Weather Finder<\/h1>\n\t\t<h3 className="title-container__subtitle">Find out temperature, conditions and more...<\/h3>\n\t<\/div>\n);\n\nexport default Titles;<\/pre><\/div>\n\n\n\n
Weather.js<\/h2>\n\n\n\n
import React from "react";\n\nconst Weather = props => (\n\t<div className="weather__info">\n\t {\t\n\t \tprops.city && props.country && <p className="weather__key"> Location: \n\t \t\t<span className="weather__value"> { props.city }, { props.country }<\/span>\n\t \t<\/p> \n\t }\n\t { \t\n\t \tprops.temperature && <p className="weather__key"> Temperature: \n\t \t\t<span className="weather__value"> { props.temperature }\t<\/span>\n\t \t<\/p> \n\t }\n\t { \t\n\t \tprops.humidity && <p className="weather__key"> Humidity: \n\t \t\t<span className="weather__value"> { props.humidity } <\/span>\n\t \t<\/p> \n\t }\n\t { \t\n\t \tprops.description && <p className="weather__key"> Conditions: \n\t \t\t<span className="weather__value"> { props.description } <\/span>\n\t <\/p> \n\t }\n\t { \n\t \tprops.error && <p className="weather__error">{ props.error }<\/p>  \n\t }\n\t<\/div>\n);\n\nexport default Weather;<\/pre><\/div>\n\n\n\n
App.css<\/h2>\n\n\n\n
@import url('https:\/\/fonts.googleapis.com\/css?family=Merriweather:100,200,300,300i,400,400i,700');\n@import url('https:\/\/fonts.googleapis.com\/css?family=Roboto+Slab:400,700');\n@import url('https:\/\/fonts.googleapis.com\/css?family=Open+Sans:300,400');\n\nbody {\n  font-family: "Open Sans", serif;\n}\n\n.wrapper {\n  background: linear-gradient(to right, #e67e22, #e74c3c);\n  height: 100vh;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.main {\n  height: 90vh;\n  background: #fff;\n  box-shadow: 0px 13px 40px -13px rgba(0,0,0,0.75);\n  width: 80%;\n  margin: 0 auto;\n}\n\n.title-container {\n  height: 90vh;\n  background: url("img\/bg.jpg") center center no-repeat;\n  background-size: cover;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  color: #000;\n}\n\n.title-container__title {\n  font-size: 50px;\n  letter-spacing: 2px;\n  line-height: 1.3;\n  font-family: 'Roboto Slab', serif;\n}\n\n.title-container__subtitle {\n  font-style: italic;\n  font-weight: 100;\n  letter-spacing: 1px;\n  line-height: 1.5;\n  font-family: "Merriweather", serif;\n}\n\n.form-container {\n  background-color: #2c3e50;\n  height: 90vh;\n  padding-top: 100px;\n  padding-left: 50px;\n}\n\ninput[type="text"] {\n  background-color: transparent;\n  border: 0;\n  border-bottom: solid 1px #f16051;\n  width: 30%;\n  padding-bottom: 4px;\n  color: #fff !important;\n  font-weight: lighter;\n  letter-spacing: 2px;\n  margin-bottom: 30px;\n  margin-right: 20px;\n  font-size: 20px;\n}\n\ninput[type="text"] { \n    outline: none;\n}\n\ninput:-webkit-autofill {\n    -webkit-box-shadow: 0 0 0 30px #2c3e50 inset;\n    -webkit-text-fill-color: #fff !important;\n}\n\nbutton {\n  border: 0;\n  padding: 8px 20px;\n  margin: 0 2px;\n  border-radius: 2px;\n  font-weight: lighter;\n  letter-spacing: 1px;\n  font-size: 15px;\n  cursor: pointer;\n  background-color: #f16051;\n  color: #fff;\n  font-weight: 100;\n}\n\nbutton:active {\n  outline: none;\n}\n\n.weather__info {\n  width: 60%;\n  font-size: 20px;\n  font-weight: 200;\n  letter-spacing: 2px;\n}\n\n.weather__key {\n  color: #f16051;\n  border-bottom: solid 2px rgba(255,255,255,0.06);\n  padding: 20px 0 20px 0;\n  font-weight: 400;\n}\n\n.weather__key:last-child {\n  border: 0;\n}\n\n.weather__value {\n  color: #fff;\n  font-weight: 200;\n}\n\n.weather__error {\n  color: #f16051;\n  font-size: 20px;\n  letter-spacing: 1px;\n  font-weight: 200;\n}<\/pre><\/div>\n\n\n\n
Screenshot of Weather App Using React Bootstrap OpenWeatherMap API<\/h2>\n\n\n\n
\"Weather
Weather App Using React Bootstrap OpenWeatherMap API<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"
App.js Here you need to replace the\u00a0openweathermap\u00a0api key. After that, make a\u00a0components\u00a0folder and inside this you need to make Form.js Titles.js Weather.js App.css Screenshot of Weather App Using React Bootstrap OpenWeatherMap API<\/p>\n","protected":false},"author":1,"featured_media":1762,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[112],"tags":[],"class_list":["post-3487","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"yoast_head":"\nMake a Weather App Using React Bootstrap OpenWeatherMap API<\/title>\n<meta name=\"description\" content=\"npx create-react-app weatherapp cd weatherapp npm i bootstrap App.js import React from "react"; import Titles from\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.edopedia.com\/blog\/make-a-weather-app-using-react-bootstrap-openweathermap-api\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Make a Weather App Using React Bootstrap OpenWeatherMap API\" \/>\n<meta property=\"og:description\" content=\"npx create-react-app weatherapp cd weatherapp npm i bootstrap App.js import React from "react"; import Titles from\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.edopedia.com\/blog\/make-a-weather-app-using-react-bootstrap-openweathermap-api\/\" \/>\n<meta property=\"og:site_name\" content=\"Edopedia\" \/>\n<meta property=\"article:author\" content=\"trulyfurqan\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-21T16:20:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-21T16:20:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/09\/Weather_App_Using_React_Bootstrap_OpenWeatherMap_API-1024x512.jpg\" \/>\n<meta name=\"author\" content=\"Furqan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Furqan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Make a Weather App Using React Bootstrap OpenWeatherMap API","description":"npx create-react-app weatherapp cd weatherapp npm i bootstrap App.js import React from "react"; import Titles from","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.edopedia.com\/blog\/make-a-weather-app-using-react-bootstrap-openweathermap-api\/","og_locale":"en_US","og_type":"article","og_title":"Make a Weather App Using React Bootstrap OpenWeatherMap API","og_description":"npx create-react-app weatherapp cd weatherapp npm i bootstrap App.js import React from "react"; import Titles from","og_url":"https:\/\/www.edopedia.com\/blog\/make-a-weather-app-using-react-bootstrap-openweathermap-api\/","og_site_name":"Edopedia","article_author":"trulyfurqan","article_published_time":"2022-09-21T16:20:13+00:00","article_modified_time":"2022-09-21T16:20:15+00:00","og_image":[{"url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/09\/Weather_App_Using_React_Bootstrap_OpenWeatherMap_API-1024x512.jpg","type":"","width":"","height":""}],"author":"Furqan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Furqan","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.edopedia.com\/blog\/make-a-weather-app-using-react-bootstrap-openweathermap-api\/#article","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/make-a-weather-app-using-react-bootstrap-openweathermap-api\/"},"author":{"name":"Furqan","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339"},"headline":"Make a Weather App Using React Bootstrap OpenWeatherMap API","datePublished":"2022-09-21T16:20:13+00:00","dateModified":"2022-09-21T16:20:15+00:00","mainEntityOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/make-a-weather-app-using-react-bootstrap-openweathermap-api\/"},"wordCount":55,"commentCount":0,"publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/make-a-weather-app-using-react-bootstrap-openweathermap-api\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/02\/default_featured_image.jpg","articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.edopedia.com\/blog\/make-a-weather-app-using-react-bootstrap-openweathermap-api\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.edopedia.com\/blog\/make-a-weather-app-using-react-bootstrap-openweathermap-api\/","url":"https:\/\/www.edopedia.com\/blog\/make-a-weather-app-using-react-bootstrap-openweathermap-api\/","name":"Make a Weather App Using React Bootstrap OpenWeatherMap API","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/make-a-weather-app-using-react-bootstrap-openweathermap-api\/#primaryimage"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/make-a-weather-app-using-react-bootstrap-openweathermap-api\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/02\/default_featured_image.jpg","datePublished":"2022-09-21T16:20:13+00:00","dateModified":"2022-09-21T16:20:15+00:00","description":"npx create-react-app weatherapp cd weatherapp npm i bootstrap App.js import React from "react"; import Titles from","breadcrumb":{"@id":"https:\/\/www.edopedia.com\/blog\/make-a-weather-app-using-react-bootstrap-openweathermap-api\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.edopedia.com\/blog\/make-a-weather-app-using-react-bootstrap-openweathermap-api\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/make-a-weather-app-using-react-bootstrap-openweathermap-api\/#primaryimage","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/02\/default_featured_image.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/02\/default_featured_image.jpg","width":880,"height":495,"caption":"Default Featured Image"},{"@type":"BreadcrumbList","@id":"https:\/\/www.edopedia.com\/blog\/make-a-weather-app-using-react-bootstrap-openweathermap-api\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.edopedia.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Make a Weather App Using React Bootstrap OpenWeatherMap API"}]},{"@type":"WebSite","@id":"https:\/\/www.edopedia.com\/blog\/#website","url":"https:\/\/www.edopedia.com\/blog\/","name":"Edopedia","description":"Coding\/Programming Blog","publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.edopedia.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.edopedia.com\/blog\/#organization","name":"Edopedia","url":"https:\/\/www.edopedia.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","width":400,"height":100,"caption":"Edopedia"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339","name":"Furqan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","caption":"Furqan"},"description":"Well. I've been working for the past three years as a web designer and developer. I have successfully created websites for small to medium sized companies as part of my freelance career. During that time I've also completed my bachelor's in Information Technology.","sameAs":["http:\/\/www.edopedia.com\/blog\/","trulyfurqan"],"url":"https:\/\/www.edopedia.com\/blog\/author\/furqan\/"}]}},"_links":{"self":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3487","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/comments?post=3487"}],"version-history":[{"count":1,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3487\/revisions"}],"predecessor-version":[{"id":3489,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3487\/revisions\/3489"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media\/1762"}],"wp:attachment":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media?parent=3487"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/categories?post=3487"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/tags?post=3487"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}