Sistema de Votación en Javascript: Aplicación Web Moderna con Almacenamiento Local

En este artículo, exploraremos en detalle un Sistema de Votación desarrollado completamente en Javascript, HTML y CSS. Esta aplicación permite gestionar votaciones en tiempo real, con una interfaz moderna y responsive, además de contar con características como modo oscuro, exportación de datos y persistencia local.

Ver Demo
Código Fuente

Video Explicativo

Características Principales

• Interfaz moderna y responsive
• Modo claro/oscuro
• Almacenamiento local de datos
• Exportación a CSV
• Gráficos en tiempo real
• Sistema de notificaciones
• Diseño adaptable a móviles

Estructura y Funcionamiento

1. Gestión de Datos

El sistema utiliza localStorage para mantener la persistencia de los datos. Esto se implementa mediante dos constantes principales:

const STORAGE_KEY = 'voting_system_data';
const THEME_KEY = 'voting_system_theme';

Los datos se cargan automáticamente al iniciar la aplicación mediante la función loadStoredData(), que recupera tanto los participantes como las preferencias de tema:

function loadStoredData() {
    const storedData = localStorage.getItem(STORAGE_KEY);
    if (storedData) {
        participants = JSON.parse(storedData);
        updateVoteSection();
        toggleVotingSection();
        updateChart();
    }
}

2. Sistema de Votación

El núcleo de la aplicación maneja los votos mediante tres funciones principales:

• addParticipant(): Agrega nuevos participantes al sistema
• incrementVote(): Incrementa el contador de votos
• decrementVote(): Decrementa el contador de votos

Cada acción actualiza automáticamente tanto la interfaz como el almacenamiento local:

function incrementVote(index) {
    participants[index].votes++;
    updateVoteSection();
    updateChart();
    saveData();
    showNotification(`Voto agregado para ${participants[index].name}`, 'success');
}

3. Interfaz Responsive

El diseño responsive se logra mediante CSS moderno, utilizando Grid y Flexbox:

.vote-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-md);
    margin: var(--spacing-lg) 0;
}

Los breakpoints principales están definidos para tablets (768px) y móviles (480px):

@media (max-width: 768px) {
    .button-group {
        flex-direction: column;
    }
}

4. Sistema de Temas (Claro/Oscuro)

La implementación del modo oscuro se realiza mediante variables CSS y atributos data:

:root {
    --background: #f1f5f9;
    --card-bg: #ffffff;
    --text-primary: #1e293b;
}

[data-theme="dark"] {
    --background: #0f172a;
    --card-bg: #1e293b;
    --text-primary: #f1f5f9;
}

El cambio de tema se gestiona mediante Javascript:

function toggleTheme() {
    const currentTheme = document.documentElement.getAttribute('data-theme');
    const newTheme = currentTheme === 'light' ? 'dark' : 'light';
    document.documentElement.setAttribute('data-theme', newTheme);
    localStorage.setItem(THEME_KEY, newTheme);
}

5. Visualización de Datos

Los resultados se visualizan mediante Chart.js, creando gráficos de barras interactivos:

voteChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: labels,
        datasets: [{
            label: 'Votos',
            data: data,
            backgroundColor: '#3b82f6'
        }]
    }
});

Implementación Local

Para implementar la aplicación localmente, sigue estos pasos:

1. Clona el repositorio:
   

   git clone https://github.com/configuroweb/votacion-online.git

   
   
2. Abre el directorio:
   

   cd votacion-online

   
   
3. Abre index.html en tu navegador o usa un servidor local como Live Server de VS Code.

Despliegue en GitHub Pages

1. Crea un nuevo repositorio en GitHub
2. Inicializa Git y sube los cambios:
   

   git init
   git add .
   git commit -m "Initial commit"
   git remote add origin [URL_DEL_REPOSITORIO]
   git push -u origin main

   
   
3. Configura GitHub Pages:
   • Ve a Settings > Pages
   • Selecciona la rama main
   • Guarda los cambios

Aspectos Técnicos Destacados

Sistema de Notificaciones

Las notificaciones proporcionan feedback inmediato al usuario:

function showNotification(message, type = 'info') {
    const notification = document.createElement('div');
    notification.className = `notification ${type}`;
    // ... configuración de la notificación
}

Exportación de Datos

La funcionalidad de exportación permite guardar los resultados en formato CSV:

function exportToCSV() {
    const csvContent = [
        ['Nombre', 'Votos'],
        ...participants.map(p => [p.name, p.votes])
    ].map(e => e.join(',')).join('\n');
    // ... lógica de descarga
}

Conclusiones

Este Sistema de Votación en Javascript demuestra cómo crear una aplicación web moderna y funcional utilizando tecnologías web estándar. Las características clave como el almacenamiento local, la interfaz responsive y el modo oscuro la hacen perfecta para implementaciones reales.

La estructura modular del código y el uso de buenas prácticas de programación facilitan su mantenimiento y extensión. El sistema puede servir como base para proyectos más complejos o como ejemplo educativo de implementación de características modernas en aplicaciones web.

Próximos Pasos

Algunas mejoras potenciales podrían incluir:

• Autenticación de usuarios
• Sincronización en tiempo real
• Más opciones de exportación
• Categorías de votación
• Estadísticas avanzadas

Prueba la demo o explora el código para aprender más sobre esta implementación.