Awesome GitHub RepositoriesVanilla JavaScript Implementations

This project is a collection of reference implementations for vanilla web applications, interactive browser games, and core frontend development patterns. It consists of small web applications and tools built using standard HTML, CSS, and JavaScript without the use of external frameworks or libraries. The collection demonstrates various practical implementations, including browser-based mini games with arcade and word-guessing mechanics, as well as frontend interface prototypes. These examples cover the use of the native document object model for state manipulation and the implementation of i

Flowbite is a cross-framework UI library and design system built as a collection of pre-styled components and layout blocks using Tailwind CSS utility classes. It functions as a TypeScript UI toolkit and a general web framework for creating responsive websites and applications. The project provides a mirroring Figma design system to allow prototyping of components and variants before they are coded. It distinguishes itself through an AI-driven approach to page generation and the creation of design specifications via a command-line interface. The library covers a wide range of interactive int

Card-style Hugo theme designed for bloggers

Ce projet est un gestionnaire de consentement aux cookies et un outil de conformité RGPD utilisé pour recueillir l'accord des utilisateurs pour les catégories de cookies. Il est implémenté sous forme de plugin JavaScript vanilla qui fonctionne sans frameworks ni dépendances externes. L'outil fournit une interface de consentement multilingue qui détecte automatiquement les paramètres régionaux du navigateur ou du document pour servir du contenu traduit. Il gère les préférences de confidentialité en bloquant les iframes et les scripts tiers jusqu'à ce qu'un consentement explicite de l'utilisateur soit accordé. Le système couvre la personnalisation de la confidentialité du site web via des bannières et des modales configurables, incluant des options pour les styles de mise en page et les thèmes. Il inclut également des capacités pour restreindre l'interaction avec la page jusqu'à ce qu'une décision de consentement soit prise.

Tiny-slider est une bibliothèque de carrousel en JavaScript natif utilisée pour créer des sliders de contenu tactiles et des composants d'interface accessibles sans dépendances externes. Elle fonctionne comme un moteur de mise en page responsive qui ajuste la visibilité et les dimensions des diapositives en fonction des points de rupture (breakpoints) de la fenêtre d'affichage. La bibliothèque se distingue par un lazy loading intégré pour les images et les médias afin d'améliorer les performances de la page, ainsi qu'un système responsive qui adapte automatiquement le nombre d'éléments et l'espacement en fonction de la taille de l'écran de l'appareil. Elle prend également en charge les instances de slider imbriquées, permettant la création de mises en page à défilement multidirectionnel. Le projet couvre des capacités complètes de navigation et d'interaction, notamment la prise en charge des flèches du clavier, l'accessibilité pour les lecteurs d'écran et la détection des gestes tactiles. Il fournit des outils pour les transitions automatiques, un stylage de navigation personnalisé pour la pagination et les boutons, ainsi qu'un système piloté par événements pour déclencher une logique personnalisée lors des changements de cycle de vie.

Pickr is a dependency-free JavaScript color picker library and multi-format color converter. It provides a visual interface for selecting colors and transforming them between HEX, RGB, HSL, and CMYK representations. The library is designed as a themed UI component that can attach to and function within web shadow roots. It supports customizable visual styles and layout applications to align with various CSS frameworks and design systems. Capability areas include visual color selection with alpha channel opacity control, the management of preset color swatches, and an event-driven callback sy

autoComplete.js est une bibliothèque JavaScript vanilla utilisée pour ajouter des menus déroulants de suggestions interrogeables aux éléments d'entrée. Elle fonctionne comme un moteur de recherche côté client et un gestionnaire de cycle de vie d'entrée qui fonctionne sans dépendances ou frameworks externes. La bibliothèque dispose d'un moteur de recherche personnalisable avec plusieurs modes de correspondance et une prise en charge des diacritiques pour un filtrage précis des données. Elle inclut un utilitaire de débogage de requête pour limiter la fréquence des requêtes réseau en retardant l'exécution de la recherche pendant la saisie active. Le système fournit un rendu de suggestion basé sur le DOM pour la découverte de valeurs en temps réel et un gestionnaire de cycle de vie piloté par les événements pour déclencher des actions personnalisées à des étapes spécifiques du processus d'autocomplétion.

Il s'agit d'une collection de petits projets JavaScript et d'exemples de code qui démontrent l'implémentation de concepts de programmation fondamentaux à travers des applications pratiques. Le dépôt sert de référence pour construire des interfaces utilisateur interactives, gérer l'état des applications et intégrer des API externes en utilisant du JavaScript vanilla. Le projet se concentre sur l'utilisation de JavaScript standard sans frameworks externes pour créer des éléments d'interface tels que des modales, des sliders et des galeries. Il fournit des exemples d'organisation de logique d'application complexe via des modèles orientés objet utilisant des classes et des objets pour garantir que le code est structuré et réutilisable. Les capacités couvertes incluent la récupération de données asynchrones pour peupler du contenu dynamique, la manipulation d'éléments DOM pour des mises à jour d'interface utilisateur en temps réel, et le développement de systèmes fonctionnels comme des minuteurs et la pagination.

Ce projet est un modèle de tableau de bord administratif complet construit sur Bootstrap 5. Il fournit une bibliothèque modulaire de composants d'interface pré-conçus, de mises en page et d'éléments de formulaire destinés à accélérer la construction d'applications web réactives. Le framework est conçu pour être léger, utilisant le scripting natif du navigateur pour tous les comportements interactifs afin d'éliminer les dépendances aux bibliothèques externes lourdes. Le modèle se distingue par un accent sur la performance et la personnalisation. Il inclut un pipeline d'assets basé sur un exécuteur de tâches qui automatise la compilation, la minification et le packaging des fichiers sources, garantissant des assets optimisés prêts pour la production. Les développeurs peuvent maintenir une image de marque et une identité visuelle cohérentes en modifiant des fichiers de configuration centralisés, qui tirent parti des variables de préprocesseur et des mixins pour générer des classes utilitaires et des feuilles de style personnalisées. Au-delà de ses composants UI de base, le projet inclut une suite de modules fonctionnels pour gérer l'authentification des utilisateurs, y compris les workflows d'inscription, de connexion et de récupération de mot de passe. Il fournit également des outils intégrés pour la visualisation de données, la gestion de données tabulaires et la planification interactive, ainsi que des modèles pré-construits pour les pages d'application courantes telles que les écrans d'erreur et la gestion de profil. Le dépôt fournit à la fois des fichiers sources non minifiés et des bundles de production optimisés, permettant un déploiement direct sans nécessiter d'environnements d'exécution côté serveur complexes.