iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
SideProject30

30天製作與眾不同的TodoList吧! 系列

透過擴展TodoList, 來了解學習更多技能。

參賽天數 14 天 | 共 30 篇文章 | 2 人訂閱 訂閱系列文 RSS系列文
DAY 1

Day1:參賽動機 & 規劃。

前言 起因是在社群看到有人討論到使用TodoList作為SideProject的可行性,起初自己對於使用TodoList作為project的可行性也是保持著保留...

2023-09-16 ‧ 由 LH 分享
DAY 2

確定目標 & 建立環境

前面我們有提到這次要製作一個TodoList,首先我們先從這份project的功能來說。一份完整的TodoList應該包含基本的CRUD C:應該要可以建立一筆...

2023-09-17 ‧ 由 LH 分享
DAY 3

建立一個Todo畫面

一般聽到 Todo List,我們都會很直覺的認為他應該要有一個輸入框後方會有一個按鈕讓我們新增在輸出框打的文字,下方會有一個區塊顯示代辦清單、已完成清單。 既...

2023-09-18 ‧ 由 LH 分享
DAY 4

來對我們的畫面進行一些修正吧-1

這個是我們現在的畫面,首先我們先看一下有那些問題。 有未完成事項卻沒有完成事項。 輸入區塊好像有點太小了。 少了一個完成的按鈕。 我們先來處理第一項,現在我...

2023-09-19 ‧ 由 LH 分享
DAY 5

來對我們的畫面進行一些修正吧-1.1

前情提要: 我們昨天把頁籤的選中時候會變色的部分製作完成,但是還少了在選中的時候進行畫面切換。首先我們先把分頁作為一個 component 抽出來 const...

2023-09-20 ‧ 由 LH 分享
DAY 6

來對我們的畫面進行一些修正吧-1.2

接著昨天的進度,我們今天應該要為刪除按鈕加上功能,但是我看了一下我們的HomeListPage這個 component 就想到,實務上我們最常遇到的問題是甚麼。...

2023-09-21 ‧ 由 LH 分享
DAY 7

把功能補齊吧

今天我們繼續把畫面修一下,之前有提到少了一個已完成的按鈕。先來看一下我們的HomeListPage,我們之前已經把 icon 的部分以 render props...

2023-09-22 ‧ 由 LH 分享
DAY 8

補齊功能-2

經過昨天的進度,我們可以知道想要將子層的 data 往父層傳遞可以透過 call by function 的方式,在子層使用 function 將 data 作...

2023-09-23 ‧ 由 LH 分享
DAY 9

建立我們自己的api

因為我們要模擬 call API 的方式獲得資料,首先我們介紹一下甚麼是 axios,它是一個 JS 的 Library,專門處理各種操作 API 的功能,接下...

2023-09-24 ‧ 由 LH 分享
DAY 10

新增todo功能

講到功能,我們的了解需求後,基本上第一步都是先釐清整個流程,確認流程沒有問題之後才進行實作。那麼我們先來看一下新增 todo 的流程。user 輸入資料 =&g...

2023-09-25 ‧ 由 LH 分享