CODIGO VOTO ELEC USANDO HTML CCS JS METODO LOCALSTORAGE

CODIGO VOTO ELEC USANDO HTML CCS JS METODO LOCALSTORAGE

Crear una página web para votar por dos candidatos utilizando HTML, CSS, JavaScript y guardar los resultados de la votación en localStorage puede ser un proyecto interesante. A continuación, te proporciono un ejemplo simple de cómo podrías hacerlo:

Estructura HTML: Crea una página con dos botones para votar por cada candidato y un área para mostrar los resultados.

html

Copy code

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Votación de Candidatos</title>

    <link rel="stylesheet" href="styles.css">

</head>

<body>

    <h1>Votación de Candidatos</h1>

    <button id="votarCandidato1">Votar por Candidato 1</button>

    <button id="votarCandidato2">Votar por Candidato 2</button>

    <div id="resultados">

        <h2>Resultados:</h2>

        <p>Candidato 1: <span id="votosCandidato1">0</span></p>

        <p>Candidato 2: <span id="votosCandidato2">0</span></p>

    </div>

    <script src="script.js"></script>

</body>

</html>

Estilos CSS (styles.css):

css

Copy code

body {

    font-family: Arial, sans-serif;

    text-align: center;

    margin: 20px;

}


h1 {

    margin-bottom: 20px;

}


button {

    margin: 10px;

    padding: 10px 20px;

    font-size: 16px;

    cursor: pointer;

}


#resultados {

    margin-top: 30px;

}

JavaScript (script.js):

javascript

Copy code

document.addEventListener("DOMContentLoaded", function () {

    // Obtener elementos del DOM

    const votarCandidato1Button = document.getElementById("votarCandidato1");

    const votarCandidato2Button = document.getElementById("votarCandidato2");

    const votosCandidato1Span = document.getElementById("votosCandidato1");

    const votosCandidato2Span = document.getElementById("votosCandidato2");


    // Manejadores de eventos para votar

    votarCandidato1Button.addEventListener("click", function () {

        // Incrementar votos de Candidato 1

        let votosCandidato1 = parseInt(votosCandidato1Span.textContent) + 1;

        votosCandidato1Span.textContent = votosCandidato1;

        // Guardar votos en localStorage

        localStorage.setItem("votosCandidato1", votosCandidato1);

    });


    votarCandidato2Button.addEventListener("click", function () {

        // Incrementar votos de Candidato 2

        let votosCandidato2 = parseInt(votosCandidato2Span.textContent) + 1;

        votosCandidato2Span.textContent = votosCandidato2;

        // Guardar votos en localStorage

        localStorage.setItem("votosCandidato2", votosCandidato2);

    });


    // Cargar resultados desde localStorage al cargar la página

    const votosGuardadosCandidato1 = localStorage.getItem("votosCandidato1");

    const votosGuardadosCandidato2 = localStorage.getItem("votosCandidato2");


    if (votosGuardadosCandidato1 !== null) {

        votosCandidato1Span.textContent = votosGuardadosCandidato1;

    }


    if (votosGuardadosCandidato2 !== null) {

        votosCandidato2Span.textContent = votosGuardadosCandidato2;

    }

});

Este código crea una página web simple donde puedes votar por dos candidatos y los resultados de la votación se guardan en localStorage. El conteo de votos se muestra en la página y persistirá incluso si cierras y vuelves a abrir la página.


Ten en cuenta que este es un ejemplo básico y que hay muchas formas de mejorar y expandir esta implementación. Por ejemplo, podrías agregar validaciones, estilos más avanzados, restricciones en la votación, y mucho más.





User

primero en la primera web que elija el candidato despues que muestre en una 2da web el resultado de lo que voto y que aparezca un boton para imprimir ese voto

ChatGPT

Entendido. Ahora, vamos a modificar el flujo para que en la primera página el usuario elija el candidato y luego, en una segunda página, muestre el resultado de su voto y ofrezca un botón para imprimir el voto. Además, guardaremos los resultados en localStorage para que puedan ser recuperados en la segunda página. Aquí está cómo podríamos hacerlo:


Primera página (index.html):


html

Copy code

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Votación de Candidatos</title>

    <link rel="stylesheet" href="styles.css">

</head>

<body>

    <h1>Votación de Candidatos</h1>

    <p>Por favor, elige a un candidato:</p>

    <button id="votarCandidato1">Votar por Candidato 1</button>

    <button id="votarCandidato2">Votar por Candidato 2</button>

    <script src="script.js"></script>

</body>

</html>

