Penjana palet warna

Hello dunia ?? Saya kembali ke landasan yang betul. Cabaran pengekodan #100daysofMiva hari ke-9 dan saya bekerja pada Penjana palet warna ringkas dalam Nodejs. Jom jalan-jalan...✨

? Penjana Palet Warna

Lihatlah
https://colorpal.onrender.com

Ini ialah Penjana Palet Warna dibina dengan Node.js menggunakan Express.js dan chroma-js. Ia menghasilkan palet 5 warna yang cantik setiap kali, dengan pelbagai warna warna asas yang dijana secara rawak. Sesuai untuk pereka UI/UX yang mencari inspirasi warna yang pantas! ?

? Ciri-ciri

• Menghasilkan 5 warna padan sebagai varian warna asas tunggal ?.
• Setiap palet diberikan ID unik, membenarkan pengguna mendapatkannya melalui laluan /palette/:id.
• Dibina dengan Express.js untuk logik bahagian pelayan dan chroma-js untuk manipulasi warna.
• UI yang ringkas dan elegan untuk memaparkan palet yang dijana, dengan butang muat semula untuk menjana palet baharu secara dinamik.

Bahagian belakang ?

?️ Teknologi Digunakan

• Node.js & Express.js: Rangka kerja hujung belakang untuk mengendalikan penghalaan.
• Chroma.js: Untuk manipulasi warna dan penjanaan palet yang berkuasa.
• HTML/CSS/Bootstrap: Untuk UI yang bersih dan responsif.

? Bermula

1. Klon Repositori

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

2. Pasang Ketergantungan

npm install

3. Jalankan Aplikasi

node app.js

4. Buka Aplikasi

Lawati apl dalam penyemak imbas anda di:

http://localhost:3000

Anda akan melihat antara muka di mana anda boleh menjana palet 5 warna baharu. Tekan butang Jana untuk mengambil palet warna baharu.

5. Dapatkan Palet dengan ID

Untuk mendapatkan semula palet tertentu, pergi ke:

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

Ganti :id dengan ID palet yang anda mahu lihat, contohnya:

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

? Bagaimana ia Berfungsi

1. Menjana Palet: Setiap kali anda mengklik butang Jana, warna asas dijana secara rawak. Daripada asas ini, 5 varian warna berbeza (warna berbeza) dicipta.
2. ID Unik: Setiap palet yang dijana mempunyai ID unik yang dibuat daripada nilai perenambelasan warna, yang boleh digunakan untuk mendapatkan semula palet itu kemudian.
3. Menggunakan Chroma.js: Kuasa chroma-js memastikan warna yang dijana menarik secara visual, menawarkan pelbagai tahap kecerahan.

?️ Contoh Palet

Berikut ialah contoh jenis palet yang dihasilkan oleh aplikasi:

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

Bahagian hadapan?✨

? Paparan Palet Warna

Penjana Palet Warna ini menjana palet lima warna secara dinamik dan memaparkannya dalam UI. Pengguna boleh berinteraksi dengan palet dengan mengklik butang Jana dan ID palet digunakan untuk menyimpan dan berkongsi kombinasi warna tertentu. Begini cara reka letak berfungsi.

? Reka Letak HTML

Pengepala

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

Pengepala menyediakan tajuk yang bersih dan ringkas untuk aplikasi.

Kotak Warna

<!-- 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>

Bahagian ini mengandungi kotak warna. Setiap kotak ialah div yang menukar warna latar belakangnya secara dinamik berdasarkan palet warna yang dijana. Span di dalam setiap div memaparkan nilai heks warna.

Pemuat

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

Bahagian ini mengandungi pemuat yang muncul apabila palet warna baharu sedang dijana. Pemuat hilang selepas warna dimuatkan.

Pengaki

<!-- 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>

Pengaki mengandungi butang Jana yang mencetuskan penjanaan warna dan butang kongsi untuk perkongsian media sosial.

? Fungsi JavaScript

Penjanaan Warna Dinamik

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;
    });
}

Kod JavaScript ini mengemas kini warna dalam kotak warna secara dinamik apabila palet baharu dijana. Warna digunakan pada setiap elemen div dalam UI.

Logik Penjanaan Palet

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';
    }
}

Fungsi gen() mengambil palet warna baharu daripada laluan API /palette, mengemas kini kotak warna dan mengubah suai URL penyemak imbas dengan ID palet baharu.

Fungsi Kongsi

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,
    });
}

Fungsi share() membolehkan pengguna berkongsi palet warna semasa melalui platform media sosial seperti WhatsApp, Facebook, Twitter, Instagram dan Telegram menggunakan tetingkap timbul SweetAlert.

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

Atas ialah kandungan terperinci Penjana palet warna. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!