api_key_weather_app

Gain insights into creating five dynamic applications with ReactJS. Delve into hooks, APIs, and localStorage while building projects like to-do lists, quizzes, memory games, portfolios, and GitHub profiles.

ReactJS is one of the most well-known JavaScript frameworks. It was created by Facebook (now Meta). Being component-based and drawing on the most recent theories behind design systems, it allows you to design frontend software quickly and create dynamic user interfaces.

This course takes a project-oriented approach. You’ll start by building a “My To-do List” application, using localStorage, useEffect, and useState hooks, as well as setTimeout and nanoid. Then, you will build a “Quiz” application while learning to use the confetti package and ternary operator. Next, you’ll cover fetch API and build the “Pretty Sunny” project. Next, you’ll create the “Asia Explorer” memory game, creating catchy effects by dynamically adding class names. Then, you will implement a “Personal Portfolio” application. Finally, you will create a “GitHub Readme” profile to help you showcase your projects on GitHub.

Ultimately, you’ll be able to highlight your achievements on your resume, thus boosting your chances of landing a job.

Creating Five Impactful Applications with ReactJS

We’ll now pass the values into the `onSubmitHandler`, `city`, and `onInputHandler` props that we used in the `InputCity` component in the previous lesson.

# Add the `city` prop
The `city` prop stores the `city` value given by the user. We’ll do this by using the `useState` hook. The snippet below demonstrates how to add the city prop.

```
const [inputCity, setInputCity] = useState("Seattle");

<InputCity
   city={inputCity}
/>
```
We chose Seattle as the initial state because we’ll show the weather information for “Seattle” on the app’s initial rendering. The search bar should also show “Seattle” as the input value.

# Add the `onInputHandler` prop
The `onInputHandler()` function calls the `inputHandler()` function, which changes the value of the city. It does so using the `setInputCity` function as it’s shown above to update the state of the `inputCity`. Here’s how we do it:

```
//  Input element handler
const inputHandler = (e) => {
  setInputCity(e.target.value);
};

<InputCity
  city={inputCity}
  onInputHandler={inputHandler}
/>
```
# Add the `onSubmitHandler` prop
The `onSubmitHandler` function calls the `onSubmit` function, which updates our new state. We send this state in our API to call with the appropriate city name. We add another `useState` hook with `cityName` as the current state and `setCityName` as the state update function. The following snippet shows how to add the `submitHandler` function:

```
const [cityName, setCityName] = useState("Seattle");

//  Search button
const submitHandler = (e) => {
  e.preventDefault();
  setCityName(inputCity);
};

<InputCity
  city={inputCity}
  onInputHandler={inputHandler}
  onSubmitHandler={submitHandler}
/>
```
Here, `e.preventDefault()` prevents the page from refreshing upon value submission. We give `Seattle` as the initial state because our API takes `Seattle` as the default city to render the weather information.

Combining the code snippets above produces the following code widget:







Learn how to call an API using a dynamic value.

Course Overview

My Todo List

React Fundamental Assessment

JavaScript Quiz

React Beginner Assessment

Pretty Sunny

React Intermediate Assessment

Asia Explorer

Advance Level React Assessment

Personal Portfolio

React Final Assessment

GitHub Readme Profile

Conclusion

Use InputCity Component