Segunda página (resultados.html):


html

Copy code

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Resultado de Votación</title>

    <link rel="stylesheet" href="styles.css">

</head>

<body>

    <h1>Resultado de tu Votación</h1>

    <p>Has votado por:</p>

    <div id="resultadoVoto"></div>

    <button id="imprimirVoto">Imprimir Voto</button>

    <script src="resultados.js"></script>

</body>

</html>

Estilos CSS (styles.css):


css

Copy code

/* Estilos comunes para ambas páginas */

body {

    font-family: Arial, sans-serif;

    text-align: center;

    margin: 20px;

}


h1 {

    margin-bottom: 20px;

}


/* Estilos específicos para la segunda página */

#resultadoVoto {

    font-size: 24px;

    margin-top: 20px;

}

JavaScript (script.js):


javascript

Copy code

document.addEventListener("DOMContentLoaded", function () {

    // Obtener elementos del DOM

    const votarCandidato1Button = document.getElementById("votarCandidato1");

    const votarCandidato2Button = document.getElementById("votarCandidato2");


    // Manejadores de eventos para votar

    votarCandidato1Button.addEventListener("click", function () {

        localStorage.setItem("voto", "Candidato 1");

        window.location.href = "resultados.html";

    });


    votarCandidato2Button.addEventListener("click", function () {

        localStorage.setItem("voto", "Candidato 2");

        window.location.href = "resultados.html";

    });

});

JavaScript para la segunda página (resultados.js):


javascript

Copy code

document.addEventListener("DOMContentLoaded", function () {

    // Obtener elemento del DOM

    const resultadoVotoDiv = document.getElementById("resultadoVoto");

    const imprimirVotoButton = document.getElementById("imprimirVoto");


    // Obtener voto guardado en localStorage

    const voto = localStorage.getItem("voto");


    // Mostrar el resultado del voto

    if (voto) {

        resultadoVotoDiv.textContent = voto;

    } else {

        resultadoVotoDiv.textContent = "No se ha registrado ningún voto.";

    }


    // Manejador de evento para imprimir el voto

    imprimirVotoButton.addEventListener("click", function () {

        window.print();

    });

});

Ahora, cuando el usuario elige un candidato en la primera página, se almacena en localStorage y se redirige a la segunda página donde se muestra el resultado de su voto. El botón "Imprimir Voto" en la segunda página permitirá al usuario imprimir el resultado de su voto.





User

hacer otra pagina con ganador de la votacion recuento votos

ChatGPT

Por supuesto, podemos crear una tercera página que muestre el ganador de la votación y el recuento de votos para ambos candidatos. Aquí está cómo hacerlo:


Tercera página (ganador.html):


html

Copy code

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Ganador de la Votación</title>

    <link rel="stylesheet" href="styles.css">

</head>

<body>

    <h1>Ganador de la Votación</h1>

    <p>Resultado del recuento de votos:</p>

    <p>Candidato 1: <span id="votosCandidato1">0</span></p>

    <p>Candidato 2: <span id="votosCandidato2">0</span></p>

    <p>Ganador: <span id="ganador"></span></p>

    <script src="ganador.js"></script>

</body>

</html>

JavaScript para la tercera página (ganador.js):


javascript

Copy code

document.addEventListener("DOMContentLoaded", function () {

    // Obtener elementos del DOM

    const votosCandidato1Span = document.getElementById("votosCandidato1");

    const votosCandidato2Span = document.getElementById("votosCandidato2");

    const ganadorSpan = document.getElementById("ganador");


    // Obtener votos guardados en localStorage

    const votosCandidato1 = parseInt(localStorage.getItem("votosCandidato1")) || 0;

    const votosCandidato2 = parseInt(localStorage.getItem("votosCandidato2")) || 0;


    // Mostrar recuento de votos

    votosCandidato1Span.textContent = votosCandidato1;

    votosCandidato2Span.textContent = votosCandidato2;


    // Determinar el ganador y mostrarlo

    if (votosCandidato1 > votosCandidato2) {

        ganadorSpan.textContent = "Candidato 1";

    } else if (votosCandidato2 > votosCandidato1) {

        ganadorSpan.textContent = "Candidato 2";

    } else {

        ganadorSpan.textContent = "Empate";

    }

});

Asegúrate de tener los mismos estilos CSS (styles.css) que se proporcionaron anteriormente en todas las páginas para mantener la coherencia en la apariencia.


