カラーパレットジェネレーター-jsチュートリアル-php.cn

Colour palette Generator

Hello world ??軌道に戻りました。 #100daysofMiva コーディングチャレンジ 9 日目、私は Nodejs のシンプルなカラーパレットジェネレーターに取り組みました。歩いてみましょう...✨

?カラーパレットジェネレーター

チェックしてください
https://colorpal.onrender.com

これは、Express.js と chroma-js を使用して Node.js で構築された カラーパレットジェネレーター です。ランダムに生成された基本色のさまざまな色合いを含む、美しい 5 色のパレットが毎回生成されます。素早い色のインスピレーションを求めている UI/UX デザイナーに最適です。 ?

?特徴

単一の基本色のバリエーションとして 5 つの一致する色を生成します?
各パレットには一意の ID が割り当てられ、ユーザーは /palette/:id ルート経由で ID を取得できます。
サーバー側ロジック用の Express.js と色操作用の chroma-js で構築されています。
新しいパレットを動的に生成するための更新ボタンを備えた、生成されたパレットを表示するためのシンプルでエレガントな UI。

バックエンド?

⁉️使用されるテクノロジー

Node.js および Express.js: ルーティングを処理するバックエンドフレームワーク。
Chroma.js: 強力なカラー操作とパレット生成用。
HTML/CSS/ブートストラップ: クリーンで応答性の高い UI 用。

?はじめる

1. リポジトリのクローンを作成する

git clone https://github.com/Marvellye/colorpal
cd colorpal

ログイン後にコピー

2. 依存関係をインストールする

npm install

ログイン後にコピー

3. アプリケーションを実行する

node app.js

ログイン後にコピー

4. アプリケーションを開きます

ブラウザでアプリにアクセスします:

http://localhost:3000

ログイン後にコピー

新しい 5 色のパレットを生成できるインターフェイスが表示されます。生成ボタンを押して、新しいカラーパレットを取得します。

5. ID によるパレットの取得

特定のパレットを取得するには、次の場所に移動します。

http://localhost:3000/palette/:id

ログイン後にコピー

:id を、表示するパレットの ID に置き換えます。例:

http://localhost:3000/palette/C08552-F3E9DC-5E3023-DAB49D

ログイン後にコピー

?仕組み

パレットの生成: 生成ボタンをクリックするたびに、基本色がランダムに生成されます。このベースから、5 つの異なるカラーバリエーション (異なる色合い) が作成されます。
一意の ID: 生成された各パレットには、色の 16 進値から作られた一意の ID があり、後でパレットを取得するために使用できます。
Chroma.js の使用: chroma-js の機能により、生成された色は視覚的に魅力的であり、さまざまな明るさレベルが提供されます。

⁉️ パレットの例

アプリが生成するパレットの種類の例を次に示します:

Base Color: #C08552
Palette: 
#F3E9DC (Light)
#5E3023 (Dark)
#DAB49D (Neutral)

ログイン後にコピー

フロントエンド?✨

?カラーパレット表示

このカラーパレットジェネレーターは、5 色のパレットを動的に生成し、UI に表示します。ユーザーは、生成ボタンをクリックしてパレットを操作できます。パレット ID は、特定の色の組み合わせを保存および共有するために使用されます。レイアウトの仕組みは次のとおりです。

? HTML レイアウト

ヘッダ

<!-- Header -->
<header class="p-3 text-center">
   <h1>Colour Palette Generator</h1>
</header>

ログイン後にコピー

ヘッダーは、アプリケーションのクリーンでシンプルなタイトルを提供します。

カラーボックス

<!-- Colour Boxes -->
<section class="color-container">
   <div id="box1" class="color-box" style="background-color: #000000;">
      <span>#000000</span>
   </div>
   <div id="box2" class="color-box" style="background-color: #000000;">
      <span>#000000</span>
   </div>
   <div id="box3" class="color-box" style="background-color: #000000;">
      <span>#000000</span>
   </div>
   <div id="box4" class="color-box" style="background-color: #000000;">
      <span class="text-white">Hey!</span>
   </div>
   <div id="box5" class="color-box" style="background-color: #000000;">
      <span class="text-white"></span>
   </div>
</section>

ログイン後にコピー

このセクションにはカラーボックスが含まれています。各ボックスは、生成されたカラーパレットに基づいて背景色を動的に変更する div です。各 div 内のスパンには、色の 16 進値が表示されます。

ローダ

<!-- Loader -->
<section id="loader" class="loader">
   <div class="is-loading">
      <h3 id="load-text">Generating...</h3>
   </div>
</section>

ログイン後にコピー

このセクションには、新しいカラーパレットが生成されるときに表示されるローダーが含まれています。カラーが読み込まれるとローダーが消えます。

フッター

