Pinterestクローン

を使用してPinterestのクローンを作成する

閲覧私たちのティーチングコース。

我々は、ステップで我々のモックアップを構築します。

単一のPinterestピンのモックアップを作成します.

Pinterestのモンクアップを作成します.

上記のマージ単一のPinterestピンを生成する“追加ピン画面”を使用します.

我々のPinterestレイアウトにステップ3で我々の合併の論理を移してください.

「Pinterestピン」モックアップ

各ピンは3つのセクションで構成されています。

ピンタイトル-ユーザーはこれを参照してくださいあなたは、データベース

でピンを保存する方法として、これをバックエンドで使うことができます

ピンモーダル-これは、各カードのオーバーレイですこれは、このチュートリアル、ちょうど化粧品

のために機能しません

ピンイメージ-ユーザーがアップロードする実際のイメージ

各々のピンは「ヘッダー」と「フッター」を持ちます。

<div class="card">
    <div class="pin_title"></div>
    <div class="pin_modal">
        <div class="modal_head">
        </div>

        <div class="modal_foot">
        </div>
    </div>

    <div class="pin_image">
        <img src="" alt="pin_image">
    </div>
</div>

モードピンを追加

モードは9のセクションで構成されています。

モーダルオーバーレイ-透明黒背景

ピンコンテナを追加する-画面

のメインインターフェイス

左側-インターフェイス

の左半分

右側-インターフェイス

の右半分

左側のヘッダー-オプション

につながる簡単なボタン

左側ボディ-ユーザーのイメージは、ここに

を示します

左のフッター-ウェブ

からイメージをアップロードするオプション

右側ヘッダー-ピンサイズ(小さい、med、大きい)

を選んでください

右側ボディ-ピンに関する情報は、ここに入力されます

<div class="add_pin_modal">
    <div class="add_pin_container">
        <div class="side" id="left_side">
            <div class="section1">
            </div>

            <div class="section2">
            </div>

            <div class="section3">
            </div>
        </div>

        <div class="side" id="right_side">
            <div class="section1">
            </div>

            <div class="section2">
            </div>
        </div>
    </div>
</div>

マージ私たちのピンと“ピン画面を追加”。

保存をクリックすると、ピンを作成します。

document.querySelector('#save_pin').addEventListener('click', () => {
    const new_pin_data = {
        author: 'Jack',
        board: 'default',
        title: document.querySelector('#pin_title').value,
        description: document.querySelector('#pin_description').value,
        destination: document.querySelector('#pin_destination').value,
        img_blob: pin_image_blob,
        pin_size: document.querySelector('#pin_size').value
    }

    create_pin(new_pin_data);
});

最終的なPinterestボード

私たちは別のチュートリアルからPinterestのレイアウトを取るでしょう。

以前のチュートリアルでは、CSSグリッドを使用してPinterestレイアウトを作成しました.
そのコードをインポートして、このプロジェクトのための私たちのピンインコンテナとしてそのレイアウトを使用します.
チュートリアルhereを見つけることができます.
このマージはとても簡単です.ここに新しいHTMLはありません.
大きな変更は、CSSとJavaScriptにあります.
CSSでは、3つの新しいクラス定義を作成します小さく、媒体、および大きなピンオプション.

.card_large {
    grid-row-end: span var(--card_large);
}

.card_medium {
    grid-row-end: span var(--card_medium);
}

.card_small {
    grid-row-end: span var(--card_small);
}

その後、ユーザーが選択するピンのサイズに基づいて、我々はピンにコンテナを添付する前に、そのクラスを追加します.

new_pin.classList.add(`card_${pin_details.pin_size}`);

このプロジェクトにはもっとニュアンスがある。

あなたは、ソースファイルhereを取得することができますし、下のビデオチュートリアルに従うことができます.

あなたがより詳細なガイドを望むならば、YouTubeの上で私の完全なビデオチュートリアルをチェックしてください、...

を使用してPinterestのクローンを作成する