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

# What’s local storage?
The `localStorage` web API allows us to save and retrieve data from the local storage. The data remains in the browser’s storage, even if the browser is closed.

# Store the item
We can store the item in the `localStorage` using the following syntax:


```
localStorage.setItem('key','Value')

Example: 
localStorage.setItem('name', "John Doe")
```
Here, the `key` is like the property name of the object in JavaScript, and `Value` is the property’s value.

# Get the item

The `localStorage` object allows us to get items from the local storage using the given syntax.


```
localStorage.getItem('key')

Example:
localStorage.getItem('name')  // Joh Doe
```
Here, the `key` is the property name for which we’d like to retrieve the data.

# Delete the item
The `localStorage` has two methods to delete items:

- To delete a specific item, for example, the property `name`, the following command can be used. It removes the property `name` from the `localStorage`.

   ```
   localStorage.removeItem('name')
   ```


- To clear all items from the `localStorage`, the following command can be used. It completely clears the `localStorage`.

  ```
  localStorage.clear()
  ```

# How to access the local storage
To access the `localStorage` from Google chrome, we can perform the following steps:

1. Press “F12” or right-click on the screen and select “inspect” from the popup.
2. Click on the “Application” tab.
3. Select “Local Storage” from the “Storage section” on the left side.





Learn how to use localStorage to access local memory.

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

Understand localStorage

What’s local storage?