FreeCodeCamp take home project 1 walkthrough - weather app

Okay, I'll be writing a blog series talking about all of freecodecamp take home projects and more, this will be the first blog post and will cover the "show the weather app".

The project is simply a weather app that shows the weather in your location, also has features like an icon to describe the weather and the temperature shown that can be toggled between the celsius and fahrenheit unit.

Project: Weather App
Approximate Time: 2hrs
Difficulty level: Easy
The link to the challenge is here.

I used React for this project which I must say was an overkill, normal HTML, CSS and JS is enough.
First, we have to get the location of our user, for that we'll use navigator.geolocation which will give a prompt to allow or block this site from knowing your current location.

The code could look like:

if (navigator.geolocation){
 navigator.geolocation.getCurrentPosition(function(position){
 var lat=position.coords.latitude;
 var long=position.coords.longitude;
 })
}

FreeCodeCamp helped us by providing an api we can make a get request to, querying with longitude and latitude we're going to fetch and use the json response we receive as below. But before the code, I put the rest of the code including the fetch request inside the if statement above to ensure we're sending the right kind of request to the api.

fetch('https://fcc-weather-api.glitch.me/api/current?lon='+long+'&lat='+lat)
.then(response=>response.json())
.then(data=>{
  //function goes here
})

The code above requests from the api, with queries "lon" for longitude and "lat" for latitude.

We should know how the response look like right?

{"coord":{"lon":139,"lat":35},"weather":[{"id":803,"main":"Clouds","description":"broken clouds","icon":"https://cdn.glitch.com/6e8889e5-7a72-48f0-a061-863548450de5%2F04d.png?1499366020964"}],"base":"stations","main":{"temp":25.56,"feels_like":28.46,"temp_min":25.56,"temp_max":25.56,"pressure":1006,"humidity":67},"wind":{"speed":0.45,"deg":116,"gust":0.89},"clouds":{"all":59},"dt":1593399515,"sys":{"type":3,"id":2019346,"country":"JP","sunrise":1593372765,"sunset":1593424915},"timezone":32400,"id":1851632,"name":"Shuzenji","cod":200}

From these results above, our main target data is the data.main.temp for the temperature, data.weather[0].icon for the icon to be displayed, data.sys.country for displaying country. Note the data is from the fetch function above. For ease and simplicity, we put the entire React component below in it.

So, what's next? Designing the app and displaying the required data after getting from the api.

The React component could look like this:

class Main extends React.Component {
  constructor(props){
    super(props)
    this.state={
      temp_change:true
    }
    this.convert=this.convert.bind(this)
    this.toggle=this.toggle.bind(this)
  }
  toggle(){
    this.setState({
      temp_change:!this.state.temp_change
    })
  }
  convert(temp){

    if(this.state.temp_change){

      return temp+'°C'
    }
    else{
      return +((9*temp/5)+32).toFixed(2) +'°F'
    }
  }
  render() {
      return (
       <div>
        <h1>A simple Weather App</h1>
        <h4>{data.sys.country}</h4>
        <div className='show'>
         <h3>{this.convert(data.main.temp)}</h3>
         <button onClick={this.toggle}> Change unit </button>
        </div>
        <h4>{data.weather[0].main}</h4>
        <img src={data.weather[0].icon} />
      </div>
      );
      }
    }
ReactDOM.render(<Main />, document.getElementById('root'))

Breaking it down, we have two functions and one state variable here. The state variable is for toggling between celsius or fahrenheit, so on the click of a button, we could change the temperature displayed. This toggling is taken care of by the toggle function, which then triggers a change in state and also the convert temperature function since the button click will trigger a re-render.

As the last line shows we have to render to an element with id of 'root', so our html code should look like this:

<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="root"></div>
        <script src="index.js"></script>
    </body>
</html>

The main focus is that you have an element, div in this case with id 'root', so that React can render your result to that element. You can then design as you deem fit, you can check out mine here on codepen.

Blog

FreeCodeCamp take home project 1 walkthrough - weather app

Agbanusi John

Join Our Newsletter. No Spam, Only the good stuff.

Related