Diversão do javascript: construa um aplicativo de rastreador de corrida!

1. Boas-vindas ao curso!: Ei, bem-vindo a esta aula. Se você é um iniciante de desenvolvimento web, vamos lá, então basta entrar, e construir alguns projetos divertidos. Você veio ao lugar certo. A idéia por trás desta série é mostrar o que você pode fazer com HTML normal, CSS e JavaScript. Quando se trata de usar qualquer frameworks, qualquer caldeirão, qualquer biblioteca ou qualquer modelo, em vez disso, vamos construir tudo completamente do zero, passo a passo para mostrar como essas tecnologias gratuitas Trabalhar juntos. O projeto para esta classe é um aplicativo [inaudível] em execução, onde o usuário pode registrar quantas milhas eles percorreram por dia. Temos um campo de entrada no topo, onde podemos registrar o número de milhas e estes serão registrados como os últimos sete dias valores. Se você adicionar um segundo, isso será adicionado à direita e ele armazena os últimos sete valores que entramos. Todos esses valores são então armazenados logo abaixo. Podemos ver o número total de milhas. Este total é então dividido pelo número de entradas, para nos dar uma média também, ao longo do que está na entrada mais alta que o usuário inseriu para esta semana também. Além disso, logo abaixo, também adicionaremos um círculo de progresso, onde podemos adicionar um alvo semanal, e então esse círculo de progresso será atualizado para cada valor que o usuário adicionar. Isso nos dará um bom feedback visual de como a semana está indo também. Este projeto é criado completamente do zero. Vamos usar HTML para a interface do usuário, vamos adicionar fonte personalizada, vamos adicionar estilo, vamos aprender tudo sobre os fundamentos do JavaScript, como funções, criação de variáveis e constantes, vamos trabalhar com arrays, criar cálculos, trabalharemos com o DOM, trabalharemos com eventos, declarações condicionais e todos os fundamentos que você precisará em JavaScript. Seu círculo de progresso também será totalmente personalizado também. Vamos fazer uso de JavaScript, e também CSS para manter isso atualizado. Bem, obrigado por checar essa aula e te vejo na primeira lição. 2. Compartilhe seu trabalho em Skillshare!: Ao fazer qualquer curso, é muito importante não adquirir o hábito de acompanhar apenas para marcar outra palestra. Reserve um tempo para processar cada lição. Revise o código que você escreve e pense em como você mesmo pode abordar essas soluções. Com isso em mente, esta aula é baseada em projetos e isso lhe dá a oportunidade de realmente criar algo pessoal e único. Você não precisa se perder muito e se desviar da aula e pode até mesmo dar um passo atrás depois de terminar a aula, voltar e fazer algumas mudanças no projeto depois. Isso realmente lhe dará uma boa chance de praticar o que aprendeu na aula. Além disso, lembre-se de compartilhar seu projeto também aqui no Skillshare, e não só vou dar uma olhada, mas também inspirará outros estudantes. Mais informações sobre o projeto da turma, acesse a guia Projeto e Recursos, onde você pode não apenas fazer o upload do seu projeto, mas também ver outros projetos de classe. Com isso em mente, estou ansioso para ver o que você cria e faz o upload aqui no Skillshare. 3. Criando a interface do usuário: Este é um olhar do que vamos construir neste próximo conjunto de vídeos. Vamos construir um aplicativo de pista de corrida onde o usuário pode registrar todos os dias, quantas milhas eles percorreram. Por exemplo, poderíamos adicionar um valor para hoje, como 1.9, e isso é adicionado ao final desta matriz. cada dia podemos adicionar um valor e registraremos os valores dos últimos sete dias. Cada vez que eu adicionar valor, vamos substituir qualquer um desses espaços reservados, vamos adicionar o novo dentro daqui, e tudo isso empurrado para fora da borda aqui, então nós temos os últimos sete dias. Rolando para baixo, temos uma área onde podemos verificar todas as nossas estatísticas. Então, apenas o total, que será executado nesta semana específica, a distância média, e também o valor mais alto registrado para esta semana em particular. Bem no fundo, também podemos adicionar um alvo dentro do código onde podemos dizer quantas milhas queremos correr para aquela semana em particular. Isso é então atualizado cada vez que eu adicionar um novo valor, e então vemos este círculo de progresso agradável para baixo na parte inferior. Vamos adicionar o novo valor, e isso é então adicionado ao nosso total e também atualizar o círculo de progresso. Vamos começar neste vídeo criando a interface de usuário com HTML, e para fazer isso também podemos usar esta imagem no topo, que está no SVG. Claro que você pode encontrar o seu próprio, mas se você quiser usar o mesmo, que eu estou usando no curso, vá para este link no GitHub, que é chrisdixon161/fun-javascript-projects.com. Neste repositório, você encontrará todo o código finalizado para cada um desses projetos. Se você entrar no Running Tracker, você também verá um runner.svg. Para usar isso dentro do nosso projeto, precisamos clicar no ícone de código, e este é o código que precisamos apenas aqui. Vamos agora começar criando nosso projeto e voltaremos a isso muito em breve. Vamos para a área de trabalho. Vou criar uma nova pasta. Vou dar o nome a isto de “Running-Tracker”. Abra o código do Visual Studio e, em seguida, podemos arrastar sobre nossos projetos. A primeira coisa que precisamos é criar uma página index.html, isso vai ser para a nossa interface de usuário. Vamos criar um novo arquivo dentro da nossa pasta, este é o index.html. Se você estiver usando o código do Visual Studio, você pode usar o atalho, que é html:5, e pressionar Enter. Isso nos dará os nossos pontos de partida para a nossa página HTML. Eu também posso abrir isso no navegador clicando na guia, copiar o caminho e, em seguida, colar isso dentro do navegador. Como sempre, você pode clicar duas vezes no arquivo index.html, que também está contido dentro da nossa pasta do projeto. Trabalhando desde o topo vamos incluir este SVG logo no início. Para fazer isso eu vou criar uma seção div, que vai ter a classe de logotipo. Dentro desta seção podemos agora fazer uso do nosso SVG. Vou copiar o código do GitHub, colar isso. Descendo; a próxima coisa que precisamos para o nosso projeto é a seção de entrada. Vamos criar isso com um rótulo e, em seguida, uma entrada de número, e, em seguida, um botão para enviar este formulário. Logo abaixo da nossa seção de logotipo, ou a div wrapper, crie nosso formulário. Também não precisamos da ação, vamos começar com um rótulo. Este rótulo vai ser para uma entrada com o ID de entrada, e então o texto vai ser número de milhas hoje. Você também pode alterar isso para ser quilômetros, ou qualquer outro valor que você quer usar, que é completamente bom também e não vai afetar este aplicativo. Uma tag break, coloque isso em uma nova linha. Em seguida, a nossa entrada, que vai ter o tipo de número, o id de entrada que vai coincidir com o nosso rótulo, e, em seguida, um atributo step de 0.1, que significa que os nossos valores dentro das entradas numéricas aumentarão pelo valor de 0,1. Depois disso, uma nova tag break, para que possamos, em seguida, adicionar o nosso botão enviar. O botão precisa do tipo de envio que permitirá que este envie nosso formulário. No momento, não temos qualquer JavaScript em vigor para aproveitar os números que o usuário introduz, mas por enquanto podemos adicionar esses traços como valores de espaço reservado. Vamos fazer isso criando um wrapper para a seção, criando uma lista não ordenada, e cada um desses valores será um item de lista. Abaixo da nossa forma, uma regra horizontal apenas para dividir a seção. Os elementos de seção na classe, para que possamos usar isso dentro do CSS vai ser o EntriesWrapper. O título dos últimos sete dias. Como acabamos de mencionar, e listas desordenadas para armazenar todos esses valores, que também podem ter um id, para que possamos direcionar isso dentro do JavaScript. Por enquanto, nosso valor de espaço reservado será simplesmente um traço. Já que trabalhamos com os sete dias anteriores, vou duplicar isto para os itens da lista de nível 7, e vamos verificar isto. Em seguida, temos uma seção de dados que vai ser todas as estatísticas para a nossa aplicação. Vamos criar uma seção e três divs separadas, e cada uma dessas divs terá um título e também um valor. Nós também podemos escrever isso em uma nova seção em nosso HTML. Uma seção pode ter uma classe de dados e, em seguida, nossa primeira div para nossa seção total. Mas cada um desses títulos à esquerda eu vou embrulhar isso em um p elementos, e, em seguida, uma extensão sobre a direita. O primeiro p é para o texto do total e, em seguida, dois pontos. A primeira extensão, você pode até viver está vazia, ou colocar em um valor de espaço reservado, isso também precisará de um id, então vamos atualizar isso em JavaScript. Depois desta div, podemos então concentrar-nos em nossa seção de distância média. Nova div, os elementos p, e o texto para este é a distância média. A extensão para este também vai ter um id único, que vai ser a média. Novamente, você também pode adicionar um número de espaço reservado, mas isso é completamente opcional. A terceira seção é para o alto valor semanal. Nossos elementos p, nós fomos esta semana alta. Nosso span com o id, que vai ser alto, e, em seguida, um valor padrão. Vamos dar uma olhada nisso. A maioria da interface do usuário está agora no lugar, mas nós só precisamos dar uma olhada na parte inferior e, em seguida, adicionar nosso círculo de progresso. Todo esse círculo de progresso vai depender do JavaScript e também do CSS, que vamos adicionar em vídeos futuros, mas por enquanto podemos criar um rótulo e também uma seção div, que possamos usar isso mais tarde no curso. A seção final na parte inferior, você pode adicionar uma classe de progresso. Em seguida, o nosso nível três está a subir no topo, que é alvo semanal. Esta seção de destino semanal terá também dois valores separados. Teremos o número total de milhas para esta semana em particular, e também um corte seguido pelo alvo. Para fazer isso, eu vou adicionar dois elementos de span separados. O primeiro, isso vai ter um id do total de progresso, um valor de espaço reservado de zero após a extensão, adicionar uma barra direta. Em seguida, um segundo elemento span, vamos adicionar um valor padrão de 25, e também um id que vai ser igual ao alvo. Depois de ambos esses vãos, também precisamos adicionar o texto de milhas logo no final após nosso último período. Vamos adicionar isso em sua própria linha para que seja mais legível, lá vamos nós. Certifique-se também de que tudo isso está contido dentro do cabeçalho de nível três, salve e recarregue o navegador. Nós temos um título, e a última coisa a fazer abaixo do título de nível três é adicionar uma nova div, que será para o nosso círculo de progresso. Podemos adicionar isso apenas com uma classe de wrapper círculo progresso. Como mencionamos anteriormente, não precisamos fazer mais nada com esta seção, isso simplesmente vai ser um espaço reservado div, vamos lidar com isso mais tarde usando CSS e também JavaScript. Por agora vamos chamar este vídeo feito, nossa interface de usuário está agora no lugar, e no próximo vídeo vamos torná-lo muito mais bonito usando CSS. 4. Fontes e estilização: Vamos agora tornar este aplicativo um pouco mais bonito usando alguns CSS e também adicionando uma fonte do Google. A primeira coisa se abrirmos a barra lateral e entrarmos em nosso projeto, vamos criar o styles.css e, em seguida, vincular isso na cabeça do nosso index.html. Eu já escolhi uma fonte do Google Fonts, mas você pode escolher qualquer um diferente que você preferir. Este é o que eu vou usar, que está na página inicial, mas você pode escolher ou procurar um valor diferente no topo. Para incluir isso, assim como o projeto anterior, vamos clicar sobre isso e, em seguida, podemos selecionar qualquer um dos pesos da fonte. Eu vou para o 300, o 500 e uma versão arrojada 700. Incorpore, em seguida, vamos copiar este link que você pode colocar em nossa página de índice, logo acima de nossa folha de estilo, e, em seguida, nossa família de fontes é colocada em nosso styles.css. Podemos adicionar isso na raiz sob o elemento HTML. Cole isso em e nós também podemos selecionar um tamanho de fonte raiz. Eu vou para 10 pixels. Você também pode definir uma cor de fundo. Isso vai ser para a seção por trás do nosso conteúdo. Se esticarmos o navegador na versão final, esta é a cor que vemos fora da seção do corpo. O volume que vou usar é 2d3740. Vamos verificar se isso está funcionando e nossa folha de estilo foi vinculada corretamente. Recarregue isso e vemos a cor de fundo, vemos uma fonte diferente e também o tamanho da fonte entrou em vigor. A razão pela qual vemos todo este fundo em vez de apenas no exterior, é porque ainda não definimos uma cor para a nossa secção do corpo. Vamos fazer isso agora. Primeiro de tudo, algum preenchimento que vai lhe dar algum espaçamento em torno de nossas bordas de 1rem, que é 10 pixels, em seguida, um fundo para a seção. O volume que vou usar é 1c262f. A fonte é um pouco difícil de ler com este fundo escuro, então também podemos mudar a cor da fonte. Podemos usar novamente um valor hexadecimal, assim como usamos acima, ou também podemos usar uma cor RGB, basta selecionar qualquer um dos nossos valores. Uma cor RGB é uma maneira de combinar valores de vermelho, verde e azul para criar uma cor específica. Eu vou para um valor vermelho de 230, 225 para o verde e 225 para o azul. Isso vai nos dar essa cor branca clara, que entrará em vigor para toda a nossa seção do corpo. Para saber mais sobre esses valores de cor específicos, podemos fazer uma pesquisa para o seletor de cores HTML. Há vários seletores de cores que você pode ver online, ou este padrão que vem com o motor de busca. Podemos ver para qualquer sombra que selecionamos, tem um valor vermelho, verde e azul, e também o valor hexadecimal equivalente que vimos logo acima, juntamente com alguns valores diferentes aqui também. Essas são apenas algumas maneiras diferentes que você pode usar para selecionar valores de cor. Próximo de volta na seção do corpo, a largura de 90 por cento apenas para restringir a largura total do projeto, e também centralizar isso com margem zero auto. Lembre-se, se não tivéssemos esse valor automático, isso será empurrado. Vamos verificar isto. Isso será empurrado para a esquerda do projeto. Mas agora com o valor automático à esquerda e à direita, isso agora dividiu-se igualmente em ambos os lados. Após o corpo, vamos para a seção do logotipo, que está no topo. Podemos sensores isto com o centro de alinhamento de texto. A cor de preenchimento atual da nossa imagem na parte superior não se destaca muito bem neste fundo mais escuro. Assim como vemos na versão final, também podemos mudar isso. Também podemos direcionar isso no CSS, ou podemos fazer isso em nosso index.html. A maneira de fazer isso dentro do nosso elemento SVG, é dar uma olhada na seção caminho. Cada uma dessas seções tem um atributo de preenchimento que podemos alterar. Eu quero mudar isso para ser um valor de cinza, atualização, e agora a seção da cabeça é cinza, e nós também podemos fazer o mesmo para a seção do corpo. Voltando para a nossa folha de estilo, vamos agora passar para a seção de formulário, que vai ser o wrapper para a nossa etiqueta, as entradas de formulário e também o botão de enviar. Tudo o que precisamos fazer para este wrapper é definir a linha de texto no centro. Precisamos fazer o rótulo um pouco maior, então vamos apontar isso. O tamanho da fonte, eu quero ir para 1.8rems, que é equivalente a 18 pixels para baixo para o número de entrada. Primeiro alvo todas as entradas de formulário, em seguida, dentro dos colchetes, podemos selecionar nosso tipo particular de número. Nenhum tipo de número não é particularmente importante para este projeto, uma vez que não temos múltiplas entradas, mas desta forma estamos cobertos quatro um projeto foi crescer em uma fase posterior. Por padrão, a entrada de formulário não herdará o resto da família de fontes. Podemos ver que esta é uma fonte completamente diferente do resto do projeto. Família Font, podemos definir isso para ser herdado. Vamos agora herdar o estilo de fonte do resto do projeto. O fundo, para manter as coisas consistentes. Vamos também pegar a mesma cor RGB, que usamos para o texto mais claro. A largura de 80 por cento. Alguns espaçamento na parte superior e inferior, 1rem e, em seguida, um valor de zero à esquerda e à direita. Para tornar a entrada de formulário real maior também, podemos adicionar algum preenchimento dentro. 0.8rems na parte superior e inferior e, em seguida, zero na esquerda e direita. Remova a borda padrão com borda none, um tamanho de fonte para tornar isso um pouco maior quando você usa entradas ou valor. Vamos para o nosso 1.2rems e também definir o text-align para ser centralizado. Movendo-se para baixo, a próxima coisa que temos é este formulário enviar botão. Para fazer isso exatamente como a versão final, vamos adicionar uma cor de fundo. Nós vamos adicionar um raio limite de 50% para tornar este totalmente arredondado, juntamente com a definição da largura e altura. Vamos mirar o nosso elemento inferior. Novamente, também precisamos herdar a família de fontes. O tamanho da fonte um pouco maior e também o peso da fonte vai ser mais ousado também. Para tornar este um fundo arredondado, nós também vamos definir uma largura e também uma altura igual. Eu vou para oito pixels e também um valor correspondente para a altura também. Vamos ver como isso está olhando dentro do navegador. Isso é igual largura e altura, mas também precisamos arredondar os cantos com o raio da borda e também remover quaisquer bordas padrão. Vamos começar com borda nenhuma, e depois o raio limite, que tem um valor de 50 por cento. Para dar a isso a cor azul que vemos na versão final, precisamos definir a cor de fundo. Eu quero ir para um valor hexadecimal que é igual a 0ad9ff, seguido por alguns valores de margem. No topo, 0.5rems no topo, zero à direita, 1rem na parte inferior e, em seguida, zero à esquerda. Passando para os nossos últimos sete dias valores, isto está dentro de outra lista. Remova o preenchimento padrão com o valor de zero, e também precisamos remover os marcadores de item de lista e, em seguida, podemos definir isso para atravessar a página, definindo o tipo de exibição para ser flexível. Remova os marcadores com o estilo de lista para ser nenhum deixando-nos com os traços que temos para cada item da lista. Olhando para a versão final, também temos algum espaçamento igual entre cada um desses itens, e podemos fazer isso definindo justify conteúdo para ter espaço entre eles. Na lista está um passo na direção certa para estilizar a seção. A próxima coisa que precisamos fazer é direcionar cada um de nossos itens da lista. Começando pelas fronteiras, cada um desses itens se destaca mais. Vamos para um valor de um pixel, uma linha sólida e, em seguida, algum preenchimento dentro desses itens de lista para adicionar algum espaçamento. Um rem na parte superior e inferior e 1,5 à esquerda e à direita. Dentro desta seção, vamos direcionar o título de nível três, aumentar o tamanho da fonte e também adicionar algum preenchimento para dar-lhe algum espaçamento, assim como na versão final. Para fazer isso muitas vezes no index.html, temos uma seção com a classe de wrapper entradas. Vamos mirar isso. Alguns podem trabalhar com o nosso título de nível três e também adicionar algum espaçamento às nossas seções. Esta é uma aula, então precisamos dos pontos. Primeiro de tudo, podemos adicionar algum preenchimento para dar a isso algum espaçamento na parte superior e inferior de 1rem, zero à esquerda e à direita, e, em seguida, também definir o tamanho padrão da fonte para ser 1.6rems. Em seguida, o título de nível três que é para o título dos últimos sete dias. Podemos remover qualquer margem padrão que o navegador fornece, e você pode ver que isso remove a margem padrão do topo do nosso cabeçalho. Podemos empurrar isso para o centro, com texto alinhar. Isso também é muito ousado, então vamos mudar o peso da fonte para ser mais leve. Abaixo disso, temos todo o resto das informações do nosso aplicativo. Temos o total, as distâncias e também a altura semanal. Isso é tudo embrulhado em uma seção com a classe de dados. Movendo-se para baixo, vamos mirar isso. Primeiro de tudo, podemos definir o tamanho padrão da fonte para ser um pouco maior, então 1.4rems. Cada uma de nossas seções é cercada dentro de um div dois, então podemos segmentar .data e depois div. Vamos começar com a cor de fundo para cada uma de nossas seções. O valor que vou usar será 141c22. O tipo de exibição será igual a flex. Podemos fazer uso da flexbox para centralizar nossa etiqueta e também o valor na mesma linha, além de também adicionar algum espaço no meio. Primeiro colocamos estes em sua própria linha com um centro de item de linha, e agora está no espaçamento entre eles, podemos usar justify conteúdo. Isso agora empurra todos os nossos valores para a direita. A próxima coisa a fazer é adicionar algum preenchimento. Estes não são contra as bordas esquerda e direita e também alguma margem para o lado de fora de nossa div, então todas as três seções têm algum espaço no meio. Primeiro de tudo, a margem na parte superior e inferior, eu vou usar 0.5rems, zero na esquerda e direita, e então algum preenchimento dentro de nossos divs. Nós já temos algum espaçamento na parte superior e inferior, então vamos adicionar um pouco de espaçamento à esquerda e à direita. Zero e depois 1rem. Esta é agora a maioria do estilo para a nossa aplicação. Só precisamos direcionar a seção na parte inferior mais tarde quando adicionarmos o círculo de progresso. Mas, por enquanto, vamos passar para o próximo vídeo e adicionar algum JavaScript ao nosso projeto, que possamos atualizar nossas entradas. 5. Adicionando novas entradas: O estilo para o nosso projeto está praticamente no lugar, há apenas um pouco para voltar mais tarde. Quando adicionamos esta seção para baixo na parte inferior. Bem, por agora, porém, vamos avançar para adicionar em nosso arquivo de script para introduzir algum JavaScript. Em particular, neste vídeo, capturaremos a entrada do usuário e, em seguida, atualizaremos nossos últimos sete dias. A primeira coisa que precisamos fazer dentro do nosso projeto é criar um novo arquivo, que será este script.js. A primeira coisa a fazer é ligar isso no fundo, logo acima de nossa seção de fechamento e corpo. Podemos ligar isso com os elementos do script. Isso também está no projeto [inaudível] juntamente com nosso índice. Podemos apenas fazer referência a isso com script.js. Vamos tirar um momento para pensar exatamente o que queremos fazer aqui. Temos uma entrada de formulário apenas aqui onde o usuário irá adicionar o valor. Queremos ouvir todas as inscrições de formulário. Uma vez que isso acontece, não queremos executar uma função. Vamos começar com isso de neste script.js. A primeira coisa a fazer é pegar uma referência à nossa forma. Para esta seção de formulário, agora precisamos ouvir o evento de envio. O evento de envio será chamado cada vez que o usuário acessar entrar dentro desta entrada ou clicar em nosso botão de envio. No script, vamos criar uma referência a este formulário. Forma Const. Todas as referências do formulário sempre permanecerão as mesmas. Isso pode ser usado como uma constante dentro de um destino, o documento completo. Em seguida, podemos usar o seletor de consulta. Seletor de consulta é uma maneira de capturar elementos HTML, e podemos capturar qualquer um dos elementos em nosso HTML. A maneira como fazemos isso é exatamente a mesma que nossas folhas de estilo. Se direcionarmos qualquer elemento, referenciamos os elementos pelo nome. Se for uma classe, usamos o ponto seguido pelo nome da classe. Se fosse um ID, usaríamos o prefixo hash. Desde a nossa forma, é simplesmente um elemento de forma. Podemos mirar isso. Em seguida, queremos adicionar um ouvinte de eventos. Os eventos nos quais você deseja ouvir é o evento de envio. Então queremos executar uma função. Nós adicionamos o nome da nossa função como o segundo valor separado por uma vírgula. O nome da função vai ser um identificador de envio. Ainda não criamos essa função de envio de identificador. Logo acima do nosso ouvinte de eventos, podemos criar isso agora. Handlesubmit vai tomar informações do evento que é passado para a função cada formulário de tempo foi enviado. A primeira coisa que queremos fazer é pegar essas informações de evento e, em seguida, chamar previne default. Impedir padrões impedirá o comportamento padrão do envio do formulário que é recarregar o navegador. Para este caso de uso, não queremos atualizar o navegador, uma vez que todas as nossas informações serão perdidas. Em vez disso, o que queremos fazer é realmente capturar as entradas do usuário deste campo aqui. Novamente, vamos usar QuerySelector. Isto vai agarrar o nosso formulário de entrada. Poderíamos pegar isso usando o nome de entrada ou também comprar o ID de entrada. Então document.QuerySelector. Assim como com CSS, direcionamos isso com o hash e, em seguida, o nome do ID. Podemos então pegar o valor e também armazenar isso dentro de uma variável ou uma constante. Se você se lembra desde cedo quando criamos a calculadora Tip, um dos problemas que tivemos quando pegamos as informações enviadas pelo usuário foi o valor veio na forma de string. Como trabalhamos com números, queremos converter isso para ser um tipo de número. Isso poderia ser isso, eu vou converter esse valor de string para ser número, ignorando isso para a função de número JavaScript. Antes de seguir em frente, vamos fazer um log de console com o valor de entrada e verificar se tudo está funcionando bem. Clique com o botão direito do mouse em Inspect e podemos entrar no console. Clique na guia console. Vamos adicionar alguns números aleatórios aqui dentro. Então 1.2, 6.4, o que significa que agora estamos ouvindo com sucesso para um evento enviar e também capturar a entrada do usuário. Há também algumas maneiras de melhorar isso se passarmos para nossa entrada e digitar o valor de zero, ainda vemos que o valor de zero ainda está registrado. Isso pode causar um problema se o usuário foi pressionado enter por acidente antes de inserir seu valor. Além disso, cada vez que um valor é adicionado, também queremos limpar este formulário para que ele fique disponível para a próxima entrada. Voltar para a nossa função, podemos usar uma instrução if para verificar se nenhuma entrada foi feita. Use o ponto de exclamação. Isso significa que se nenhuma entrada estiver presente ou se o valor for falso. Em seguida, podemos usar a palavra-chave return para sair da nossa função, uma vez que nenhum valor foi inserido. A próxima coisa a fazer é limpar a entrada do formulário cada vez que um valor foi enviado. Primeiro de tudo, vamos pegar toda a forma. Então document.QuerySelector. Podemos pegar nossa forma. Em seguida, podemos chamar o método de reset, que vai limpar todas as nossas entradas de formulário. Insira o valor. Agora, quando inserimos um valor e apertamos Enter, Vou formar entrada é limpo. Com isso cuidado, a próxima coisa que queremos fazer é realmente armazenar todos os valores do usuário dentro de uma matriz. Vou inicializar nossa matriz chamada entradas e definir isso igual a uma matriz vazia. Observe aqui que usamos a palavra-chave let em vez const porque queremos atualizar os valores das entradas. Se isso foi dito para ser const, nós não será capaz de obter este array empurrando novos valores. Agora, a maneira de realmente adicionar um novo valor dentro de nossa matriz vazia é primeiro direcioná-lo pelo nome da variável de entradas. Em seguida, uma matriz tem um método push que nos permite empurrar um novo valor para o fim da nossa matriz. O valor que você deseja empurrar é a nossa entrada, que foi capturada a partir de nossa entrada de usuário. Vamos testar isso com um registro de console. Agora podemos produzir o valor das entradas que é a nossa matriz. Recarregar. Insira um par de valores aqui dentro, vamos ver o que acontece. Isso agora atualizará nosso array com as entradas do usuário. Com tudo isso agora funcionando, vamos remover nosso log do console e poderíamos continuar adicionando mais código a este método HandleSubmit. Mas para manter isso mais limpo, eu vou criar uma nova função que vai atualizar nossa interface de usuário. Cada um desses itens de matriz será empurrado para o final de nossa lista não ordenada. Vamos criar uma nova função sobre o topo, e eu vou chamar isso de AddNewEntry. Eu também vou chamar essa função cada vez que o usuário insere uma nova entrada, também, analisando o valor da entrada. Este valor de entrada será então recebido dentro de nossa função, e eu vou chamar este newEntry, mas o valor será exatamente o mesmo. Primeiro de tudo, vamos fazer um log de console com o valor de NewEntry apenas para verificar se estamos recebendo isso corretamente em nossa função. Adicione um valor. Está bem. Bom. Agora nossa função tem acesso a cada uma dessas entradas de usuário. Uma das grandes coisas sobre o uso do JavaScript é que também podemos usá-lo para criar novos elementos em nosso DOM. Se formos para o nosso index.html, até agora temos criado todos esses elementos dentro da nossa página HTML. Mas também podemos usar JavaScript para criá-los também. A maneira como vamos usar isso nesta função é que vamos segmentar esta lista não ordenada, e, em seguida, para cada novo número que o usuário adiciona, vamos então criar um novo item de lista. A maneira de fazer isso é usando document.createElement. Ao criar um novo elemento HTML, podemos usar o mesmo nome do elemento como a tag de abertura. Podemos criar uma lista não ordenada, um item de lista, um título de nível 3, ou até mesmo uma seção. Nós vamos estar usando um item de lista, que possamos empurrar isso para o final da nossa lista. Vamos começar isso dentro de uma constante chamada ListItem, e, em seguida, também precisamos de um valor para ir entre nossos elementos. No momento, isso só vai criar um item de lista, que é exatamente assim. Mas também precisamos criar algum conteúdo de texto dentro. Fazemos isso em JavaScript com Document.CreateTextNode. Podemos analisar em qualquer coisa, como uma string de texto. Mas no nosso caso, queremos analisar na nova entrada, então também armazenar isso em uma constante também, e vamos chamar isso de valor de lista. Isso agora nos deixa com os elementos reais e o conteúdo. Mas estes são dois nós separados. Precisamos realmente adicionar o nosso valor de lista ao nosso item de lista. A maneira que podemos fazer isso é agarrando nosso ListItem e, em seguida, usamos AppendChild. Isso vai adicionar um nó NewChild. Em NewChild nó, um que queremos adicionar é o ListValue. Aqui, o que estamos basicamente fazendo é criar um item de lista com esta primeira linha. Então, com a segunda linha, estamos criando um valor de nossa nova entrada. Se o usuário inserir 2.7, isso será armazenado em ListValue. Em seguida, acrescentamos neste ListValue em nosso ListItem. Isso vai pegar nosso valor e colocar isso dentro de nossos elementos. Isso agora nos deixa com um item de lista totalmente construído. Este item de lista agora precisa enviar para a nossa lista não ordenada. A maneira como podemos fazer isso é primeiro direcionando nossa lista não ordenada, encontrar o ID de entradas. Fora de nossa função eu vou criar uma constante, que é chamada de nossa EntriesWrapper. Isso será igual a document.querySelector, com o ID de entradas. Esta é a nossa lista não ordenada, e agora precisamos empurrar o ListItem, que temos aqui. A maneira como podemos fazer isso é muito semelhante a esta linha aqui. Vamos pegar nossa lista desordenada. Mais uma vez, usando AppendChild, adicionando em nosso ListItem completo. Isso agora levará nosso item de lista adicionar isso até o final de nossa lista não ordenada criando um novo valor no final. Vá para o navegador e recarregue, e adicione alguns valores, 1.4, e estes são todos agora adicionados ao final da nossa lista. Isto está tudo bem. Isso agora significa que nossas entradas em nosso trabalho estão sendo enviadas para nossa matriz, e também estamos criando um novo item de lista e atualizando o DOM. Só temos de fazer uma coisinha antes de encerrarmos este vídeo. Estes três novos valores que acabamos de adicionar serão adicionados às sete entradas existentes. Só queremos manter um registro dos últimos sete dias. Cada vez que adicionamos um valor ao final da matriz, também queremos remover o primeiro valor também. A maneira como fazemos isso em JavaScript é praticamente o oposto do que acabamos de fazer aqui. Aqui estávamos pegando a lista não ordenada e anexando um elemento newChild. Em vez disso, queremos fazer o contrário, que é remover uma criança. Vamos fazer isso no início da nossa função AddNewEntry. Pegue o EntriesWrapper, que é a nossa lista desordenada, e então podemos chamar RemoveChild. Se simplesmente chamarmos removeChild, JavaScript não saberá exatamente qual elemento filho queremos remover. Por elemento filho, queremos dizer cada um desses itens da lista. Mas, felizmente, JavaScript nos fornece uma maneira fácil e simples de direcionar os primeiros elementos filhos. Esta é uma propriedade chamada FirstChildElement. Se eu passar para o nosso script, podemos direcionar o EntriesWrapper, que é toda a nossa lista não ordenada, e, em seguida, selecionar o FirstElementChild. Vamos agora salvar este arquivo e voltar para o navegador e verificar se isso está funcionando. Vamos adicionar alguns valores, 4, 5, 6, 7. Agora, para cada elemento que adicionamos, vemos que ainda temos sete dias no total. Vamos adicionar o número 8, e vemos que o valor de um foi removido do início da nossa lista. Vamos tentar mais uma. O valor de nove. Isso remove o valor de dois. Tudo isso pode parecer bastante complexo se for algo que você não fez antes, mas tudo o que estamos fazendo é adicionar um novo item de lista ao final aqui e, em seguida, remover o primeiro. Esta é agora uma parte realmente importante de nossa aplicação de caminhão de corrida agora completa. Em seguida, vamos descer para a nossa seção inicial, onde adicionaremos o total e também a distância média. 6. Calculando o total e a média: Vamos começar a trabalhar agora em algumas dessas estatísticas lá embaixo. Este vídeo, vamos nos concentrar em calcular o total e também a distância média. Agora, para fazer isso, vamos fazer uso de um método de matriz JavaScript chamado reduce. Vamos dar uma olhada rápida em como podemos usar isso. Se você não usou o método reduzido antes, ele pode parecer bastante complexo, mas realmente não é muito difícil de usar. O conceito principal por trás de um método de redução, é que ele vai levar todos os elementos, todos os valores que estão dentro de uma matriz, no nosso caso, vai ser todas as nossas distâncias, e então nós vamos reduzi-lo em um valor único. No nosso caso, vamos reduzir todos os nossos valores adicionando todos juntos. Isto vai dar-nos o nosso total de que precisamos apenas aqui, e então podemos também fazer uso disso na distância média dividindo este total pelo número de entradas. De volta ao redutor, vamos criar uma função como esta. O exemplo que vemos aqui é exatamente como precisamos usá-lo. Vamos adicionar todos os valores na matriz. Fazemos isso chamando um método que adiciona o valor atual ao total anterior. Para o primeiro elemento dentro da matriz que é um, ele irá então chamar este método, mas desta primeira vez nós só temos o valor atual, nós não temos o total, então o redutor será igual a um. Para o segundo valor que é dois, o valor atual de dois será adicionado ao total de um, resultando em um valor de três. Continuando, o valor de três será então adicionado ao total atual, fazendo este seis. O valor de quatro, em seguida, completa o redutor, resultando em um valor total de 10. Voltar ao nosso script.js, vamos começar criando uma função que vai ter o mesmo comportamento. Eu vou fazer o meu logo acima do nosso handleSubmit. A função que eu vou chamar redutor leva em nossos dois valores que é o total, e então o valor atual. Vou chamar isso de um total em vez de acumulador, já que parece mais claro. Tudo que esta função vai fazer é retornar o novo valor, que é equivalente ao total que foi adicionado ao valor atual. Assim como uma nota lateral aqui, estamos adicionando o valor atual ao total, mas você poderia fazer outras coisas, como tirá-lo também. A ideia é exatamente a mesma. O redutor destina-se a reduzir nossos valores de matriz em um único valor. A próxima coisa a fazer é criar uma nova função logo abaixo, e eu vou chamar isso de CalTotal. Esta função vai pegar todas as nossas entradas, usar um método de redução e, em seguida, atualizar nosso valor apenas aqui. Para fazer isso, ele também precisa levar em todas as nossas entradas atuais, que está dentro de nossa matriz. Podemos então pegar nossa matriz de entradas, que é apenas valores armazenados dentro aqui. Podemos então chamar o método reduzido, que acabamos de olhar no site da Mozilla, e então podemos passar em nossa função redutor. Isso nos dará o nosso valor total único, e também podemos armazenar isso dentro de uma constante. Agora eu tenho esse valor, vamos atualizar o DOM. Os dois valores que queremos atualizar se dermos uma olhada no nosso projeto é a seção total apenas aqui, e também temos um total que é atualizado para nossas metas semanais. Vamos pegar os documentos, podemos pegar um elemento pelo id. O primeiro que queremos pegar é para o total apenas aqui, rolar para baixo até a seção de dados, e temos um span com o id do total. Podemos então definir o conteúdo InnerText para ser igual ao nosso valor total. Vamos duplicar essa linha, e também podemos usar isso para atualizar os alvos semanais. Agora, na parte inferior da nossa página de índice, este é o ProgressTotal que atualmente tem o valor de zero, podemos remover o espaço reservado, atualizar nosso id. Agora temos nossa função que calcula o total. Na verdade, deve ser apenas CalcTotal. Agora toda vez que nós manipulamos Submit para baixo na parte inferior, agora queremos chamar essa função. Quando chamamos isso, também podemos passar nas entradas. As entradas foram o valor da nossa matriz no topo aqui, ou podemos deixar isso vazio para este caso particular, porque esta é uma variável global. Quando declaramos uma variável fora de qualquer uma dessas funções, isso significa que isso está agora no escopo global, que significa que podemos acessar o valor de entradas em qualquer lugar dentro do nosso programa. Se a nossa variável foi declarada dentro de qualquer função em particular, só poderíamos acessá-la dentro dessa função. Então, já que isso é global, podemos acessar isso dentro desta função e também esta aqui também. Com isso no lugar, agora vamos salvar isso e mais para o navegador. Vamos adicionar alguns novos valores. Um e dois, esses dois somados nos dão o total de três, e também para baixo em nosso alvo também. Vamos adicionar mais um, e nossos totais são agora atualizados. Com este trabalho, agora vamos passar para a distância média. A distância média vai ser bastante simples porque já temos nossa função redutor no lugar. Tudo o que precisamos fazer é criar uma nova função para cuidar disso. Vou chamar isto de Calcaverage. A maneira como podemos calcular a média é primeiro, pegar todos os valores totais que você adicionou juntos. Sabemos como fazer isso a partir de nossa função logo acima. Então podemos dividi-lo por quantas entradas temos atualmente nos dando a média. Vamos começar isso dentro de uma constante chamada média. Este igual à nossa matriz de entradas, podemos novamente, chamar o nosso método de redução, passando em nossa função redutor. Isso nos dará o total, e a próxima coisa que precisamos fazer é dividir isso pelo número de entradas. Podemos fazer isso pegando nossa matriz de entradas e, em seguida, chamando.length. O próximo passo é atualizar o DOM com document.getElementById. O Id que você deseja pegar no index.html, é este id médio apenas aqui. Assim como acima, também vamos definir o InnerText para ser igual à nossa variável média de cima. O último passo é realmente chamar esta função, Calcaverage. Isso também não precisa de nada passado para ele, uma vez que ele está apenas aproveitando a matriz de entradas, que temos no topo. Salve este arquivo e desligue para o navegador. Agora, se adicionarmos dois valores diferentes, vemos o total de quatro. O total de 4 dividido por 2 nos dá uma média de 2. Vamos tentar mais um, ir para 10. Nossa média agora está atualizada. Apenas mais um toque final que podemos fazer para este projeto para esses dois valores é arredondar estes para uma casa decimal. No momento, obtemos um número arredondado de 14, mas se fizermos algo como 2.7, mas eu quero manter isso consistente e garantir que todos os valores são para uma casa decimal. Assim como anteriormente, a maneira de fazer isso é usar ToFixed. Vou definir isso para ser uma casa decimal, então passando o valor de um. Isto vai ser para o nosso total, e podemos fazer o mesmo para a nossa média também. Nós precisaríamos embrulhar isso dentro de nossos colchetes e, em seguida, chamar ToFixed no total. Se não embrulhássemos isso entre parênteses, ToFixed seria chamado no entries.length em vez da soma total. Vamos testar isso. Um e cinco nos dando um total de seis, que tem um valor de 6.0 agora. A média, vamos adicionar mais alguns valores. Podemos agora dizer que nosso total e média é arredondado para uma casa decimal. Nós também podemos fazer o mesmo para nossas entradas apenas aqui. Podemos fazer isso acima, onde criamos nossas novas entradas, e também aqui onde adicionamos a nova entrada como nossa nota de texto. Assim como antes, também podemos chamar ToFixed passando no valor de um e agora se adicionarmos algumas entradas, vemos estes arredondados para uma casa decimal. Este é agora o nosso total e a média agora cuidada, e no próximo vídeo, vamos dar uma olhada no gol semanal, e também no máximo semanal. 7. Mais alto semanal e objetivos: Agora temos os valores totais e também a distância média. Agora queremos passar para o cálculo do valor mais alto dessa semana, e também atualizar nosso objetivo para baixo também. Então, para fazer isso, vamos voltar para o nosso script.js e podemos criar uma função para calcular isso. O nome desta função será WeeklyHigh, e tudo o que precisamos fazer é calcular o valor mais alto que foi adicionado em nossa matriz de entradas. Armazene isso em uma constante chamada alta. A maneira que podemos fazer isso é pelo uso de um JavaScript mau funcionamento fornece que é chamado de matemática. Dentro daqui podemos passar em diferentes valores, como quatro, 12 e seis. Agora, se fizermos um log de console para o valor de alta, devemos ver que o valor de 12 é saída. Vamos chamar isso dentro do lado de nossa função handleSubmit, e podemos verificar se isso está funcionando no console. Podemos acrescentar qualquer valor aqui dentro. Pressione Enter, e veremos o valor de 12. Mas, em vez disso, queremos pegar o valor mais alto de nossa matriz de entradas. Vamos encontrar Sim, podemos passar em nossa matriz de entradas e verificar isso está funcionando. Então, cinco, seis e um. Isso agora nos dá um problema dentro do console. Então a razão pela qual isso está acontecendo é porque Math.max esperará uma série de números. No entanto, estamos passando uma matriz de entradas. Então nós efetivamente fazemos em algo assim. Em vez disso, o que queremos é extrair os valores reais de dentro da nossa matriz, para que se pareça mais com isso. A maneira que podemos fazer isso é usando o operador de propagação JavaScript, que é os três pontos. Isso irá então extrair todos os valores dentro de nossa matriz de entradas e isso agora deve funcionar dentro do console. Agora terá o alto valor, agora podemos atualizar o DOM. Então document.getElementByID, o ID que queremos, se formos para a página de índice, é o valor de alta. Vamos definir o texto interno, que vai ser igual à nossa variável. Isso está fora, então o valor de um, cinco, vemos que o máximo semanal é um valor de cinco. Sete, isto está a ser actualizado. Se adicionarmos os valores mais baixos que é três, isso ainda tem o alto valor de sete. Em seguida, também podemos tornar nosso alvo semanal mais dinâmico, controlando isso a partir de nossos scripts. Não precisamos fazer isso por uma função, podemos fazer isso assim que nosso script for carregado. Então vamos criar uma variável no topo ou uma constante. Vou chamar isso de nosso objetivo. Defina isso para qualquer valor como 25. Podemos então usar um seletor de consulta ou getElementByID para atualizar nosso destino. O ID de destino e, em seguida, precisamos definir o em um texto para ser igual ao nosso objetivo. Também podemos remover o valor de espaço reservado de 25 e também verificar se isso está funcionando no navegador. Não temos nada para obter esse objetivo a partir da interface do usuário. Eu codifiquei isso como um valor dentro do script. Mas, claro, se você quiser um pequeno desafio, você pode ir em frente e adicionar isso ao projeto para que possamos ser atualizados pelo usuário. A maior parte da funcionalidade está agora em vigor. A parte final que vamos fazer, se olharmos para a versão final, é criar este círculo de progresso na parte inferior. 8. Círculo de progresso: Bem-vindo de volta e a este vídeo final deste projeto. Este vídeo é sobre se concentrar em nosso ProgressCircle, que vamos criar, assim como na versão final, aqui mesmo. Cada vez que o usuário inserir um valor no campo de número, como este, o destino semanal será então atualizado e isso será convertido em uma porcentagem para que possamos atualizar o ProgressCircle. Agora, estou ciente de que há muitas maneiras diferentes de fazer isso. Podemos usar coisas como o Canvas, e há muitas opções mais complexas que podemos usar. No entanto, eu tentei manter isso o mais simples possível para este projeto. A maneira que vamos fazer isso é fazendo uso de uma função CSS chamada o gradiente cônico. A maneira como isso funciona é criar um gradiente de cor que é transitado em torno do ponto central. Aqui podemos ver que temos a primeira seção, que é vermelha, e esta é de 0-6 graus, a seção laranja então continua de 6-18 graus, então temos a seção amarela até 45 graus e essa coisa continua redonda. Se rolarmos para baixo, podemos ver a diferença entre o gradiente cônico e o gradiente radial. O tipo cônico é mais adequado às nossas necessidades, já que vamos fazer uso dessa rotação para criar nosso ProgressElement. O gradiente radial, por outro lado, fornece a transição para fora do centro, criando esses anéis que não são realmente muito úteis para o nosso círculo. Vamos começar de novo no index.html. No início, adicionamos um wrapper para esta seção e, em seguida, criamos uma seção de tarefas. Aqui dentro vou criar duas novas divs. Este primeiro vai ser o div real para o nosso círculo. Então eu vou dar a este um ID de ProgressCircle. Em seguida, ao lado dentro eu vou adicionar uma segunda div. Isso terá o ID do ProgressCenter. A razão para esta seção ficará mais clara muito em breve. Primeiro de tudo, vamos direcionar toda essa seção que está na parte inferior, começando com o nosso texto. Isso está contido dentro da seção de progresso. Vamos salvar isso e ir para o nosso styles.css. Bem no fundo, podemos começar por apontar a seção de progresso. Podemos alinhar o texto no centro e também adicionar algum preenchimento na parte inferior. Em seguida, o texto está contido no cabeçalho de nível 3. Vamos direcionar o progresso h3, tamanho da fonte de 1.6 rems, e também este peso da fonte, vamos definir isso para ser mais leve. Em seguida, podemos começar a trabalhar em nosso ProgressCircle. Então temos o invólucro externo, que é ProgressCircleWrapper. Vamos pegar isso, definir o flexbox e, em seguida, justificar o conteúdo para estar no centro. Voltar à nossa folha de estilo. Adicione isso. Eles podem usar todo o flexbox, para que possamos justificar nosso conteúdo no centro. Isto vai colocar o círculo assim que o criarmos no meio da nossa seção. Em seguida, temos o ProgressCircle em si, que vai ter o gradiente cônico. Voltar à nossa folha de estilo. Isto era uma identificação. Para fazer isso igual, podemos definir a largura. Eu quero ir para 250 pixels e também uma altura correspondente. O exemplo que tínhamos visto antes no site da Mozilla usou uma seção quadrada, assim como vemos aqui. Mas, em vez disso, vou transformar isto num círculo adicionando um raio de fronteira. Um valor de 50 por cento tornará este circular. Agora podemos fazer uso de nosso gradiente cônico definindo isso como uma propriedade de fundo. Nós vimos muitos valores diferentes inseridos no exemplo antes. Mas tudo o que precisamos é de dois valores diferentes. Nós só precisamos dos valores verdes, que é o número total de milhas que o usuário correu e, em seguida, a seção cinza para o resto do círculo. Estes serão apenas valores de espaço reservado por enquanto, e vamos atualizá-los com JavaScript muito em breve. A cor verde é 70db70. Adicione qualquer primeiro valor de 50 por cento, significa que isso será executado de zero até 50 por cento. O segundo valor será um valor hexadecimal de 2d3740. Para o segundo valor, se definirmos isso como 50 por cento, se não adicionarmos um segundo valor como 70, isso será executado até 100 por cento. Agora vamos salvar isso e passar para o nosso projeto. Recarregar. Isso agora coloca nosso gradiente cônico no tamanho total do nosso círculo. Mas se olharmos para a versão final, temos o círculo central apenas aqui, dado como a aparência de um anel. Esta é a seção que você adicionou no meio do ProgressCenter. Vamos pegar isso. Tudo o que vamos fazer é efetivamente usar isso como uma máscara cobrindo o centro do círculo. Isso vai ser semelhante a um pouco acima, mas vamos torná-lo um pouco menor definindo a largura para ser 220. O mesmo para a altura. Isso também precisará de um raio de fronteira, então é um círculo. Para também dar a isso uma aparência de um anel, precisamos fazer a cor de fundo da mesma forma que o resto do aplicativo. O valor atual era 1c262f. Em nosso projeto e vamos ver como isso parece. Nós temos o centro do círculo agora no lugar, mas nós só precisamos ter certeza que isso está centrado. Podemos fazer isso dentro do nosso ProgressCircleWrapper. Vamos definir isso com o tipo de exibição de flex. Lembra-te que isto é para o invólucro. Podemos então justificar o conteúdo em toda a página no centro e também definir o alinhamento vertical usando itens de alinhamento. Bom. Isto agora parece exatamente como queremos. Agora vamos para o nosso script.js e podemos criar uma função que vai atualizar isso. Vamos chamar isso de CalcGoal. A primeira coisa que precisamos fazer dentro desta função é acessar nosso valor total. Este é o valor aqui. Uma vez que tenhamos isso, podemos dividir isso pelo nosso objetivo. A maneira como podemos pegar isso, assim como acima, vamos pegar o valor total. Vamos copiar isto. Cole isso em, e isso faz uso de nossa função redutor para pegar todos os itens dentro de nossa matriz e adicioná-los todos juntos. O próximo passo que precisamos dar é calcular uma porcentagem entre zero e 100. Vamos então usar esses valores dentro do nosso CSS para atualizar nossas duas cores. Para converter isso em uma porcentagem, vamos primeiro pegar o valor total e, em seguida, para obter isso como uma porcentagem, precisamos dividir isso pelo nosso objetivo dividido por 100. Podemos então armazenar isso dentro de uma constante. Vamos chamar isso de CompletedPercent. Nós também podemos fazer um console.log antes de ir mais longe e verificar que tudo está funcionando bem. Vamos adicionar isso em nosso log. Nós também podemos chamar essa função de enviar manipulador. Vamos salvar isso. Abra as ferramentas de desenvolvedor com o botão direito do mouse e inspecione o console. Vamos adicionar um valor de 10. Isso dividido pelo nosso objetivo vai nos dar um valor de 40 por cento. Se fizermos 2,5, 10 mais 2,5 é igual a metade do nosso objetivo, resultando em 50 por cento. Agora eu tenho esse valor, agora podemos usar isso para atualizar o estilo do nosso ProgressCircle. Vamos pegar isso pelo ID do no script. De volta ao CalcGoal. Podemos remover o console.log e, em seguida, chamar Document.QuerySelector. O seletor era um ID, então passamos o valor de hash em ProgressCircle. Óbvio dentro de um ProgressCircle chamada constante. Agora, em vez de ter o cónico-radiante codificado aqui, podemos agora comentar isso e, em seguida, adicionar isso dentro do JavaScript. A maneira de fazer isso é acessar nossos elementos ProgressCircle. Podemos definir qualquer propriedade de estilo, como o nosso plano de fundo. Podemos mais uma vez definir isso igual ao nosso gradiente cônico. Vamos copiar a seção, assim como está dentro do estilo, cole isso como uma string dentro das citações. Estes ainda são apenas valores codificados. Vamos tentar isto. Quaisquer valores que adicionarmos dentro daqui ainda resultarão em uma divisão 50-50. Ou seja, nosso próximo passo é tornar esses dois valores mais dinâmicos. A maneira como podemos fazer isso, se removermos as citações, pode substituí-las com os backticks. Esses backticks vão nos permitir criar uma string de template, que é uma maneira de inserir variáveis em nosso texto regular. Podemos remover os nossos 50 por cento. A forma como inserimos uma variável é usar o símbolo do dólar e, em seguida, as chaves. O primeiro valor será o equivalente à nossa variável percentual concluída. Vamos adicionar isso. Também precisamos do símbolo percentual, e então precisamos atualizar nosso segundo valor. Mais uma vez, este vai ser o nosso CompletedPercent todo o caminho até 100%. Uma vez que este é o nosso primeiro valor, isso vai de zero até o nosso CompletedPercent. Digamos que é 50 por cento, vai de zero a 50. O segundo valor passará de 50 até o final do nosso círculo, que é 100 por cento. Pouco antes de atualizar o nosso ProgressCircle, podemos adicionar uma declaração condicional logo acima. Podemos adicionar uma instrução if para verificar se a porcentagem concluída é superior a 100. Se for, então vamos redefinir isto de volta para 100. Então nosso ProgressCircle sempre vai de 0-100. Podemos verificar se o CompletedPercent é maior que 100. Se for, reiniciaremos isso de volta para 100 por cento. Vamos tentar isto. 12.5, que é exatamente metade, nosso ProgressCircle é agora 50-50. Insira um novo valor. Vamos arredondar para 100 por cento. 22.5, só precisamos adicionar um valor de 2,5. Isto agora completa o nosso círculo. Se tentarmos adicionar um novo valor, vemos que o ProgressCircle não vai mais longe. Como recebemos 100 por cento do nosso alvo nessa semana, esta é agora toda a funcionalidade agora completa para o nosso rastreador de corrida. Só para terminar isso, vamos adicionar uma consulta de mídia apenas para restringir a largura máxima de alguns desses elementos. De volta aos nossos estilos. Vamos adicionar uma consulta de mídia que vai segmentar nossas telas, juntamente com a largura mínima de tela de 800 pixels. Até agora, dispositivos de 800 pixels e acima restringirão a largura do corpo para ser igual a 60 por cento. Também podemos restringir a largura deste número de entrada também. Ainda dentro da consulta de mídia, a entrada com o tipo de número, tudo o que precisamos fazer novamente é definir largura e este tempo de 40 por cento. Finalmente, também podemos reduzir o tamanho deste svg nas telas maiores. Vamos direcionar o svg, definindo a largura máxima para ser 50 por cento. [ inaudível] ainda verá que há muito espaçamento acima da parte superior e inferior deste svg. A maneira de corrigir isso, se formos para o nosso index.html, é ir para a nossa tag de abertura svg. Dentro deste tipo, podemos ver que ainda temos a largura e a altura ajustadas. Podemos removê-los, permitindo que o tamanho seja controlado com nossa folha de estilo. Salve isso e agora svg ocupa menos espaço. Parabéns por ter chegado ao fim deste projeto, e nos vemos no próximo. 9. Siga-me na Skillshare!: Meus parabéns por ter chegado ao fim desta aula. Espero que você realmente tenha gostado e ganhe algum conhecimento com isso. Se você gostou desta aula, certifique-se de conferir o resto das minhas aulas aqui no Skillshare, e também me siga para quaisquer atualizações e também para ser informado de quaisquer novas aulas à medida que estiverem disponíveis. Então obrigado mais uma vez, boa sorte, e espero vê-lo novamente em uma aula futura.