世界你好？我又回到正軌了#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.安裝依賴項
3. 運行應用程式
4. 開啟應用程式
在瀏覽器中存取應用程式：
http://localhost:3000
登入後複製
您將看到一個介面，您可以在其中產生新的 5 色調色板。按產生按鈕以取得新的調色盤。
5. 透過 ID 檢索調色板
要檢索特定調色板，請前往：
http://localhost:3000/palette/:id
登入後複製
將 :id 替換為您要查看的調色板的 ID，例如：
http://localhost:3000/palette/C08552-F3E9DC-5E3023-DAB49D
登入後複製
？它是如何運作的
-
產生調色盤：每次點選產生按鈕時，都會隨機產生一個基底色。以此為基礎，創建了 5 種不同的顏色變體（不同的色調）。
-
唯一ID：每個產生的調色板都有一個由顏色的十六進位值組成的唯一ID，可用於稍後擷取調色板。
-
使用 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>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="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 路徑取得新的調色板，更新顏色框，並使用新的調色板 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=${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中文網其他相關文章！
