CSS
Para estilizar o aplicativo, você pode usar CSS para torná-lo visualmente atraente e responsivo. (Como esta seção é mais focada em JavaScript, pularei o CSS detalhado aqui.)

JavaScript
Trazendo interatividade para o aplicativo com funcionalidade 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}

Explicação:

Declaração de Variáveis:

Função de incremento:

salvar função:

Como usar o aplicativo

Incrementar a contagem:
Clique no botão \\\"Incrementar\\\" para aumentar a contagem em 1. O número exibido será atualizado em tempo real.

Salve a contagem:
Clique no botão \\\"Salvar\\\" para registrar a contagem atual. A contagem será adicionada à lista de entradas anteriores e a exibição será redefinida para 0.

Ver entradas anteriores:
As contagens salvas aparecerão abaixo da seção \\\"Entradas anteriores\\\", onde você pode revisar seu histórico de contagem.

Lições aprendidas

Construir o People Counter foi uma experiência esclarecedora, principalmente após um tutorial sobre Scrimba. Ele reforçou os principais conceitos de HTML, CSS e JavaScript e demonstrou como criar um aplicativo Web funcional e responsivo.

Conclusão

O People Counter serve como uma prova de como ideias simples podem evoluir para ferramentas práticas com um pouco de conhecimento de codificação. Esteja você rastreando pessoas, objetos ou apenas se divertindo com números, este aplicativo oferece uma solução moderna para um hábito antigo.

","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"}}
"Se um trabalhador quiser fazer bem o seu trabalho, ele deve primeiro afiar suas ferramentas." - Confúcio, "Os Analectos de Confúcio. Lu Linggong"
Ferramentas on-line
Tutorial de software
Navegação no site
Programação
Primeira página > Programação > Construindo \"The People Counter\": uma jornada da contagem infantil ao site moderno

Construindo \"The People Counter\": uma jornada da contagem infantil ao site moderno

Publicado em 2024-09-02
Navegar:983

Building \

Introdução

Você já contou pessoas ou objetos apenas por diversão? Certamente fiz isso quando criança, fosse pelo número de carros que passavam ou pelo número de pessoas que havia em uma sala. Esse simples hábito deu origem à ideia do meu projeto: The People Counter.

O objetivo principal da criação do The People Counter foi mergulhar no JavaScript, entender sua sintaxe e se sentir confortável com seu fluxo. Embora eu o tenha chamado de “Contador de Pessoas”, o conceito é versátil e pode ser adaptado a qualquer tipo de balcão - seja um balcão de carro, um balcão de casa, um balcão de caramelos ou até mesmo um balcão estrela. É fundamentalmente um aplicativo de contador que ajuda a compreender os fundamentos da programação JavaScript.

Este projeto foi construído usando recursos da plataforma de aprendizagem Scrimba, que forneceu informações e orientações valiosas durante todo o processo de desenvolvimento.

Clique para ver o aplicativo em ação!

O People Counter foi projetado para fornecer uma maneira fácil e eficaz de rastrear e gerenciar contagens, ao mesmo tempo em que mostra o poder do HTML, CSS e JavaScript.

Recursos que tornam a contagem divertida

  1. Contagem em tempo real
    Acompanhe sua contagem com um simples clique no botão "Incrementar". Chega de contagem manual!

    Este recurso atualiza a contagem exibida instantaneamente sempre que você clica no botão.

  2. Salvar e visualizar entradas
    Registre suas contagens e veja um histórico de entradas anteriores. Perfeito para acompanhar várias contagens ao longo do tempo.


    As contagens salvas são adicionadas a uma lista abaixo do botão, permitindo que você revise seu histórico de contagem.

  3. Design elegante e responsivo
    O aplicativo se adapta perfeitamente a vários tamanhos de tela, garantindo uma interface limpa e moderna, esteja você em um desktop ou dispositivo móvel.
    O design do aplicativo fica ótimo em todos os dispositivos, melhorando a experiência do usuário.

Tecnologias que potencializam o aplicativo