Ahora, cuando el usuario visite la tercera página (ganador.html), se mostrará el recuento de votos para ambos candidatos y se determinará el ganador de la votación. Si hay un empate, se mostrará "Empate". Esto cierra el ciclo y proporciona al usuario una conclusión sobre el resultado de la votación.





User

hacer que no vote dos veces la misma persona  y siendoidentificado con numero serie dado

ChatGPT

Para evitar que la misma persona vote dos veces y poder identificar a los votantes utilizando un número de serie, necesitamos tener algún mecanismo para registrar los números de serie que ya han votado. Podemos utilizar localStorage para almacenar estos números de serie. Aquí está cómo podríamos hacerlo:


Modificar el código de la primera página (index.html) para solicitar el número de serie antes de permitir el voto:

html

Copy code

<!-- index.html -->

<!DOCTYPE html>

<html lang="en">

<head>

    <!-- ... -->

</head>

<body>

    <h1>Votación de Candidatos</h1>

    <p>Por favor, ingresa tu número de serie:</p>

    <input type="text" id="numeroSerie" placeholder="Número de serie">

    <button id="verificarNumeroSerie">Verificar Número de Serie</button>

    <div id="votacionSection" style="display: none;">

        <p>Elige a un candidato:</p>

        <button id="votarCandidato1">Votar por Candidato 1</button>

        <button id="votarCandidato2">Votar por Candidato 2</button>

    </div>

    <script src="script.js"></script>

</body>

</html>

Modificar el código JavaScript para manejar la verificación del número de serie y el voto:

javascript

Copy code

// script.js

document.addEventListener("DOMContentLoaded", function () {

    // Obtener elementos del DOM

    const numeroSerieInput = document.getElementById("numeroSerie");

    const verificarNumeroSerieButton = document.getElementById("verificarNumeroSerie");

    const votacionSection = document.getElementById("votacionSection");

    const votarCandidato1Button = document.getElementById("votarCandidato1");

    const votarCandidato2Button = document.getElementById("votarCandidato2");


    // Manejador de eventos para verificar número de serie

    verificarNumeroSerieButton.addEventListener("click", function () {

        const numeroSerie = numeroSerieInput.value;

        if (numeroSerie) {

            // Verificar si el número de serie ya ha votado

            const votanteYaVoto = localStorage.getItem(numeroSerie);

            if (votanteYaVoto) {

                alert("Ya has votado. No puedes votar nuevamente.");

            } else {

                // Mostrar la sección de votación

                votacionSection.style.display = "block";

                // Ocultar el área de verificación de número de serie

                verificarNumeroSerieButton.style.display = "none";

                // Guardar el número de serie como votante

                localStorage.setItem(numeroSerie, "voto");

            }

        } else {

            alert("Por favor, ingresa un número de serie válido.");

        }

    });


    // Manejadores de eventos para votar por los candidatos

    votarCandidato1Button.addEventListener("click", function () {

        // ... Código para votar por Candidato 1 ...

    });


    votarCandidato2Button.addEventListener("click", function () {

        // ... Código para votar por Candidato 2 ...

    });

});

Modificar el código de la segunda página (resultados.html) para mostrar los resultados solo después de la verificación del número de serie:

html

Copy code

<!-- resultados.html -->

<!DOCTYPE html>

<html lang="en">

<head>

    <!-- ... -->

</head>

<body>

    <h1>Resultado de tu Votación</h1>

    <p>Has votado por:</p>

    <div id="resultadoVoto"></div>

    <button id="imprimirVoto">Imprimir Voto</button>

    <script src="resultados.js"></script>

</body>

</html>

No olvides actualizar los enlaces en los botones de votación para dirigir al usuario a la página de resultados después de votar por un candidato.


Con estas modificaciones, el sistema verificará si un número de serie ya ha votado antes de permitir que se realice otro voto. Cada número de serie válido solo podrá votar una vez.





User

el numero de serie ya esta guardado en un array de 10 numeros previamente con javascript

ChatGPT

Si el número de serie ya está guardado en un array de 10 números y deseas verificar que el número de serie ingresado esté en ese array para permitir el voto, aquí está cómo puedes hacerlo:


Modificar el código JavaScript para verificar el número de serie en el array antes de permitir el voto:

javascript

Copy code

// script.js

