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 design the UI layout for the card components here, which hide the country flags, and we’ll have to guess which two images are identical. However, we won’t be able to see card layouts in this lesson, because we’ll have to pass the actual data to know the layout. Nonetheless, the graphic below depicts how the final layout will look.

We use a map image here, which hides all of our images. When we click this card, it flips, and the national flag of some country will be displayed to us. We then have to guess the identical image from the other images.

# Destructure the Props
When imported into the `App.js` file, we get the different data as props in the `Card` component. Let’s discuss those props here:

- The `card` prop is an array of the objects that contains the `src`, `matched`, and `id` as the property.
- Because we have two chances to select identical images in each round, the `handleChoice` method informs the React application of the card we choose, whether it’s the first or second card, and sets the state accordingly.
- The `flipped` prop allows us to add `className= flipped` to the card, prompting a flipped animation to show when the user clicks it.
- If the selected cards are identical, the `disabled` prop is labeled as true and retains the state, rather than flipping it back over.

All these props are used in the functions created in the `App.js` file like `shuffleCard`, `handleChoice`, and `reset`. Using the JavaScript object destructure method, we extract all props from the props as shown in the following snippet:



```
const Card = (props) => {
 const { card, handleChoice, flipped, disabled } = props;
 
 return (
   ...
 )
}
``` 

# Create the UI layout
We pass all the props above into the card’s layout.

```
return (
  <div className="card" key={card.id}>
    <div className={flipped ? "flipped" : ""}>
      <img src={card.src} alt="card front" className="front" />
      <img
        onClick={handleClick}
        src="https://images.freeimages.com/images/large-previews/d60/world-map-1056381.jpg"
        alt="card back"
        className="back"
      />
    </div>
  </div>
);
```

Here, the `CoverImg` is the image that hides all our images.
# Define the `handleClick` function
The `handleClick` function is called whenever we click the image card. If the clicked card isn’t `disabled`, then the `handleClick` function calls the `handleChoice` function and passes the clicked card as the argument. The following snippet defines the `handleClick` function:

```
const handleClick = () => {
  if (!disabled) {
    handleChoice(card);
  }
};
```
Combining all the code snippets above produces the following:

 

Learn to create the UI layout for the image 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

The Card Component