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

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

?仕組み

1. パレットの生成: 生成 ボタンをクリックするたびに、基本色がランダムに生成されます。このベースから、5 つの異なるカラー バリエーション (異なる色合い) が作成されます。
2. 一意の ID: 生成された各パレットには、色の 16 進値から作られた一意の ID があり、後でパレットを取得するために使用できます。
3. 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:

1. 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.

2. 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.

3. 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.

4. 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.

5. 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.

6. 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 サイトの他の関連記事を参照してください。