2020 Dev-Martching:Webフロントエンド開発者(上半期)
既存のコードを変更し、他の実装を行います.
要求
要求された順序は次のとおりです.ただし、開発中にユーザーテストが含まれているため、開発者のスタイルに応じて要求が変更されました.

🐇 HTML、CSSの概略寸法の適用

コードはすべてdivで構成されています.感性的な方法で寸法を変更してください.

🥕 応答式CSSサポート

ユーザーが使用するデバイスの長さに応じて、各行の列数を適切に変更します.
992 px以下3個768 px以下2個576 px以下1個

@media (max-width : 992px) { 
  .SearchResult {
    grid-template-columns: repeat(3, minmax(250px, 1fr));
  }
}
@media (max-width : 768px) { 
  .SearchResult {
    grid-template-columns: repeat(2, minmax(250px, 1fr));
  }
}
@media (max-width : 576px) { 
  .SearchResult {
    grid-template-columns: repeat(1, minmax(250px, 1fr));
  }
}

🥕 ダークモードのサポート

既存CSSのすべてのコメントを削除し、すべての文字は#FFFFFに限定され、背景は#00000に限定されます.

オペレーティングシステムが有効になっているかどうかの暗いモードに基づいています.

ユーザーがトピックを切り替えやすいように、左上隅に切り替え機能のチェックボックスを作成します.

🐇 画像詳細ビューモード

最大-寸法が768 px未満の場合、モードの横方向の長さは、デバイスの横方向の長さ

に増加する.

画像をクリックすると、生成したモードから次の終了(クローズ)イベントが追加されます.

キーボードのescを押すと:

モード領域の外をクリックする場合は、

をクリックします.

右上隅をクリックして閉じる場合は、

をクリックします.

/猫/:idで猫の性格、胎生情報をレンダリングします.関連情報がロードされます.

モードのオン/オフイベントに対して、フェードイン/フェードアウト

を適用する.

🐇 検索ページ

ページに入ると、検索ウィンドウ(input)で

にフォーカスする.

キーワードを入力し、「input」をクリックして既存のキーワード

を削除します.

データ要求時にLoading UI

を追加する必要がある

の検索結果がない場合、

はユーザが閲覧できるようにUI処理を行う必要がある

が生成され、最近の5つの検索キーワードがSearchInputの下に表示される.このキーワードを選択すると検索要求

が発生する.

ページをリフレッシュすると、最後の検索結果画面

が保持される.

SearchInputの横にフリーボタンを追加し、/api/cats/random 50を呼び出してスクリーンをレンダリングします.

Lazy Loadを理解し、

を処理して画像表示時にロードする

検索の結果、各アイテムに猫の名前が表示されました.

🐇 スクロール・ページングの実装

ユーザがスクロールバーの末端を移動するときに次のページ

にログインするようにする.

🐇 ランダム猫バナー部分

現在の検索結果リストに、ランダムな猫の部分を追加します.

アプリケーションを起動すると、api/cats/random 50 apiリクエスト後に受信した結果が個別の部分に露出します.

は色兼用の結果が多いが、画面に5つの画像のみが表示され、各画像に左、右スライドなどのボタン

がある.

の左、右ボタンをクリックすると、現在露出している画像が消え、前または次の画像が表示されます.トランザクションは

を選択

🐇 その他の要件

EventDelegationを使用して

SearchResultで各アイテムのイベントを変更するには

各要素の内部関数とUtil関数

を細分化する.

🐇 API

fetchはasync awaitで行い、エラーが発生した場合は適切に処理する
statusコードに基づいて、ミラーメッセージを別々に記述します.

const request = async (url: string) => {
  try {
    const result = await fetch(url);
    return result.json();
  } catch (e) {
    console.warn(e);
  }
}

const api = {
  fetchGif: keyword => {
    return request(`${API_ENDPOINT}/api/gif/search?q=${keyword}`);
  },
  fetchGifAll: () => {
    return request(`${API_ENDPOINT}/api/gif/all`);
  } 
};

🥕 ランダムに50匹の猫を要求

GET :/cats/random50

HTTP/1.1 200 OK
{
  "data": [{
    id: string
    url: string
    name: string
  }]
}

🥕 ユーザーに検索を要求

Get :/cats/search | query ⇒ q=””

HTTP/1.1 200 OK
{
  "data": [{
    id: string
    url: string
    name: string
  }]
}

🥕 画像の詳細を表示するときに猫にデータを要求

Get :/cats/:id

HTTP/1.1 200 OK
{
  "data": {
    name: string
    id: string
    url: string
    width: number
    height: number
    temperament: string
    origin: string
  }
}