Farbpalettengenerator

Hallo Welt ?? Ich bin wieder auf dem richtigen Weg. Der #100daysofMiva Coding Challenge Tag 9 und ich haben an einem einfachen Farbpalettengenerator in Nodejs gearbeitet. Machen wir einen Spaziergang durch...✨

? Farbpalettengenerator

Schau es dir an
https://colorpal.onrender.com

Dies ist ein Farbpalettengenerator, der mit Node.js unter Verwendung von Express.js und chroma-js erstellt wurde. Es generiert jedes Mal eine wunderschöne 5-Farben-Palette mit unterschiedlichen Schattierungen einer zufällig generierten Grundfarbe. Perfekt für UI/UX-Designer, die schnelle Farbinspiration suchen! ?

? Merkmale

• Erzeugt 5 passende Farben als Varianten einer einzelnen Grundfarbe ?.
• Jeder Palette wird eine eindeutige ID zugewiesen, sodass Benutzer sie über die Route /palette/:id abrufen können.
• Erstellt mit Express.js für serverseitige Logik und chroma-js für Farbmanipulation.
• Einfache und elegante Benutzeroberfläche zum Anzeigen der generierten Palette, mit einer Aktualisierungsschaltfläche zum dynamischen Generieren neuer Paletten.

Backend?

?️ Verwendete Technologien

• Node.js & Express.js: Backend-Framework zur Handhabung des Routings.
• Chroma.js: Für leistungsstarke Farbmanipulation und Palettenerstellung.
• HTML/CSS/Bootstrap: Für eine saubere, reaktionsfähige Benutzeroberfläche.

? Erste Schritte

1. Klonen Sie das Repository

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

2. Abhängigkeiten installieren

npm install

3. Führen Sie die Anwendung aus

node app.js

4. Öffnen Sie die Anwendung

Besuchen Sie die App in Ihrem Browser unter:

http://localhost:3000

Sie sehen eine Oberfläche, in der Sie eine neue 5-Farben-Palette erstellen können. Klicken Sie auf die Schaltfläche Generieren, um eine neue Farbpalette abzurufen.

5. Rufen Sie eine Palette nach ID ab

Um eine bestimmte Palette abzurufen, gehen Sie zu:

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

Ersetzen Sie :id durch die ID der Palette, die Sie anzeigen möchten, zum Beispiel:

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

? Wie es funktioniert

1. Palette erstellen: Jedes Mal, wenn Sie auf die Schaltfläche Generieren klicken, wird eine Grundfarbe zufällig generiert. Auf dieser Basis entstehen 5 unterschiedliche Farbvarianten (verschiedene Farbtöne).
2. Eindeutige ID: Jede generierte Palette verfügt über eine eindeutige ID, die aus den Hexadezimalwerten der Farben besteht und zum späteren Abrufen der Palette verwendet werden kann.
3. Verwendung von Chroma.js: Die Leistung von chroma-js stellt sicher, dass die erzeugten Farben optisch ansprechend sind und eine Vielzahl von Helligkeitsstufen bieten.

?️ Beispielpalette

Hier ist ein Beispiel für die Art von Palette, die die App generiert:

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

Frontend?✨

? Anzeige der Farbpalette

Dieser Farbpalettengenerator generiert dynamisch eine Palette mit fünf Farben und zeigt sie in der Benutzeroberfläche an. Benutzer können mit der Palette interagieren, indem sie auf die Schaltfläche Generieren klicken. Die Paletten-ID wird zum Speichern und Teilen bestimmter Farbkombinationen verwendet. So funktioniert das Layout.

? HTML-Layout

Kopfzeile

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

Der Header bietet einen klaren und einfachen Titel für die Anwendung.

Farbboxen

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

Dieser Abschnitt enthält die Farbfelder. Jedes Feld ist ein Div, das seine Hintergrundfarbe basierend auf der generierten Farbpalette dynamisch ändert. Die Spanne innerhalb jedes Div zeigt den Hexadezimalwert der Farbe an.

Lader

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

Dieser Abschnitt enthält einen Loader, der erscheint, wenn eine neue Farbpalette generiert wird. Der Loader verschwindet, nachdem die Farben geladen wurden.

Fußzeile

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

Die Fußzeile enthält eine Schaltfläche Generieren, die die Farbgenerierung auslöst, und eine Schaltfläche zum Teilen für das Teilen in sozialen Medien.

? JavaScript-Funktionalität

Dynamische Farberzeugung

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

Dieser JavaScript-Code aktualisiert die Farben in den Farbfeldern dynamisch, wenn eine neue Palette generiert wird. Die Farben werden auf jedes div-Element in der Benutzeroberfläche angewendet.

Logik zur Palettengenerierung

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

Die Funktion gen() ruft eine neue Farbpalette von der /palette-API-Route ab, aktualisiert die Farbfelder und ändert die Browser-URL mit der neuen Paletten-ID.

Share-Funktionalität

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

Mit der share()-Funktion können Benutzer die aktuelle Farbpalette über Social-Media-Plattformen wie WhatsApp, Facebook, Twitter, Instagram und Telegram mithilfe von SweetAlert-Popups teilen.

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

Das obige ist der detaillierte Inhalt vonFarbpalettengenerator. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!