document.addEventListener("DOMContentLoaded", function () {

    // Array de números de serie válidos

    const numerosDeSerieValidos = ["123456", "987654", "543210", "111111", "222222", "333333", "444444", "555555", "666666", "777777"];


    // Obtener elementos del DOM

    const numeroSerieInput = document.getElementById("numeroSerie");

    const verificarNumeroSerieButton = document.getElementById("verificarNumeroSerie");

    const votacionSection = document.getElementById("votacionSection");

    const votarCandidato1Button = document.getElementById("votarCandidato1");

    const votarCandidato2Button = document.getElementById("votarCandidato2");


    // Manejador de eventos para verificar número de serie

    verificarNumeroSerieButton.addEventListener("click", function () {

        const numeroSerie = numeroSerieInput.value;

        if (numeroSerie) {

            // Verificar si el número de serie está en la lista de números válidos

            if (numerosDeSerieValidos.includes(numeroSerie)) {

                // Verificar si el número de serie ya ha votado

                const votanteYaVoto = localStorage.getItem(numeroSerie);

                if (votanteYaVoto) {

                    alert("Ya has votado. No puedes votar nuevamente.");

                } else {

                    // Mostrar la sección de votación

                    votacionSection.style.display = "block";

                    // Ocultar el área de verificación de número de serie

                    verificarNumeroSerieButton.style.display = "none";

                    // Guardar el número de serie como votante

                    localStorage.setItem(numeroSerie, "voto");

                }

            } else {

                alert("Número de serie no válido.");

            }

        } else {

            alert("Por favor, ingresa un número de serie válido.");

        }

    });


    // Manejadores de eventos para votar por los candidatos

    votarCandidato1Button.addEventListener("click", function () {

        // ... Código para votar por Candidato 1 ...

    });


    votarCandidato2Button.addEventListener("click", function () {

        // ... Código para votar por Candidato 2 ...

    });

});

Este código verificará si el número de serie ingresado está en el array numerosDeSerieValidos antes de permitir el voto. Solo se permitirá votar a personas con números de serie válidos que no hayan votado previamente.

Comentarios

Publicar un comentario

Entradas populares de este blog

Copia de Seguridad de Archivo MS Access (.mdb) a Pendrive con VB6

  Copia de Seguridad de Archivo MS Access (.mdb) a Pendrive con VB6   Para crear una copia de seguridad de un archivo MS Access (.mdb) a un pendrive cuando se hace clic en un botón en un formulario VB6, puedes usar el siguiente código: vb Private Sub cmdBackup_Click ()     On Error GoTo ErrorHandler         Dim ArchivoOrigen As String     Dim ArchivoDestino As String     Dim UnidadPendrive As String     Dim FSO As Object     Dim Drv As Object     Dim Existe As Boolean         ' Ruta del archivo de origen (base de datos Access)     ArchivoOrigen = "C:\Ruta\A\Tu\BaseDeDatos.mdb" ' Cambiar por tu ruta real         ' Verificar si el archivo de origen existe     If Dir(ArchivoOrigen) = "" Then         Ms...
Leer más

INSERTAR Y UPDATE FECHA CON PHP MYSQL EN FORMULARIO METODO POST CON JQUERY ETIQUETA DATE

COMO INSERTAR FECHA CON PHP MYSQL EN FORMULARIO METODO POST CON JQUERY ETIQUETA DATE ChatGPT Para insertar una fecha con PHP y MySQL en un formulario usando el método POST con jQuery y la etiqueta date, puedes seguir estos pasos. Asumiré que estás utilizando un formulario HTML con un campo de fecha: Crear el formulario HTML: html Copy code <!DOCTYPE html> <html lang="es"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Formulario de Fecha</title>     <!-- Agregar jQuery -->     <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> </head> <body>     <form id="miFormulario">         <label for="fecha">Fecha:</label>         <input type="date" id="fecha" name="fecha" required>         <but...
Leer más

DETECTAR DIRECCION IP CON PHP Y JS

  Para detectar la IP real del visitante de una página web, puedes hacerlo tanto con PHP como con JavaScript, aunque PHP es más confiable ya que JavaScript ejecuta en el lado del cliente y puede ser manipulado. 1. Detectar la IP con PHP PHP es la mejor opción para obtener la IP, ya que corre en el servidor y no depende del navegador. Sin embargo, la IP obtenida puede estar detrás de un proxy, así que se pueden usar varios encabezados HTTP. php function obtenerIP() {     if (!empty($_SERVER['HTTP_CLIENT_IP'])) {         // IP desde el compartido de Internet         return $_SERVER['HTTP_CLIENT_IP'];     } elseif (!empty($_SERVER['HTTP_X_FORWARDED_FOR'])) {         // IP detrás de un proxy         return $_SERVER['HTTP_X_FORWARDED_FOR'];     } else {         // IP real del usuario         return $_SERVER['REMOTE_ADDR'];     } ...
Leer más