The project is a simple todo list application built using React. It allows users to create a list of tasks, mark them as complete or incomplete, and delete them from the list. The application also stores the todos in local storage, so they persist across browser sessions.
The main features of this todo project include:
- Add new todos to the list
- Mark todos as completed or incomplete
- Delete todos from the list
- Persist todos in local storage
- Responsive design for mobile and desktop screens
The App.js
file is a React component that renders a simple todo list application. Let's go through the code step-by-step to understand what's going on:
import './App.css';
import { useEffect, useState } from 'react';
import { NewTodoForm } from './NewTodoForm';
import { TodoList } from './TodoList';
This imports the necessary dependencies for the application to work. useEffect
and useState
are React hooks that allow us to manage the component state and its lifecycle. NewTodoForm
and TodoList
are custom components defined elsewhere in the application.
function App() {
const [todos, setTodos] = useState(() => {
const localValue = localStorage.getItem('ITEMS');
if (localValue === null) {
return []
} else {
return JSON.parse(localValue);
}
});
Here, we define the state of the component using useState
. todos
is an array of todo items that are stored in the component's state. setTodos
is a function that allows us to update the state of the component.
We set the initial state of todos
by checking if there are any todo items stored in local storage. If there are, we parse the JSON and return the array. If there aren't any, we return an empty array.
useEffect(() => {
localStorage.setItem('ITEMS', JSON.stringify(todos))
}, [todos])
This is a useEffect
hook that runs whenever the todos
state changes. It updates local storage with the current state of todos
.
function addTodo(title) {
setTodos(currentTodos => {
return [
...currentTodos,
{
id: crypto.randomUUID(),
title,
completed: false
},
]
})
}
This is a function that adds a new todo item to the todos
state. It generates a unique id
for the new item using the crypto.randomUUID()
method, and sets the completed
status to false
. It then adds the new todo item to the existing list of todos using the spread operator.
function toggleTodo(id, completed) {
setTodos(currentTodos => {
return currentTodos.map(todo => {
if (todo.id === id) {
return { ...todo, completed }
}
return todo;
})
})
}
This function toggles the completed
status of a todo item in the todos
state. It uses the map
method to iterate over each todo item and returns a new array with the updated todo item. If the id
of the current todo item matches the id
passed as an argument, its completed
status is set to the value passed as an argument.
function deleteTodo(id) {
setTodos(currentTodos => {
return currentTodos.filter(todo => todo.id !== id)
})
}
This function removes a todo item from the todos
state. It uses the filter
method to return a new array that includes all the todo items except for the one with the id
passed as an argument.
- The first file you have is
App.js
. It is the main component that is being exported as the default export of the module. This component renders theHeader
andMeme
components inside adiv
tag. - The
Meme
component is defined in the second file, which importsReact
,useState
anduseEffect
from thereact
module. This component sets up twouseState
hooks. One formeme
, which is an object withtopText
,bottomText
, andrandomImage
properties. The second hook is forallMemes
, which is initialized to an empty array. - There is an
useEffect
hook that is used to fetch data from the Imgflip API. It is called when the component mounts for the first time because the dependency array[]
is empty. The API returns an array of meme objects which is stored in theallMemes
state variable usingsetAllMemes
. getMemeImage
is a function that is called when the user clicks on the "Get a new meme image 🖼" button. This function usesMath.random()
to generate a random index and selects a random meme from theallMemes
array. The URL of the meme image is then stored in therandomImage
property of thememe
state variable usingsetMeme
.- The
handleChange
function is called when the user types in theinput
fields for thetopText
andbottomText
. It sets thetopText
andbottomText
properties of thememe
object in state by using theevent.target
object. - Finally, the
Meme
component returns amain
tag with two childdiv
tags. The firstdiv
is a form that contains twoinput
fields fortopText
andbottomText
along with a button to generate a new meme image. The seconddiv
is an area to display the meme image along with its top and bottom text. - The
Header
component is defined in a separate file and exports a simple header section with an image, the title "Meme Generator", and the project name "React Course - Project 3".
In summary, this app uses React to fetch data from an external API, allow the user to modify some text fields, and generate a new meme image with the modified text. It displays the result on the same page using the Meme
component, and the Header
component provides a header section to the page.
To install and run this project, follow these steps:
- Clone the repository:
git clone https://github.com/mmartins23/meme-generator.git
- Change into the project directory:
cd example
- Install dependencies:
npm install
- Run the app:
npm start
To use the application, follow these steps:
- Run npm start to start the development server
- Open your web browser and navigate to http://localhost:3000
- Use the form to add new todos to the list
- Click on a todo to mark it as complete or incomplete
- Click the "Delete" button to remove a todo from the list.
This project is licensed under the terms of the MIT license. See LICENSE for more information.
You can reach me on Twitter
Feel free to send me a message if you have any questions or feedback about this project. I'll do my best to respond as soon as possible.