Générateur de palette de couleurs

Bonjour tout le monde ?? Je suis de retour sur la bonne voie. Le jour 9 du défi de codage #100daysofMiva et j'ai travaillé sur un simple générateur de palette de couleurs dans Nodejs. Faisons un tour à travers...✨

? Générateur de palette de couleurs

Regardez-le
https://colorpal.onrender.com

Il s'agit d'un Générateur de palette de couleurs construit avec Node.js en utilisant Express.js et chroma-js. Il génère à chaque fois une belle palette de 5 couleurs, avec différentes nuances d'une couleur de base générée aléatoirement. Parfait pour les designers UI/UX à la recherche d’une inspiration rapide en matière de couleurs ! ?

? Caractéristiques

• Génère 5 couleurs correspondantes en tant que variantes d'une seule couleur de base ?.
• Chaque palette se voit attribuer un identifiant unique, permettant aux utilisateurs de la récupérer via la route /palette/:id.
• Construit avec Express.js pour la logique côté serveur et chroma-js pour la manipulation des couleurs.
• Interface utilisateur simple et élégante pour afficher la palette générée, avec un bouton d'actualisation pour générer dynamiquement de nouvelles palettes.

Back-end ?

?️ Technologies utilisées

• Node.js & Express.js : Framework backend pour gérer le routage.
• Chroma.js : pour une manipulation puissante des couleurs et une génération de palette.
• HTML/CSS/Bootstrap : Pour une interface utilisateur propre et réactive.

? Commencer

1. Cloner le référentiel

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

2. Installer les dépendances

npm install

3. Exécutez l'application

node app.js

4. Ouvrez l'application

Visitez l'application dans votre navigateur à l'adresse :

http://localhost:3000

Vous verrez une interface où vous pourrez générer une nouvelle palette de 5 couleurs. Appuyez sur le bouton Générer pour récupérer une nouvelle palette de couleurs.

5. Récupérer une palette par ID

Pour récupérer une palette spécifique, rendez-vous sur :

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

Remplacez :id par l'ID de la palette que vous souhaitez afficher, par exemple :

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

? Comment ça marche

1. Générer une palette : Chaque fois que vous cliquez sur le bouton Générer, une couleur de base est générée aléatoirement. A partir de cette base, 5 variantes de couleurs distinctes (différentes nuances) sont créées.
2. ID unique : Chaque palette générée possède un identifiant unique créé à partir des valeurs hexadécimales des couleurs, qui peut être utilisé pour récupérer la palette ultérieurement.
3. Utilisation de Chroma.js : La puissance de chroma-js garantit que les couleurs générées sont visuellement attrayantes, offrant une variété de niveaux de luminosité.

?️ Exemple de palette

Voici un exemple du type de palette générée par l'application :

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

Front-end ?✨

? Affichage de la palette de couleurs

Ce générateur de palette de couleurs génère dynamiquement une palette de cinq couleurs et les affiche dans l'interface utilisateur. Les utilisateurs peuvent interagir avec la palette en cliquant sur le bouton Générer, et l'ID de la palette est utilisé pour enregistrer et partager des combinaisons de couleurs spécifiques. Voici comment fonctionne la mise en page.

? Mise en page HTML

En-tête

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

L'en-tête fournit un titre clair et simple pour l'application.

Boîtes de couleurs

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

Cette section contient les cases de couleur. Chaque boîte est un div qui change dynamiquement sa couleur d'arrière-plan en fonction de la palette de couleurs générée. L'étendue à l'intérieur de chaque div affiche la valeur hexadécimale de la couleur.

Chargeur

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

Cette section contient un chargeur qui apparaît lorsqu'une nouvelle palette de couleurs est générée. Le chargeur disparaît une fois les couleurs chargées.

Pied de page

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

Le pied de page contient un bouton Générer qui déclenche la génération de couleurs et un bouton de partage pour le partage sur les réseaux sociaux.

? Fonctionnalité JavaScript

Génération de couleurs dynamique

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

Ce code JavaScript met à jour dynamiquement les couleurs dans les cases de couleurs lorsqu'une nouvelle palette est générée. Les couleurs sont appliquées à chaque élément div dans l'interface utilisateur.

Logique de génération de palette

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

La fonction gen() récupère une nouvelle palette de couleurs à partir de la route API /palette, met à jour les zones de couleur et modifie l'URL du navigateur avec le nouvel ID de palette.

Partager la fonctionnalité

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

La fonction share() permet aux utilisateurs de partager la palette de couleurs actuelle via des plateformes de médias sociaux comme WhatsApp, Facebook, Twitter, Instagram et Telegram à l'aide des popups 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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!