# Ryan 第三週React作業

## 基本作業
1. 請跟著直播上課內容完成 React TodoList，並部署到 Vercel
2. 有基本的新增、完成、刪除待辦事項功能，並可篩選已完成、未完成資料

* 基本作業Github程式碼：https://github.com/ryan19910912/TodoList_Basic
* 基本作業Vercel網址：https://todo-list-basic-nine.vercel.app/


## 進階作業
1. 用 Vite 建立 React 專案
2. 串接 Unsplash 搜尋相片 API https://api.unsplash.com/search/photos API，使用者可以輸入 input 關鍵字，並請求 Unsplash 相簿資料，並顯示圖片出來。如下圖
3. 不需要做分頁、懶加載
4. 將網站部署到 Vercel
5. 提交作業請附上 Github 程式碼、網址

* 進階作業Github程式碼：https://github.com/ryan19910912/TodoList_Advanced
* 進階作業Vercel網址：https://todo-list-advanced-bice.vercel.app/


使用unsplash-js套件呼叫取得隨機圖片API

import { createApi } from "unsplash-js";

 //建立unsplash search
  const unsplash = createApi({
    accessKey: "unsplash Access Key"
  });
  
  unsplash.photos
      .getRandom({
        count: 9,    //回傳的照片數量，預設 1 ，最高 30
        query: inputText,  //搜尋字串，用空白隔開
        orientation: tab,  //目標照片方向，可用值: landscape (橫向), portrait (縱向), squarish (方形)
      })
      .then(unsplash.toJson)
      .then((json) => {
        console.log(json.response);
        json.response.map(element => {
          let photoUrl = element.urls.small;
          setPhotos(
            photos =>
            [
            ...photos,
            {
              photoUrl: photoUrl,
              id: Math.random() * 999
            }
          ])
        })
      })

###### tags: `Solidity 工程師實戰營第 5 期`