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

# Import hooks and components

We’ll import `Card.js` and pass the data to the `Card` component in the `App.js` file so that we can view the real layout of the cards. Before doing that, however, let’s first import hooks like `useState` and `useEffect`. Then we’ll create some states to select the cards, as well as the `disabled` state.

In the following snippet, `choiceOnce` and `choiceTwo` hold the state of the card that’s being flipped by us in the turn, and `setChoiceOne` and `setChoiceTwo` are the functions that update the state. The `disabled` variable holds the state of the flipped card. If it’s `true`, the card doesn’t flip back, and if it’s `false`, the card does flip back.

```
import { useEffect, useState } from "react";
import Card from "./Card/Card";

// It will handle the state of the selection of the first card 
const [choiceOne, setChoiceOne] = useState(null);

// It will handle the state of the selection of the second card 
const [choiceTwo, setChoiceTwo] = useState(null)

// It will handle if the card is disabled 
const [disabled, setDisabled] = useState(false);
```

# Define the `handleChoice` function
If `disabled` isn’t `true`, the handleChoice function in the `Card.js` file is called, with the selected card as the argument. If our `choiceOne` state isn’t `null`, the selected card passes to `setChoiceTwo`. Otherwise, it passes to `setChoiceOne`. Let’s define the `handleChoice` function in the following snippet:
```
const handleChoice = (card) => {
   choiceOne ? setChoiceTwo(card) : setChoiceOne(card);
};
```
# Define the `reset` function
After we’ve made a guess, correct or otherwise, we have to reset all state values and increase the value of `turns` by one. The following snippet shows how we define the `reset` function:

```
function reset() {
  setChoiceOne(null);
  setChoiceTwo(null);
  setDisabled(false);
  setTurns((prevTurns) => prevTurns + 1);
}
```
# Check the selected cards
On each render, we use the `useEffect` hook to check whether card one and card two are the same. We leave them flipped if they’re the same. Otherwise, we flip them back. We use the `src` property to see if the selected cards have the same image. If they’re the same, we modify the `matched` property to `true`, allowing us to use our `flipped` class on these cards.

In addition, if the `src` property is the same for both cards, we map over all previous cards and set the `matched` property of the same selected card to `true`. If the selected cards don’t have the same `src` property, we call the `reset` function after 500 milliseconds, which flips the cards back and resets the state values to the initial values. Here, we pass the `choiceOne` and `choiceTwo` as the dependencies so that `useEffect` calls the function whenever the dependencies change.

The following snippet provides an overview of this:





Learn to use the map method and create different functions for the Card.

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

Import the Card Component

Import hooks and components