shangguanwang / tasky

React and TypeScript todo list app

Hi there 👋

🌱 Weclome to my Github page, I'm Shangguan

👀 I'm a self-taught Frontend Developer with a passion for building meaningful products, proficient in React and JavaScript.

Projects:

• BerryCart Shopping List 🍓
• NFT Marketplace 🖼️
• Little Joy 🌸
• TypeScript todo list 📝

💪 I'm currently working as a frontend engineer at a startup, continuing #100DaysofCode challenges, and contributing to open-source projects.

Tech Stack:

Connect With Me:

📫 Reach me at my [email protected]

📊 GitHub Stats:

tasky's Issues

Functionality: Add Todo Item and Save

In App.tsx, create two useStates:

• one called "todo" which contains individual todo item, type should be string.
• One called "todos" which is an array containing all the todo items. The array should contain 3 items: id, todo string, and a isDone boolean value.

Create a new function "handleAdd" which add the new todo item to the list, and clear the input field by set setTodo to "".

In InputField.tsx, create an interface for the 3 props we want to pass: todo, setTodo, handleAdd.

• Pass the "todo" as value of input, and pass "setTodo" as onChange function of input field. This will capture the user input and reflect it in the input box.
• set onSubmit to the handleAdd function

Write Readme

Add Heading and Input Field

Input field should contain a placeholder text with a round button

Functionality: Drag and Drop

install react-beautiful-dnd
Wrap the entire App inside tag
Wrap TodoList inside tag
Make SingleTodo

Define onDragEnd function

Deploy to Netlify

Component: SingleTodo card

Pass in props
Import 3 icons from react-icons
Add CSS Styles

Component: TodoList

Create a TodoList component that displays all the Todos

Functionality: SingleTodo Buttons

isDone: strikethrough when isDone button is clicked.
Delete: delete the item from todo lists.
Edit: Todo will turn to a input box. A user can edit the input field, and when a user presses enter, the new input will be reflected