世界你好？我又回到正軌了#100daysofMiva 編碼挑戰第 9 天，我在 Nodejs 中開發了一個簡單的調色板產生器。讓我們一起來看看吧...✨
看看
https://colorpal.onrender.com
這是一個 調色盤產生器，使用 Node.js 使用 Express.js 和 chroma-js 建構。它每次都會產生一個漂亮的 5 色調色板，具有隨機生成的基色的不同色調。非常適合尋求快速色彩靈感的 UI/UX 設計師！ ？
git clone https://github.com/Marvellye/colorpal cd colorpal
npm install
node app.js
在瀏覽器中存取應用程式：
http://localhost:3000
您將看到一個介面，您可以在其中產生新的 5 色調色板。按產生按鈕以取得新的調色盤。
要檢索特定調色板，請前往：
http://localhost:3000/palette/:id
將 :id 替換為您要查看的調色板的 ID，例如：
http://localhost:3000/palette/C08552-F3E9DC-5E3023-DAB49D
這是應用程式產生的調色板類型的範例：
Base Color: #C08552 Palette: #F3E9DC (Light) #5E3023 (Dark) #DAB49D (Neutral)
此調色板產生器動態產生五種顏色的調色板並將其顯示在 UI 中。使用者可以透過點擊產生按鈕與調色板進行交互，調色板ID用於保存和共享特定的顏色組合。以下是佈局的工作原理。
<!-- 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>
頁腳包含一個產生按鈕，用於觸發顏色產生和一個用於社群媒體分享的分享按鈕。
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 等社群媒體平台分享當前調色盤。
// 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.
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.
Check it out
https://colorpal.onrender.com
My GitHub repo
https://github.com/Marvellye/colorpal
以上是調色板產生器的詳細內容。更多資訊請關注PHP中文網其他相關文章！