HTML : A espinha dorsal do aplicativo, fornecendo a estrutura essencial.



    
    
    
    
    The People Counter


    

        

            
The People Counter

        

        

            

                

                    
0

                

            

            

                
                
            

            

                
Previous Entries

CSS
Para estilizar o aplicativo, você pode usar CSS para torná-lo visualmente atraente e responsivo. (Como esta seção é mais focada em JavaScript, pularei o CSS detalhado aqui.)

JavaScript
Trazendo interatividade para o aplicativo com funcionalidade 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
}

Explicação:

Declaração de Variáveis:

  • let count = 0;: Inicializa uma contagem variável para controlar o número de incrementos.
  • let countEl = document.getElementById("count-el");: Recupera o elemento HTML onde a contagem atual é exibida e o atribui a countEl.
  • let saveEl = document.getElementById("save-el");: Recupera o elemento HTML onde as contagens salvas serão exibidas e o atribui a saveEl.

Função de incremento:

  • count = 1;: Aumenta a variável de contagem em 1 cada vez que a função é chamada.
  • countEl.textContent = count;: atualiza a contagem exibida no elemento countEl para refletir o novo valor.

salvar função:

  • let countStr = count " - ";: Cria uma string a partir da contagem atual e acrescenta um travessão para separação.
  • saveEl.textContent = countStr;: Adiciona a nova string de contagem à lista existente de contagens salvas no elemento saveEl.
  • countEl.textContent = 0;: redefine a contagem exibida para 0 após salvar.
  • count = 0;: redefine a variável de contagem para 0 para começar do zero para a próxima sessão de contagem.

Como usar o aplicativo

Incrementar a contagem:
Clique no botão "Incrementar" para aumentar a contagem em 1. O número exibido será atualizado em tempo real.

Salve a contagem:
Clique no botão "Salvar" para registrar a contagem atual. A contagem será adicionada à lista de entradas anteriores e a exibição será redefinida para 0.

Ver entradas anteriores:
As contagens salvas aparecerão abaixo da seção "Entradas anteriores", onde você pode revisar seu histórico de contagem.

Lições aprendidas

Construir o People Counter foi uma experiência esclarecedora, principalmente após um tutorial sobre Scrimba. Ele reforçou os principais conceitos de HTML, CSS e JavaScript e demonstrou como criar um aplicativo Web funcional e responsivo.

Conclusão

O People Counter serve como uma prova de como ideias simples podem evoluir para ferramentas práticas com um pouco de conhecimento de codificação. Esteja você rastreando pessoas, objetos ou apenas se divertindo com números, este aplicativo oferece uma solução moderna para um hábito antigo.

Declaração de lançamento Este artigo foi reproduzido em: https://dev.to/blessy-b-sherin/building-the-people-counter-a-journey-from-childhood-counting-to-modern-website-5bhb?1 Se houver qualquer violação, entre em contato com [email protected] para excluir
Tutorial mais recente Mais>
ClassificaçãoMais>
Aprenda japonês Aprender coreano Aprenda chinês Aprender língua estrangeira Jogo Problema comum Periféricos de tecnologia IA Tutorial de software Programação Artigo

Estude chinês

FerramentaMais>
Decodificação de imagem base64
pinyin chinês
Codificação Unicode
Compressão de criptografia de ofuscação JS
Ferramenta de criptografia hexadecimal de URL
Ferramenta de conversão de codificação UTF-8
Ferramentas online de codificação e decodificação Ascii
Ferramenta de criptografia MD5
Ferramenta on-line de criptografia e descriptografia de texto Hash/Hash
Criptografia SHA on-line

Isenção de responsabilidade: Todos os recursos fornecidos são parcialmente provenientes da Internet. Se houver qualquer violação de seus direitos autorais ou outros direitos e interesses, explique os motivos detalhados e forneça prova de direitos autorais ou direitos e interesses e envie-a para o e-mail: [email protected]. Nós cuidaremos disso para você o mais rápido possível.

Copyright© 2022 湘ICP备2022001581号-3