CSS
Para diseñar la aplicación, puede usar CSS para hacerla visualmente atractiva y responsiva. (Dado que esta sección se centra más en JavaScript, omitiré el CSS detallado aquí).

JavaScript
Aportando interactividad a la aplicación con funcionalidad dinámica.

let count = 0let countEl = document.getElementById(\\\"count-el\\\")let saveEl = document.getElementById (\\\"save-el\\\")function increment() {       count  = 1    countEl.textContent = count}function save() {    let countStr = count   \\\" - \\\"    saveEl.textContent  = countStr    countEl.textContent = 0    count = 0}

Explicación:

Declaración de variables:

función de incremento:

función guardar:

Cómo utilizar la aplicación

Incrementar el recuento:
Haga clic en el botón \\\"Incrementar\\\" para aumentar el recuento en 1. El número mostrado se actualizará en tiempo real.

Guardar el recuento:
Haga clic en el botón \\\"Guardar\\\" para registrar el recuento actual. El recuento se agregará a la lista de entradas anteriores y la pantalla se restablecerá a 0.

Ver entradas anteriores:
Los recuentos guardados aparecerán debajo de la sección \\\"Entradas anteriores\\\", donde podrás revisar tu historial de recuentos.

Lecciones aprendidas

Construir The People Counter fue una experiencia reveladora, especialmente después de un tutorial sobre Scrimba. Reforzó conceptos clave en HTML, CSS y JavaScript y demostró cómo crear una aplicación web funcional y responsiva.

Conclusión

El contador de personas sirve como testimonio de cómo las ideas simples pueden convertirse en herramientas prácticas con un poco de conocimiento de codificación. Ya sea que estés rastreando personas, objetos o simplemente divirtiéndote con los números, esta aplicación proporciona una solución moderna para un viejo hábito.

","image":"http://www.luping.net/uploads/20240902/172524384466d521c4a3f5f.jpg","datePublished":"2024-09-02T10:24:04+08:00","dateModified":"2024-09-02T10:24:04+08:00","author":{"@type":"Person","name":"luping.net","url":"https://www.luping.net/articlelist/0_1.html"}}
"Si un trabajador quiere hacer bien su trabajo, primero debe afilar sus herramientas." - Confucio, "Las Analectas de Confucio. Lu Linggong"
Herramientas en línea
Tutoriales de software
Sitio de navegacion
Programación
Página delantera > Programación > Construyendo \"El contador de personas\": un viaje desde el conteo infantil hasta el sitio web moderno

Construyendo \"El contador de personas\": un viaje desde el conteo infantil hasta el sitio web moderno

Publicado el 2024-09-02
Navegar:978

Building \

Introducción

¿Alguna vez te has encontrado contando personas u objetos sólo por diversión? Ciertamente lo hice cuando era niño, ya sea por la cantidad de autos que pasaban o por la cantidad de personas que había en una habitación. Este simple hábito desencadenó la idea detrás de mi proyecto: The People Counter.

El objetivo principal al crear The People Counter fue sumergirse en JavaScript, comprender su sintaxis y sentirse cómodo con su flujo. Si bien lo llamé "El contador de personas", el concepto es versátil y se puede adaptar a cualquier tipo de mostrador, ya sea el mostrador de un automóvil, el mostrador de una casa, un mostrador de caramelos o incluso un mostrador de estrellas. Es fundamentalmente una aplicación de contador que ayuda a comprender los conceptos básicos de la programación JavaScript.

Este proyecto se creó utilizando recursos de la plataforma de aprendizaje Scrimba, que proporcionó información y orientación valiosas durante todo el proceso de desarrollo.

¡Haz clic para ver la aplicación en acción!

El contador de personas está diseñado para proporcionar una forma fácil y eficaz de realizar un seguimiento y gestionar los recuentos, al mismo tiempo que muestra el poder de HTML, CSS y JavaScript.

Funciones que hacen que contar sea divertido

  1. Conteo en tiempo real
    Realice un seguimiento de su recuento con un simple clic en el botón "Incrementar". ¡No más recuento manual!

    Esta función actualiza el recuento mostrado instantáneamente cada vez que haces clic en el botón.

  2. Guardar y ver entradas
    Registre sus recuentos y vea un historial de entradas anteriores. Perfecto para realizar un seguimiento de múltiples recuentos a lo largo del tiempo.


    Los recuentos guardados se agregan a una lista debajo del botón, lo que le permite revisar su historial de recuentos.

  3. Diseño elegante y responsivo
    La aplicación se adapta perfectamente a varios tamaños de pantalla, lo que garantiza una interfaz limpia y moderna, ya sea que esté en una computadora de escritorio o en un dispositivo móvil.
    El diseño de la aplicación se ve muy bien en todos los dispositivos, mejorando la experiencia del usuario.

Tecnologías que impulsan la aplicación

HTML: la columna vertebral de la aplicación, que proporciona la estructura esencial.



    The People Counter

        
The People Counter

        

                

                    
0

                

            

            

                
                
            

            

                
Previous Entries

CSS
Para diseñar la aplicación, puede usar CSS para hacerla visualmente atractiva y responsiva. (Dado que esta sección se centra más en JavaScript, omitiré el CSS detallado aquí).

JavaScript
Aportando interactividad a la aplicación con funcionalidad dinámica.

let count = 0

let countEl = document.getElementById("count-el")

let saveEl = document.getElementById ("save-el")


function increment() {   
    count  = 1
    countEl.textContent = count
}

function save() {
    let countStr = count   " - "
    saveEl.textContent  = countStr
    countEl.textContent = 0
    count = 0
}

Explicación:

Declaración de variables:

  • let count = 0;: Inicializa un recuento variable para realizar un seguimiento del número de incrementos.
  • let countEl = document.getElementById("count-el");: Recupera el elemento HTML donde se muestra el recuento actual y lo asigna a countEl.
  • let saveEl = document.getElementById("save-el");: Recupera el elemento HTML donde se mostrarán los recuentos guardados y lo asigna a saveEl.

función de incremento:

  • count = 1;: Incrementa la variable de conteo en 1 cada vez que se llama a la función.
  • countEl.textContent = count;: actualiza el recuento mostrado en el elemento countEl para reflejar el nuevo valor.

función guardar:

  • let countStr = count " - ";: Crea una cadena a partir del recuento actual y agrega un guión para la separación.
  • saveEl.textContent = countStr;: Agrega la nueva cadena de recuento a la lista existente de recuentos guardados en el elemento saveEl.
  • countEl.textContent = 0;: restablece el recuento mostrado a 0 después de guardar.
  • count = 0;: restablece la variable de conteo a 0 para comenzar de nuevo para la siguiente sesión de conteo.

Cómo utilizar la aplicación

Incrementar el recuento:
Haga clic en el botón "Incrementar" para aumentar el recuento en 1. El número mostrado se actualizará en tiempo real.

Guardar el recuento:
Haga clic en el botón "Guardar" para registrar el recuento actual. El recuento se agregará a la lista de entradas anteriores y la pantalla se restablecerá a 0.

Ver entradas anteriores:
Los recuentos guardados aparecerán debajo de la sección "Entradas anteriores", donde podrás revisar tu historial de recuentos.

Lecciones aprendidas

Construir The People Counter fue una experiencia reveladora, especialmente después de un tutorial sobre Scrimba. Reforzó conceptos clave en HTML, CSS y JavaScript y demostró cómo crear una aplicación web funcional y responsiva.

Conclusión

El contador de personas sirve como testimonio de cómo las ideas simples pueden convertirse en herramientas prácticas con un poco de conocimiento de codificación. Ya sea que estés rastreando personas, objetos o simplemente divirtiéndote con los números, esta aplicación proporciona una solución moderna para un viejo hábito.

Declaración de liberación Este artículo se reproduce en: https://dev.to/blessy-b-sherin/building-the-people-counter-a-journey-from-childhood-counting-to-modern-website-5bhb?1 Si hay cualquier infracción, comuníquese con [email protected] para eliminar
Último tutorial Más>
ClasificaciónMás>
Aprende japonés Aprender coreano Aprender chino Aprender idioma extranjero Juego Problema comun Periféricos tecnológicos AI Tutoriales de software Programación Artículo

Estudiar chino

HerramientaMás>
Decodificación de imagen base64
pinyin chino
Codificación Unicode
Compresión de cifrado de ofuscación JS
Herramienta de cifrado hexadecimal de URL
Herramienta de conversión de codificación UTF-8
Herramientas de codificación y decodificación Ascii en línea
herramienta de cifrado MD5
Herramienta de cifrado y descifrado de texto hash/hash en línea
Cifrado SHA en línea

Descargo de responsabilidad: Todos los recursos proporcionados provienen en parte de Internet. Si existe alguna infracción de sus derechos de autor u otros derechos e intereses, explique los motivos detallados y proporcione pruebas de los derechos de autor o derechos e intereses y luego envíelos al correo electrónico: [email protected]. Lo manejaremos por usted lo antes posible.

Copyright© 2022 湘ICP备2022001581号-3