<!-- Footer -->
<footer class="d-flex justify-content-between align-items-center">
   <button onclick="gen()" class="btn btn-light">Generate</button>
   <button class="btn text-white" onclick="share(window.location.href)">
      <i class="fa-regular fa-share-from-square"></i>
   </button>
   <span class="">100daysofMiva-Marvelly</span>
</footer>

ログイン後にコピー

フッターには、色の生成をトリガーする生成ボタンと、ソーシャルメディア共有用の共有ボタンが含まれています。

? JavaScript の機能

動的な色の生成

const boxes = [
    document.getElementById('box1'),
    document.getElementById('box2'),
    document.getElementById('box3'),
    document.getElementById('box4'),
    document.getElementById('box5')
];

function updateBoxes(colors) {
    colors.forEach((color, index) => {
        boxes[index].style.backgroundColor = color;
        boxes[index].querySelector('span').textContent = color;
    });
}

ログイン後にコピー

この JavaScript コードは、新しいパレットが生成されると、カラーボックス内の色を動的に更新します。色は UI の各 div 要素に適用されます。

パレット生成ロジック

async function gen() {
    // Show the loader
    loader.style.display = 'block';

    try {
        const response = await fetch('/palette');
        const data = await response.json();

        // Update the boxes with the new colors
        updateBoxes(data.palette);

        // Update the URL with the new ID
        history.pushState({}, '', `/${data.id}`);

        loader.style.display = 'none';
    } catch (error) {
        console.error('Error fetching palette:', error);
        loader.style.display = 'none';
    }
}

ログイン後にコピー

gen() 関数は、/palette API ルートから新しいカラーパレットを取得し、カラーボックスを更新し、ブラウザの URL を新しいパレット ID で変更します。

共有機能

function share(url) {
    Swal.fire({
        heightAuto: false,
        title: 'Share this Color Palette!',
        html: `
            <div style="display: flex; justify-content: space-around; font-size: 24px;">
                <a href="https://api.whatsapp.com/send?text=${encodeURIComponent(url)}" target="_blank" title="Share on WhatsApp">
                    <i class="fab fa-whatsapp" style="color: #25D366;"></i>
                </a>
                <a href="https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}" target="_blank" title="Share on Facebook">
                    <i class="fab fa-facebook" style="color: #3b5998;"></i>
                </a>
                <a href="https://twitter.com/intent/tweet?url=${encodeURIComponent(url)}" target="_blank" title="Share on Twitter">
                    <i class="fab fa-twitter" style="color: #1DA1F2;"></i>
                </a>
                <a href="https://www.instagram.com/?url=${encodeURIComponent(url)}" target="_blank" title="Share on Instagram">
                    <i class="fab fa-instagram" style="color: #E1306C;"></i>
                </a>
            </div>
        `,
        showConfirmButton: false,
        showCloseButton: false,
    });
}

ログイン後にコピー

share() 関数を使用すると、ユーザーは SweetAlert ポップアップを使用して、WhatsApp、Facebook、Twitter、Instagram、Telegram などのソーシャルメディアプラットフォーム経由で現在のカラーパレットを共有できます。

URL-Based Color Loading

// Check if an id is present in the URL
const currentPath = window.location.pathname;
const paletteId = currentPath.substring(1);

if (paletteId) {
    loadPaletteById(paletteId);
} else {
    gen();
}

ログイン後にコピー

This functionality checks if there is a color palette ID in the URL when the page is loaded. If an ID is present, the corresponding palette is loaded. Otherwise, a new palette is generated.

? Issues Encountered

Building this app wasn't without its challenges! Here are some of the problems I encountered and how I solved them:

Dull Color Palettes: Initially, I was getting dull and boring colors. The issue was due to the way I was generating shades from the base color. I switched to using hsl.l (lightness) adjustments for better visual results.
Color Palette Variants: At first, I used random colors that were too different from each other. After realizing that everyone needed variants of the same base color for consistency, I adjusted my approach to generate color scales with different lightness levels.
Invalid Palette IDs: When trying to retrieve a palette by ID, some IDs were invalid or incorrectly formatted. I fixed this by ensuring a strict format for the IDs and adding error handling for invalid IDs.
Hex Values Misplacement: At one point, the hex values were not displaying properly inside the color boxes. This was fixed by ensuring the span elements were correctly updated with the hex values.
Palette Sharing: Creating a robust sharing mechanism for various social media platforms was a bit challenging but ultimately solved using SweetAlert for the UI and share links for each platform.
Dynamic Palette Update: Implementing a smooth update of the UI when a new palette was generated was tricky. By using simple JavaScript and handling the loader display correctly, I ensured a seamless experience for users when generating new palettes.

✨ Future Improvements

Add support for saving favorite palettes in a database.
Enhance the UI with animations for palette generation.
Allow users to download the color palette in various formats like JSON, CSS, or an image.

Check it out
https://colorpal.onrender.com

My GitHub repo
https://github.com/Marvellye/colorpal

以上がカラーパレットジェネレーターの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。