調色板產生器

世界你好？我又回到正軌了#100daysofMiva 編碼挑戰第 9 天，我在 Nodejs 中開發了一個簡單的調色板產生器。讓我們一起來看看吧...✨

？調色板產生器

看看
https://colorpal.onrender.com

這是一個 調色盤產生器，使用 Node.js 使用 Express.js 和 chroma-js 建構。它每次都會產生一個漂亮的 5 色調色板，具有隨機生成的基色的不同色調。非常適合尋求快速色彩靈感的 UI/UX 設計師！ ？

？特徵

• 產生 5 種匹配顏色作為單一基色的變體？ .
• 每個調色板都分配有一個唯一的 ID，允許使用者透過 /palette/:id 路由檢索它。
• 使用 Express.js 建立用於伺服器端邏輯，使用 chroma-js 進行顏色操作。
• 簡單優雅的 UI，用於顯示生成的調色板，並透過刷新按鈕動態生成新調色板。

後端？

?️ 使用的技術

• Node.js 和 Express.js：處理路由的後端框架。
• Chroma.js：用於強大的顏色操作和調色板生成。
• HTML/CSS/Bootstrap：乾淨、響應式的 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：每個產生的調色板都有一個由顏色的十六進位值組成的唯一ID，可用於稍後擷取調色板。
3. 使用 Chroma.js：chroma-js 的強大功能可確保產生的顏色在視覺上具有吸引力，並提供各種亮度等級。

?️ 調色板範例

這是應用程式產生的調色板類型的範例：

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

前端？ ✨

？調色板顯示

此調色板產生器動態產生五種顏色的調色板並將其顯示在 UI 中。使用者可以透過點擊產生按鈕與調色板進行交互，調色板ID用於保存和共享特定的顏色組合。以下是佈局的工作原理。

？ HTML佈局

標頭

<!-- Header -->
<header class="p-3 text-center">
   <h1 id="Colour-Palette-Generator">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 內的跨度顯示顏色的十六進位值。

裝載機

<!-- Loader -->
<section id="loader" class="loader">
   <div class="is-loading">
      <h3 id="Generating">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 路徑取得新的調色板，更新顏色框，並使用新的調色板 ID 修改瀏覽器 URL。

分享功能

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=%24%7BencodeURIComponent(url)%7D" 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=%24%7BencodeURIComponent(url)%7D" target="_blank" title="Share on Facebook">
                    <i class="fab fa-facebook" style="color: #3b5998;"></i>
                </a>
                <a href="https://twitter.com/intent/tweet?url=%24%7BencodeURIComponent(url)%7D" target="_blank" title="Share on Twitter">
                    <i class="fab fa-twitter" style="color: #1DA1F2;"></i>
                </a>
                <a href="https://www.instagram.com/?url=%24%7BencodeURIComponent(url)%7D" 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中文網其他相關文章！