Diversão com Javascript: crie uma calculadora de gorjetas!

1. Boas-vindas ao curso!: Ei, bem-vindo a esta aula. Se você é um iniciante de desenvolvimento web e quer apenas 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. Nós não vamos usar quaisquer frameworks, qualquer boilerplate, quaisquer bibliotecas, ou quaisquer modelos. Em vez disso, vamos construir tudo completamente do zero, passo a passo, para mostrar como essas tecnologias gratuitas funcionam juntas. O projeto desta classe vai ser uma aplicação de calculadora de dicas. O usuário pode inserir qualquer valor ou a fatura total no campo de entrada superior. Podemos então selecionar uma porcentagem ou a dica, que eles querem adicionar em, e então isso irá automaticamente recalcular todos os valores. Você verá o valor total da dica que está sendo calculada, e então isso também é adicionado à conta total também. Se eles quiserem e quiserem dividir a conta entre várias pessoas, teremos este controle deslizante de alcance aqui também. Então podemos dividir a conta entre várias pessoas. Isso irá então recalcular o total da conta por pessoa, e também o valor da gorjeta por pessoa também. Este projeto será construído completamente a partir do zero. Vamos criar a interface do usuário usando HTML. Vamos passar para adicionar estilo com CSS. Junto com olhar para como adicionar estes gama totalmente personalizado [inaudível] também. Vamos olhar para fonte, prefixos do navegador e, em seguida, passar para tornar nosso aplicativo totalmente interativo usando JavaScript. Você aprenderá sobre funções, matemática, eventos, todos os valores monetários [inaudíveis], leitura e atualização do DOM e muito mais. Este projeto foi projetado para iniciantes, e é ideal para alguém com apenas um pouco de conhecimento HTML, CSS e JavaScript. Estou animado para te ensinar 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 terminar outra palestra. Reserve um tempo para processar cada lição, revisar o código que você escreve e pensar 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 e se afastar da aula e pode até mesmo dar um passo atrás depois de terminar a aula e voltar e fazer algumas mudanças no projeto depois. Isso realmente lhe dará uma boa chance de praticar o que aprendeu fora da aula. Lembre-se também de compartilhar seu projeto aqui no Skillshare e só vou dar uma olhada, mas também inspirará outros estudantes. Para obter 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 carrega aqui no Skillshare. 3. Criando a interface de usuário: Esta seção é sobre a criação da nossa Calculadora de Dicas. Esta vai ser a versão final que vamos construir nesta seção. O usuário pode inserir uma conta dentro do campo de entrada na parte superior. Então, logo abaixo, podemos adicionar a porcentagem de gorjeta, que queremos adicionar a este projeto de lei. Por exemplo, vamos para 20 por cento e todos os outros valores são atualizados dinamicamente. Logo abaixo, temos o valor da gorjeta e isso também é adicionado ao total da conta para nos dar o total a pagar. Abaixo disso, também temos uma seção separada que vai permitir o usuário para dividir a conta entre várias pessoas. No momento, só temos isso como uma pessoa, então todos os valores são os mesmos. Se queremos que isso seja dividido entre duas pessoas, os valores são reduzidos para metade e vemos exatamente quanto cada usuário precisa pagar. Este primeiro vídeo será focado na criação da interface do usuário usando HTML. Nos próximos vídeos, vamos adicionar algum estilo e layout com CSS, e então vamos passar para os trabalhos e cálculos, e também tornar a interface do usuário dinâmica usando JavaScript. Vamos começar criando uma nova pasta. Vou adicionar o meu na área de trabalho e chamar isso de calculadora de dicas. Você também pode organizar isso dentro de uma pasta de projeto, se preferir, mas eu vou apenas começar arrastando sobre esta pasta de projeto para o Visual Studio Code. A primeira coisa que precisamos é de uma página Índice que irá conter o HTML. Dentro do projeto, crie um novo arquivo. Eu vou chamar isso de index.html, e nós também podemos fechar a barra lateral para mais espaço. Visual Studio Code vem completo com um plugin chamado Emmet, que nos permitirá adicionar atalhos para criar nossa estrutura HTML. Por exemplo, podemos adicionar a coluna HTML 5, clicar em “Enter”, e isso nos dará um ponto de partida para o nosso projeto. Ele simplesmente inclui todos os metadados que comumente adicionaremos, como a meta tag viewport e também o conjunto de caracteres que estamos usando. O título no topo, eu vou chamar meu Dica Rápida, e então podemos começar a trabalhar criando nosso conteúdo dentro da seção do corpo. Podemos envolver todas essas Calculadoras de Dicas dentro das tags principais, seguido por um título de nível 1 que vai ser o título do nosso projeto. Salve este arquivo, e agora se clicarmos com o botão direito do mouse, copie o caminho, cole isso no navegador, este é agora o link para o nosso projeto. Você também pode entrar na pasta do projeto e clicar duas vezes no “Index.html”, que também abrirá isso no navegador padrão. O que vamos fazer a seguir é passar por todas as seções disponíveis de cima para baixo. Nós vamos criar esta seção branca no topo que vai ser para as entradas do usuário, como a conta e a quantidade da dica, vamos adicionar certas divs que você está indo para embrulhar todos esses elementos, e então vamos adicionar o nosso segundo na parte inferior. Abaixo do título de nível 1, podemos adicionar nossa primeira seção, dentro aqui vamos adicionar nossa primeira div, que é para a nossa primeira seção que inclui o rótulo da conta e também a entrada numérica. Vamos incluir isto. Agora, temos o nosso div. Isso terá uma etiqueta chamada Bill, nossa entrada. Agora, uma vez que isto vai ser uma entrada numérica, podemos dar a isto um tipo de número. Também podemos adicionar o atributo placeholder, que vai ser o texto do seu projeto de lei. Este será o valor que é exibido dentro das entradas se nenhum número foi adicionado, seguido por um ID exclusivo que vai ser a sua conta. Isso nos permitirá direcionar essa entrada com JavaScript para que possamos pegar o valor que o usuário inseriu. Também podemos vincular isso ao nosso rótulo adicionando o mesmo nome para atributo. Isso significa que se salvarmos isso e passarmos para o navegador, cada vez que clicarmos no rótulo, isso também ativará nossa entrada de número. Movendo-se para baixo, também temos um controle deslizante de alcance que é apenas aqui. Isso vai ter uma seção que vai envolver tanto as entradas e também o rótulo e também a porcentagem. Vamos adicionar isso agora como uma div, e então podemos adicionar uma nova div aninhada dentro. Isso vai ser para a linha superior do rótulo e porcentagem. O rótulo terá os elementos do rótulo e o valor da dica de seleção. Logo depois disso, vamos criar um elemento span e dar a este um ID para que possamos segmentar isso a partir do nosso JavaScript. Podemos chamar isso de “TipPercent”. Mais tarde, vamos preencher o conteúdo deste usando JavaScript. Por enquanto, vamos apenas adicionar isso como zero por cento para que possamos ver como isso parece em nossa interface de usuário. Logo após a div circundante podemos então criar nossa entrada, e isso vai ser um tipo de alcance. Isso nos dará este controle deslizante de alcance que veremos na versão final, embora possa parecer um pouco diferente no momento. Podemos definir o valor inicial, queremos que isso comece em zero por cento seguido por um ID de TipInput. Mais uma vez, podemos usar isso para o rótulo. Isso também será usado com JavaScript mais tarde para pegar o valor da dica. Vamos salvar isso e ver como isso fica no navegador. A estrutura está lá, temos o rótulo, temos a porcentagem, e também o controle deslizante de intervalo. Isso obviamente parece muito diferente nossa versão final, mas vamos corrigir isso com CSS muito em breve. Movendo-se para baixo se voltarmos para a versão final, precisamos de uma seção de dicas. Isso vai ser bem simples. Temos o rótulo e também o valor no lado direito. Teremos uma regra horizontal, e então uma seção que será para o total. Vamos primeiro criar esta seção de dicas logo abaixo da nossa última div. Crie uma nova div para esta seção, uma extensão com o valor de ponta, seguida por uma extensão vazia com o ID que será igual a TipValue. Isso nos permitirá mais tarde pegar esses elementos pelo ID e, em seguida, colocar um valor dentro. Depois disso uma regra horizontal para criar a nossa linha, e, em seguida, a seção final para baixo na parte inferior. Adicione nossa div como um wrapper, o span com o texto do total. Então, assim como acima, vamos adicionar um espaço vazio que vai ser atualizado com JavaScript. O valor vai ser o total que inclui uma dica. Vamos chamar isso de TotalWithTip. Este é agora todos os elementos no lugar para a nossa primeira seção, se recarregarmos o navegador estes estão todos no lugar. A próxima coisa a fazer é passar para a seção final que é dividir o projeto de lei. Logo abaixo de nossa tag de fechamento para esta seção, vamos criar uma nova seção. A primeira rodada em div será para a entrada dividida. Esta seção só aqui. Assim como fizemos com o valor da ponta no topo, vamos criar uma div que irá conter o rótulo e também o número de pessoas. Vamos então seguir isso com um controle deslizante de alcance. A div para o texto, isso terá o rótulo com o texto de divisão. Ao lado disso, adicionaremos uma extensão embutida com o ID de SplitValue. Isso será atualizado com o valor de uma pessoa. À medida que isso aumenta, serão duas pessoas, três pessoas, e assim por diante. Logo abaixo desta seção div podemos então criar a entrada. Assim como acima disso, teremos o tipo de alcance. Também podemos restringir os valores dentro deste intervalo de entrada. Para começar, queremos criar o valor mínimo de um. Isto é porque é sempre vai ser um mínimo de uma pessoa que o projeto de lei vai ser dividido entre. Podemos definir um valor máximo. Isso pode ser qualquer valor que você preferir. Eu vou para 10 e definir o valor padrão inicial para ser um. Isso também precisa de um ID exclusivo. Vou chamar isso de SplitInput que também podemos combinar com o rótulo. Vamos verificar se tudo isso está funcionando, atualizar o navegador, e temos uma nova entrada de intervalo. Você também pode adicionar um valor padrão aqui, se preferir. Então, uma pessoa e veremos isso dentro do navegador. Em seguida, temos duas seções mais simples na parte inferior, que é uma div simples com o rótulo e também os valores à direita. A primeira div, isso vai ter uma extensão com o valor da conta cada, também seguido por um intervalo vazio com o ID de Billeach. A seção final na parte inferior é a ponta cada um e também o valor. Crie uma nova div, a extensão com o texto da ponta cada, seguida por uma extensão vazia com o ID que vai ser igual a Tipeach. Salve nosso arquivo index.html e este é agora todo o conteúdo HTML que precisamos. Recarregue o navegador e tudo está agora no lugar. Obviamente, nossa Calculadora de Dicas não se parece nada com a versão final no momento, mas começaremos a corrigir isso no próximo vídeo onde aplicaremos alguns CSS. 4. Estilizando com CSS: Passando do nosso HTML, agora vamos fazer nosso projeto parecer e se sentir muito mais agradável, e vamos fazer isso aplicando alguns CSS. A primeira coisa que precisamos fazer se abrirmos sobre esta barra lateral é criar um novo arquivo, nossos estilos. Eu vou chamar o meu styles.css, e então podemos vincular isso no index.html. Fazemos isso sobre o topo dentro da seção de cabeça usando elemento de ligação necessário. Esta é uma relação com uma folha de estilo, então isso é bom, e o href é a localização deste arquivo. Este arquivo está contido ao lado desta página de índice para que possamos simplesmente fazer referência a isso com o nome de styles.css. Voltando à nossa folha de estilo, podemos começar com o elemento HTML, que é a raiz do nosso projeto. Vou começar declarando o tamanho da fonte como um valor de 10 pixels. Agora, esse valor é completamente opcional, assim como todos esses CSS que vamos adicionar. Você pode torná-lo seu próprio, você pode mudar os valores para fazê-lo parecer e sentir exatamente como nós queríamos. Agora, a razão pela qual eu selecionei 10 pixels para o tamanho do projeto raiz é porque é um bom número arredondado e podemos usar os valores rem. A escala é para cima e para baixo muito facilmente. Por exemplo, se criarmos um valor de preenchimento como um rem, este será um valor de 10 pixels. Se quisermos que isso seja 16 pixels, isso será 1.6 rems, então o valor arredondado torna as coisas agradáveis e fáceis ao escalar para cima e para baixo. Em seguida, definiremos o valor da cor. Esta vai ser a cor do nosso texto. A cor que vou selecionar é 4e4d4d. Vamos verificar isto e testar se isto está a funcionar. Salve o arquivo, recarregue o navegador, vou ver que os estilos entraram em vigor. Vamos abrir a exibição dividida dentro do Visual Studio Code, que você possa ver a página de índice e também os estilos ao lado. O próximo elemento que vou estilizar é o recipiente principal. Se você se lembra do último vídeo, cercamos toda a calculadora de dicas nesta seção principal. Este vai ser o nosso invólucro principal. Podemos definir a largura máxima da calculadora de ponta para ser de 50 rem. Lembre-se, uma vez que definimos o tamanho da fonte raiz para 10 pixels, 50 vezes 10 tornarão isso o equivalente a 500 pixels. Também podemos centralizar isso usando a margem zero auto. Isso aplicará margem zero na parte superior e inferior e dividirá o resto do espaço à esquerda e à direita igualmente. Salve e atualize, e isso agora colocou uma quantidade igual de espaço em branco à esquerda como está à direita. Mas apenas para dar a isso algum espaçamento a partir do topo da página, podemos alterar esse valor para ser dois rems para nos dar 20 pixels de margem. Em seguida, podemos definir a cor de fundo. Podemos definir isso como uma cor de fundo sólido regular, ou eu vou definir o meu para tirar proveito dos gradientes lineares. Este gradiente linear nos permitirá fazer a transição de uma cor para outra em uma linha reta. Vamos criar algum espaço, aplicar o gradiente linear, e então podemos adicionar dois valores que você deseja fazer a transição entre. O primeiro valor que eu vou adicionar é um valor de 3dc0c0, separado por uma vírgula nosso segundo valor é 5bceae. Se salvarmos isso, devemos ver que a seção principal agora tem uma transição de uma sombra para outra. Por padrão, essas cores farão a transição vertical de cima para baixo. Também podemos alterar o ângulo como o primeiro valor. Quero mudar o meu para 30 graus. Atualize, isso agora muda nosso gradiente de vertical para percorrer a página em um ângulo de 30 graus. Depois do nosso plano de fundo, também podemos adicionar alguns valores de preenchimento, e dentro daqui eu vou adicionar quatro valores diferentes. Então, três rem, 1,6 rem, seis e, finalmente, 1,6 rems. Esses quatro valores de preenchimento aparecerão na parte superior, direita, inferior e esquerda. Vamos salvar e atualizar o navegador, deixando isso com algum espaço em torno das bordas. Em seguida, o raio da fronteira, e eu vou adicionar isso como um valor de quatro rems. Isso vai ser bem grande, e isso se aplicará a todos os quatro lados da nossa calculadora de gorjetas. Para dar a esta calculadora dica a impressão de um pouco de profundidade, também podemos adicionar uma caixa de sombra. Vou adicionar uma caixa-sombra no fundo da nossa secção principal circundante. Esta caixa-sombra vai ter quatro valores diferentes. O primeiro é a posição x, temos a posição y, temos o valor do borrão e, em seguida, também a cor a aplicar. Se formos ao site da Mozilla, isso tem um gerador de caixas de sombra, para que possamos ver melhor o que está acontecendo. No momento, temos apenas um elemento simples com uma fronteira. Se adicionarmos uma caixa de sombra, podemos então brincar com os valores x e y. O eixo x é o valor da esquerda para a direita ou em toda a página. Somente o valor y é para cima e para baixo. Atualmente, o valor x é de cinco pixels, então isso significa que isso é empurrado de cinco pixels. Nós também podemos definir isso para ser cinco negativo, e isso irá colocar esses cinco pixels para a esquerda. No eixo y que é para cima e para baixo, este é um valor de cinco negativos, nós mudamos isso para ser positivo, isso então aparecerá para baixo na parte inferior. Nós também podemos mudar as cores, podemos alterar os valores de desfoque e fazer isso realmente grande. Mas, para o nosso exemplo, vamos fazer isso bem sutil, então vamos ficar com alguns valores pequenos. O primeiro valor que está no eixo x, eu vou definir isso como zero para que ele não empurre sobre o lado esquerdo ou direito. O segundo valor é dois pixels, então isso aparecerá na parte inferior do nosso elemento. Ao lado disso, temos o valor do borrão. Novamente, isso vai ser muito pequeno, e então também uma cor bastante leve e sutil de cinza claro. De volta ao nosso projeto, atualize o navegador e vemos uma caixa de sombra muito pequena na parte inferior da nossa seção principal. Isso cuida do estilo para a nossa seção principal, e agora eu trabalho nos elementos individuais dentro. Começando no topo, temos a dica rápida, que está cercada no cabeçalho de nível 1. Vamos alvejar o H1. Podemos definir o text-align para estar no centro. Nós também queremos que isso seja um pouco maior para que possamos definir este font-size o valor de três rem. Os cabeçalhos de nível 1 têm uma margem padrão que é aplicada pelo navegador, então eu vou remover isso definindo isso para ser um valor de zero. Logo acima deste título de nível 1, veremos que há muito mais espaço no topo do que no fundo. Isso ocorre porque a div circundante principal tem este valor de preenchimento de três rem no topo. Nós também podemos equilibrar isso dentro do nosso nível um título adicionando algum preenchimento na parte inferior também de três rems. Se dermos uma olhada na versão final, veremos que cada uma de nossas seções também tem essa cor de fundo branco. Nós também podemos direcionar isso dentro de nosso CSS, então vamos pegar o elemento seção, e podemos começar com a cor de fundo do branco. O font-size, podemos definir isso para ser 18 pixels, que é o equivalente a 1.8 rems. Salve e recarregue. Atualmente não há espaço entre nossas duas seções, então podemos corrigir isso com alguma margem na parte inferior. Vamos para 1.6 rems. Em preenchimento, o que nos dará o espaçamento dentro de nossa seção branca, ao trabalhar com a margem de preenchimento se tivéssemos apenas dois valores, o primeiro valor será o topo e o fundo, que eu vou definir como zero, e o segundo valor será a esquerda e também a direita. Se for consistente, também adicionaremos isso como 1.6 rems para nos dar algum espaçamento à esquerda e à direita de cada uma dessas seções. Um raio de fronteira de um rem e, em seguida, também uma caixa de sombra para a seção 2. Para dar isso consistente, podemos combinar nossos valores de antes. Então zero, dois pixels, dois pixels desfoque, e também a cor de cinza claro. A única diferença que vimos nesta seção é que queremos que apareça como se estivesse inserida dentro da seção principal. Podemos adicionar ao valor de inserção para a nossa caixa-sombra, e isso irá substituir a caixa-sombra dentro em vez de fora do elemento. Se voltarmos ao site da Mozilla podemos ver isso com mais clareza. Podemos clicar em “Inset”, e também reduzir o desfoque, e vemos que esse desfoque está agora dentro do elemento em vez de fora como tínhamos antes. Indo dentro de um nível mais profundo de todas as seções, vemos que cada uma de nossas partes de nossa calculadora de dicas está cercada em um div. Agora podemos segmentar isso no CSS. Queremos atingir todos os divs que são um filho direto da seção. Nós temos a seção e, em seguida, um nível em, e nós temos este div, então nós temos este div. Todo o estilo será aplicado a esses primeiros divs aninhados dentro. Por exemplo, este que vemos aqui é um nível mais adiante. Então isso não se aplica à seção. Se quiséssemos que o estilo se aplicasse a todos os nossos divs dentro da seção, faríamos o CSS assim, mas só queremos selecionar os filhos diretos. Tudo o que vamos fazer aqui é adicionar alguns valores de preenchimento de 1.6 rems na parte superior e inferior, e zero na esquerda e na direita. Isso vai nos dar o espaçamento em torno de cada uma dessas seções. Em seguida, vamos adicionar um pouco de estilo à nossa seção de contas no topo da nossa primeira seção. Para fazer isso, podemos adicionar uma classe a este wrapper de conta e, em seguida, podemos direcionar isso no CSS. Uma vez que é uma classe, usamos o ponto, so.bill, e vamos fazer uso da flexbox CSS. Fazemos isso definindo primeiro o wrapper para ter o tipo de exibição de flex, salvar e atualizar. Ainda não vemos nenhuma diferença, mas agora também podemos usar essa exibição de flex para aplicar estilo a essas crianças aninhadas dentro. Aninhado dentro terá o rótulo e também a entrada com o tipo e número. Vamos começar com o rótulo. Então, Bill e a gravadora. Isso direcionará o rótulo dentro de nossa seção de fatura. Como estamos usando a flexbox, podemos definir um valor flexível de um, e logo abaixo disso, podemos direcionar a entrada da conta, e dar a isso um valor flexível de três. Salve e recarregue. Isso agora significa que a entrada ocupará três vezes o espaço disponível como nosso rótulo. Em seguida, vamos adicionar algum estilo a essas entradas com o tipo de número. Lembre-se, dentro do nosso HTML, temos várias entradas diferentes. Temos este aqui, temos o nosso alcance, e também o intervalo para baixo também. Como podemos ser mais específicos com o tipo de entrada que você deseja aplicar estilo? Bem, podemos fazer isso dentro desses colchetes selecionando o tipo. único tipo que queremos atingir é o número. Isso significa que o estilo que adicionamos dentro dessas chaves será aplicado somente às entradas numéricas, em vez do nosso intervalo logo abaixo. Primeiro de tudo, vamos definir a cor de fundo. O valor que vou usar é f4f4f5. O tamanho da fonte para tornar isso um pouco maior, 1.6 rems, o que é equivalente a 16 pixels. A borda, podemos definir a espessura para ser um pixel, a linha para ser sólida, e vamos dar a isso uma cor cinza claro. Nós também podemos arredondar os cantos aplicando algum raio de borda de 0,5 rems, algum preenchimento, e novamente, eu quero adicionar quatro valores diferentes, então 0,8 rems no topo, zero à direita, 0,8 também o fundo, e 0,8 rem à esquerda. Recarregue o navegador, e isso nos dará espaçamento igual na parte superior, esquerda e inferior, e zero no lado direito. Agora nossa entrada é um pouco mais alta, vamos ver agora um problema alinhando isso com a conta. Se você olhar para a versão final, isso também vai ser alinhado na linha central de nossa entrada. Bem, desde que definimos a seção para ter o tipo de exibição de flex, podemos facilmente corrigir isso adicionando uma propriedade flex chamada align-self, definir isso para ser o centro. Isso agora alinha com a linha central de nossa entrada. Em seguida, vamos adicionar uma sombra de caixa assim como na versão final. Para combinar com a nossa seção circundante, também vamos definir isso para ser inserido. Também fazendo uso dos mesmos valores que anteriormente. A sombra da caixa vai ser inserida. Os valores x e y serão zero e dois pixels, um desfoque de dois pixels, seguido pela cor de cinza claro. Em seguida, se dermos uma olhada em nossa versão final, vemos que cada uma de nossas seções, como a dica e o valor, é baseada em cada lado da nossa calculadora. Isso também se aplica para a seção total, a dica e também o valor, e também esses valores na parte inferior também. A maneira como podemos criar o espaçamento é também aproveitando a flexbox. A flexbox tem uma propriedade chamada justify-content, onde podemos definir o espaço para ser entre ambos os elementos. Para fazer isso, precisamos segmentar várias seções do nosso HTML, que possamos adicionar uma classe a cada um deles. O primeiro será o rótulo da dica de seleção e o valor. Vamos dar uma olhada para isso em nosso HTML. Esta é a seção aqui. Vamos adicionar uma aula. Vamos para o espaço entre eles. Copie isso e podemos reutilizar isso em vários lugares. Nós também precisamos adicionar isso à seção de dicas, e também a seção total onde temos dois valores na mesma linha. O invólucro de pontas, o invólucro de nossa seção total, a divisão, e também as seções Billeach e TiPeach na parte inferior. Agora, no CSS, podemos segmentar este espaço entre, definir o tipo de exibição para ser flexível. Agora, se selecionarmos conteúdo justificativo, podemos aplicar todo esse espaço a ser entre. Salve e recarregue. Agora, em vez de ter o texto e os valores um ao lado do outro, estes agora têm o nosso espaço no meio. Só para completar o CSS para este vídeo, vamos tornar nossa seção total um pouco mais ousada. Podemos fazer isso adicionando uma classe à nossa seção total. Logo após o espaço entre, podemos adicionar uma segunda classe, embrulhar isso no CSS. Vamos primeiro definir o tamanho da fonte para ser duas rems, e também definir o peso da fonte ser mais ousado. Recarregar, agora temos esse texto mais ousado. Isso agora nos deixa com o CSS principal feito para este projeto. No entanto, no próximo vídeo, vamos continuar, e adicionar mais alguns toques finais agradáveis. Por exemplo, vamos incluir uma fonte diferente. Nós também vamos fazer o nosso próprio controle deslizante de intervalo personalizado, em vez de usar o padrão do navegador, que vemos atualmente aqui. 5. Fontes, controles deslizantes personalizados e prefixos do navegador: Vamos continuar com nosso estilo para este projeto, passando para a criação de um controle deslizante de intervalo personalizado. No momento, se dermos uma olhada no projeto no estágio, o que estamos atualmente. Isso faz uso do intervalo padrão do navegador, e ele não parece muito bom ou se encaixa com nosso projeto atual. Então vamos falar sobre como podemos criar nosso próprio controle deslizante personalizado. Primeiro, precisamos definir a aparência de nossos controles deslizantes atuais para ser nenhum, para remover todo o estilo padrão. Em seguida, podemos ir em frente e criar o nosso próprio com alguns CSS personalizado. No entanto, o suporte do navegador não é perfeito para algumas das técnicas que vamos usar. Podemos contornar isso usando prefixos de fornecedor. Adicionar um prefixo de fornecedor a uma propriedade CSS é uma maneira fazer uso de certas propriedades experimentais CSS, e também propriedades que ainda não são totalmente suportadas atualmente em determinados navegadores. Se rolarmos para baixo, vemos os principais prefixos que podemos usar. O primeiro é o webkit, que se aplica a todos esses navegadores, como Chrome e Safari. Temos então o prefixo moz, que se aplica aos navegadores Firefox. Também podemos segmentar versões mais antigas do Opera e também o Internet Explorer. Mas para este projecto em particular, vou concentrar-me nestes dois primeiros. Tudo o que precisamos fazer é encontrar uma determinada propriedade CSS, como transição, e depois adicionar a inferência de prefixo moz ou webkit. Usando estes, aprenderemos a dizer ao navegador que estamos felizes em usá-los, e experimentá-los antes que eles sejam totalmente implementados no navegador. Então, para fazer isso, precisamos direcionar ambas as nossas entradas com o tipo de intervalo. Então, primeiro de tudo, temos este aqui. Vamos adicionar uma classe de intervalo. Eu também vou fazer o mesmo para o nosso controle deslizante segundo intervalo, que está logo abaixo. Isto significa que o nosso estilo será aplicado a ambas as entradas da nossa gama. Então vamos começar logo abaixo do nosso total. Podemos selecionar a nossa gama. A primeira coisa que precisamos fazer é remover o controle deslizante de intervalo padrão. Podemos fazer isso definindo a aparência como nenhuma. A propriedade de aparência ainda não é totalmente suportada nos navegadores webkit. Então, também precisamos adicionar o prefixo webkit na frente disso. Se agora salvarmos isso e irmos para o nosso projeto, recarregue. Vemos que isso removeu a barra de progresso por trás. Nós também passaremos a estilizar este controle deslizante forma muito em breve. Por enquanto, vamos nos concentrar no controle deslizante real. Então, primeiro de tudo, podemos definir a largura para ser 100 por cento. Então esta é a largura total do nosso recipiente. A altura de oito pixels, e também podemos definir a cor de fundo do nosso controle deslizante. Eu quero fazer este cinza claro, que é o valor de um eee. Podemos começar a ver que nosso controle deslizante está tomando forma agora. Vamos agora adicionar alguma margem ao topo para nos dar algum espaçamento do texto, e também um raio de borda. Então, em primeiro lugar, a margem no topo de 1,2 rem, e também um raio de fronteira de 0,3 rem. A próxima coisa que podemos segmentar quando isso está ativo ou clicado é a cor da borda que vai ao redor do exterior. Podemos selecionar isso com a cor do contorno, e alterar o valor padrão para ser qualquer cor que gostamos. Eu vou para um valor de marcha que usamos no gradiente linear. Então 5Bceae. Refresque. Agora, se clicarmos em qualquer um desses controles deslizantes, veremos agora essa cor verde. O próximo passo é direcionar este pequeno círculo, que é chamado de filme deslizante. Podemos fazer isso novamente no CSS. Então vamos atacar nossa seção de alcance. Então, se usarmos os dois pontos assim, este é um pseudo-elemento. Um pseudo-elemento nos permitirá direcionar uma determinada parte de um elemento. Então, por exemplo, se estivéssemos direcionando um parágrafo de texto, teríamos pseudo-elementos disponíveis para selecionar a primeira letra ou até mesmo a primeira linha. Mas já que estamos trabalhando com nosso alcance, vamos atingir o filme deslizante. Especificamente, vamos segmentar as versões do webkit. Então isso seria para os navegadores Chrome e Safari. O único valor que precisamos é filme deslizante. Também direcionaremos o navegador Firefox em apenas um momento. Então, como fizemos com o alcance, vamos definir a aparência como nenhuma. Precisamos então definir a largura e as alturas do nosso pequeno controle deslizante de filme. Então vamos para a largura, 2,2 rem. A altura, que também vai ser a mesma. Se definirmos o raio da fronteira para 50 por cento, isso fará com que seja o círculo completo. Vamos dar uma olhada nisso. Ainda não o vemos, porque também precisamos atribuir uma cor de fundo. Eu quase quero definir isso para ser uma cor que usamos antes no gradiente. Agora vemos o nosso controle deslizante de filme. Outra coisa que vamos fazer é mudar o cursor para ser um ponteiro. Lá vamos nós. Próximo. Vamos ver como ele se parece dentro de um navegador diferente. Vou buscar o Firefox. Mas é claro que você não precisa seguir este passo, se você não quiser. Então, dentro da calculadora de dicas, vamos abrir o index.html. Vemos que, no momento, temos apenas o estilo padrão para o fundo. Ainda não vemos o estilo do filme. Então vamos corrigir isso criando uma seção para o filme de gama moz. Atualmente, estamos direcionando apenas a versão do webkit. Então, vamos copiar isso e colá-lo abaixo. Então aqui dentro, em vez de ter a versão webkit, que eu costumava ser o prefixo mais, e em vez de filme slider, isso é chamado de filme de gama. Salve isso e recarregue o navegador Firefox. Vejo que o filme foi mudado. Então, algumas coisas para anotar aqui. Vemos que há uma fronteira ao redor do filme, dentro deste navegador. Assim, podemos definir a fronteira para não ser nenhuma. Isto irá então remover isto. Também não precisamos incluir a aparência do webkit de nenhum para este navegador. Uma coisa que podemos melhorar quando clicamos e tornamos isso ativo, é esta linha pontilhada ao redor do exterior. A maneira de fazer isso dentro do Firefox é direcionando o controle deslizante de alcance. Novamente, você vê os dois pontos para os pseudo-elementos, e os elementos que queremos atingir serão moz. Use o prefixo moz para o navegador Firefox. Em seguida, o nome dos elementos chama neste é o foco externo. Podemos definir a borda para ser um valor de 0, atualizar, e isso agora foi removido. Portanto, esses prefixos de navegador são algo para ter cuidado ao trabalhar com vários navegadores, e também qualquer coisa que ainda não é totalmente suportada. Então este é o nosso controle deslizante de gama de clientes agora completo. Apenas uma coisa para observar rapidamente, quando rolamos de volta para a seção de intervalo, aqui, estamos direcionando a aparência apenas para os navegadores webkit. Você pode estar se perguntando por que não segmentamos as versões do Mozilla também. Bem, isso ocorre porque, para esta propriedade de aparência particular, os navegadores Firefox também respeitarão as versões do webkit também. Isso é por razões de compatibilidade. A última peça de estilo que vou aplicar, vamos fechar este navegador Firefox, é aplicar algumas fontes do Google. Então, vamos fazer uma pesquisa pelo Google Fonts e ir para fonts.google.com. Vou usar uma fonte chamada roboto. Então vamos fazer uma busca por isso. Este é o que precisávamos aqui. Para incluir isso em nosso projeto, podemos selecionar o peso da fonte, e também se quisermos uma versão em itálico também. Eu vou para a versão light 300, o meio, e também uma versão ousada também. Para incluí-los, precisamos clicar no link de incorporação. Copie o link para o estilo. Isso vai para o nosso index.html. Vou colar isso dentro da seção da cabeça logo acima nossas folhas de estilo personalizadas. Salve este arquivo. A próxima coisa a fazer é também definir a família de fontes dentro de nossa folha de estilo. Então copie a propriedade font-family. Abra o nosso styles.css, e podemos aplicar isso para todo o nosso projeto, dentro dos elementos HTML raiz. Atualize o navegador. Nossa fonte agora entrou em vigor. Também podemos definir os pesos de fonte padrão. Eu quero ir para 300. Agora, nosso estilo parece muito mais com a versão final. Só para terminar este projeto estilizando fora. É muito difícil dizer a partir de nossa entrada apenas aqui porque as fontes não são muito diferentes, mas por padrão, uma entrada não herdará a família de fontes. Para fazer isso, precisamos rolar para baixo até nossa entrada, o tipo de número. Podemos até definir a família de fontes como uma cabine. Ou podemos definir isto para ser, herdar. Recarregue o navegador, e isso entrará em vigor. Então este é agora o fim da seção de estilo para a nossa calculadora de dicas. Em seguida, vamos seguir em frente para fazer esta função usando JavaScript. 6. Entradas de eventos e usuário: Vamos passar a adicionar algum JavaScript ao nosso projeto, onde realmente vamos dar vida ao nosso projeto. Para fazer isso, vamos criar uma seção de script na parte inferior. Então, se rolarmos até o final do nosso index.html, logo acima da tag body de fechamento, podemos inserir nosso JavaScript dentro dos elementos de script. Isso terá uma tag de abertura e fechamento, e todo o nosso código irá entre esta seção. Então vamos pensar sobre o que queremos fazer aqui. Temos a seção de contas no topo e o usuário vai adicionar um valor aqui dentro. Assim que isso for feito, queremos executar algum código para atualizar todos os valores. Para fazer isso, podemos criar uma função que será responsável por todas essas mudanças. Fazemos isso com a palavra-chave function seguido por um nome que você deseja dar a esta função. Poderíamos também inserir um aumento entre esses colchetes se quiséssemos. Vou dar uma olhada em como fazer isso mais tarde neste projeto. Agora sabemos que precisamos entender que tudo o que adicionamos entre essas chaves será executado cada vez que chamarmos essa função de atualização. Então, como nós realmente chamamos essa função de atualização? Bem, há várias maneiras de fazer isso. Como exemplo, podemos fazer isso quando um elemento foi clicado. Vamos rolar até nossa seção de contas. Se localizarmos nossa entrada como um atributo, podemos ouvir um evento. Um evento é quando algo acontece, como um elemento é clicado ou uma entrada é atualizada. Isso nos permitirá então chamar nossa função. Como exemplo, vamos ouvir por um clique, para que possamos usar no clique. Dentro das cotações, adicionamos o código que queremos executar. No nosso caso, queremos chamar a função de atualização seguida dos colchetes, assim como este. Se salvarmos isso e recarregarmos o navegador, quando clicarmos nessa entrada, não vemos nada acontecer ainda. Isso ocorre porque não temos nenhum código entre essas chaves. Podemos verificar isso está funcionando fazendo um log de console, que vai enviar uma mensagem para o console que você diz, função chamada, salvar nosso arquivo. Se recarregarmos o navegador, agora podemos ir para as ferramentas do desenvolvedor. Fazemos isso com o botão direito do mouse e inspecionamos. Clique na guia console. Como estamos ouvindo um evento de clique, agora queremos clicar nesta entrada, apenas aqui. A saída de escuta detecta as chamadas de função. Então nossa função agora está sendo chamada corretamente. Vamos também manter isso aberto para mais tarde e reduzir o navegador para baixo. No entanto, chamar essa função quando isso é clicado não é um bom caso de uso. Nós realmente queremos executar esta função cada vez o usuário insere qualquer coisa dentro deste campo de entrada. Podemos rolar de volta para a nossa entrada e alterar o tipo para estar em entradas. Vamos mudar isso. Em vez de clicar, precisamos de entradas. Recarregue o navegador. Agora, cada vez que digitamos um número dentro deste campo, vemos que nossa função foi chamada três vezes. No entanto, para esta função, queremos torná-la um pouco mais útil em vez simplesmente registrar alguns textos no console. Em vez disso, o que queremos fazer é pegar o valor da nossa conta, a porcentagem do nosso controle deslizante, e também o número de pessoas entre as quais a conta está sendo dividida. Para fazer isso, podemos acessar os valores que foram inseridos em qualquer um desses campos. Em primeiro lugar, selecionamos os documentos completos, que é a página da web. Podemos então restringir isso para selecionar um único elemento. Uma das maneiras que podemos agarrar isso é selecionar isso pelo ID do elemento. Então o primeiro que queremos pegar é o valor deste projeto de lei. Se deslocarmos até a conta, isso terá o valor da sua conta. Para que possamos fazer uso disso. Nós dizemos documentos. Então podemos pegar um elemento pelo ID e adicionar o valor da sua conta. Agora temos acesso a esses elementos particulares. Agora podemos resolver isso dentro de uma variável. Podemos criar uma variável com a palavra-chave let e, em seguida, dar o mesmo nome, como conta. Isto irá agora armazenar o valor de tudo no lado direito, para este valor chamado de conta. Se queremos verificar isso está funcionando, também podemos fazer um novo log console passando o valor da conta. Isso será chamado cada vez que adicionarmos algo à nossa entrada. Se dermos uma olhada no console, vemos o valor das entradas reais, elementos com o tipo de número. No entanto, o que queremos para a nossa calculadora Tip é realmente pegar o conteúdo que o usuário introduz. Podemos fazer isso com.value. Vamos tentar isso novamente recarregando, insira um valor. Agora, o valor real inserido pelo usuário agora será armazenado nesta variável de conta. Então agora sabemos como fazer isso. Nós também podemos pegar o percentual de gorjeta e também a divisão. Então vamos copiar e colar isso em mais vezes. O segundo é o TipPercent. Precisamos também de uma identificação. Então vamos dar uma olhada para isso. A primeira entrada de intervalo tem o ID de TipInputs. Então, copie isto. Está dentro. O terceiro vai ser para a divisão. Isso tem um ID de entrada dividida. Pouco antes de seguirmos em frente, vamos registrar todos esses três valores e verificar se eles estão funcionando. O próximo é o TipPercent e também a divisão. Recarregue o navegador, vamos para o valor de 67. Então vemos o valor de 67. Então temos o valor da ponta que é atualmente zero e, em seguida, a divisão que é um por cento. Assim como uma dica rápida para quando o console fizer login em vários valores, também podemos envolvê-los nas chaves para transformá-los em um objeto e estes serão muito mais fáceis de ler. Adicione um valor. Isso, em seguida, emitirá o nome da propriedade junto com o valor para torná-la muito mais legível no console. Isso agora significa que estamos capturando todas as nossas entradas de usuários e podemos trabalhar com esses valores muito em breve. No entanto, você notará, se trabalharmos com as entradas de intervalo, que nenhum dos valores são atualizados no console. Isso ocorre porque estamos apenas chamando essa função de atualização cada vez que o usuário insere algo para esta conta. No entanto, para o nosso caso de uso, seria muito mais prático se esta função fosse atualizada quando o usuário clicasse em qualquer uma dessas entradas. Então, para fazer isso, vamos remover o manipulador de eventos de entrada na. Em vez disso, podemos colocar isso no invólucro principal. Esta seção principal está envolvendo todas as nossas entradas. Então, agora, se salvarmos isso, atualizarmos o navegador, e agora cada vez que uma de nossas entradas for atualizada, isso agora chamará nossa função. Vemos a porcentagem de gorjeta sendo aumentada e também a divisão é agora entre três pessoas. Isso significa que nossa função de atualização está sendo chamada para todas as três entradas. Mas também podemos melhorar isso removendo nosso JavaScript e também separando isso do HTML. Da maneira que podemos fazer isso se definirmos uma identificação, vamos para um contêiner. Agora podemos manter isso como HTML puro e só temos nosso JavaScript na seção de script abaixo. Então, primeiro, vamos criar uma referência a este wrapper principal. Fazemos isso exatamente como acima com document.getElementByID. O nome ID que acabamos de colocar em é recipiente e podemos armazenar isso em uma variável chamada recipiente. Agora temos o nosso contentor. Queremos reintroduzir o nosso manipulador de eventos de entrada. Podemos fazer isso com addEventListener. Isso vai levar em dois valores. O primeiro valor é o tipo de evento que queremos ouvir. Assim como antes, podemos usar coisas como clique ou entradas e depois separá-lo por uma vírgula, o nome da função que queremos chamar. No nosso caso, isso é atualização. Vamos salvar esse arquivo e verificar se isso está funcionando bem. Quando clicamos no projeto de lei, isso é atualizado. Se aumentarmos a dica, isso também será atualizado. Finalmente, o valor de divisão. Isto deixa agora a nossa função com acesso a todas as informações de que precisamos. Em seguida, vamos usar todos esses valores para criar nossos cálculos de dicas e, em seguida, exibi-los na interface do usuário. 7. Calcular % mostrando valores: Agora temos uma função de atualização muito simples que pega todas as nossas entradas de usuário. Então agora podemos usar esses valores para calcular nossas saídas de ponta. Vamos usá-los para executar alguns cálculos e, em seguida, atualizar a interface do usuário. Por exemplo, precisamos gerar o valor da nossa dica à direita. Precisamos produzir o total. Precisamos também ter certeza de que quando aumentarmos esse valor de dica, que a porcentagem também seja exibida, e também o mesmo para esses valores de divisão. Vamos começar. Quero remover este registro do console do último vídeo, e então podemos usar esses valores para realizar nossos cálculos. O primeiro que vou pegar é pelo valor da gorjeta. Como vamos fazer isso? Bem, por exemplo, se o usuário inserir uma conta como 100 e um valor de gorjeta de 20%, queremos ter certeza de que o valor da dica em dinheiro é 20. Então temos um valor de fatura de 100, e a maneira que podemos fazer isso é multiplicar esse valor pela porcentagem da dica, como 20. Você pode ver retornado na linha abaixo, temos um valor de 2.000. Isso ocorre porque precisamos dividir o valor da ponta por 100. Isso agora nos dá o valor correto apenas aqui. Se isso fosse 15%, isso nos dará o valor de 15. Agora podemos usar isso em nossa função de atualização, e podemos armazenar isso dentro de uma variável. Podemos chamar isso de Valor de Dica, e vamos definir isso igual através do mesmo cálculo que acabamos de executar. Então, o equivalente 100 é o valor do projeto de lei. Vamos dizer conta multiplicado por nossa porcentagem de gorjeta dividida por 100, para garantir que o percentual de gorjeta seja dividido por 100 primeiro, e depois multiplicar pela conta. Podemos envolvê-los dentro dos colchetes para garantir que o cálculo seja executado corretamente. Vamos fazer um registro do console e podemos verificar se tudo está funcionando bem. O percentual de gorjeta. Atualize o navegador. Vamos fazer o mesmo cálculo. Então 100, podemos selecionar o valor da dica. Você pode ver se movemos isso todo o caminho para cima, os valores atualizados são agora exibidos. Agora temos o valor total da dica. Podemos facilmente descobrir o quanto a dica é por pessoa. Vamos criar uma nova variável logo abaixo, vamos chamar isso de Dica Cada. Isso vai ser bem simples. Tudo o que vamos fazer é pegar o valor da dica, que temos logo acima, e então dividi-lo pelo número de pessoas. Isso está disponível na variável acima chamada Split. A próxima coisa que podemos fazer bem no fundo é descobrir o quanto a conta total é por pessoa. Isto novamente vai ser um cálculo bastante simples. Atualmente temos a conta total, que estamos pegando dentro dessa variável, e tudo que precisamos fazer é dividi-la pelo número de pessoas. Uma nova variável, vou chamar isso de o novo Bill Each. A primeira coisa que precisamos fazer, é adicionar a conta mais o valor total da gorjeta. Isso vai nos dar a conta total quando for pago, que inclui a gorjeta, e então podemos dividir isso pelo número de pessoas que está disponível na divisão. Assim como acima, vamos envolvê-los dentro dos colchetes para garantir que o cálculo seja realizado na ordem correta. Vamos adicionar os valores juntos e, em seguida, multiplicar isso pelo número de pessoas. Vamos testar este. Vamos copiar a nova fatura cada, adicionar isso ao nosso registro do console e agora podemos testar isso. Agora, se adicionarmos o valor de 100, vemos um problema dentro do console. Estamos produzindo o valor de 1000, que é um zero extra adicionado ao final. Vamos tentar mais uma. Se adicionarmos 50, o mesmo problema está acontecendo com o valor de 500. A razão pela qual isso está acontecendo, provavelmente não é muito clara no momento. Isso ocorre porque estamos realmente recebendo um tipo de dados de string em vez de número a partir desta entrada de conta. Podemos verificar isso por console registrando o tipo de, e, em seguida, o valor da nossa conta. Adicione qualquer coisa na entrada, e isso é confirmado com o tipo de string. No entanto, no entanto, o valor da dica, fazemos isso, recarregar. Este é um tipo de número. Antes de quando estamos colocando o valor de nova conta cada, estamos adicionando uma string com um número. O que realmente está acontecendo quando adicionamos a conta ao valor da dica, em vez de realizar um cálculo numérico, estamos recebendo 50, e depois adicionando o zero no final, dando-nos o valor de 500, que vimos em a consola. A maneira que podemos arredondar isso, é converter o valor da conta em um número. Então eu vou citar a seção onde vamos pegar o valor e, em seguida, fazer uso da função de número JavaScript, passando de volta no código, que pega nosso valor de conta. Agora com isso no lugar, agora podemos fazer um novo log de console com o tipo de conta. Salve e recarregue o navegador, e adicionamos qualquer coisa aqui que agora é exibido como um número. Nosso valor agora é exibido como um número, então vamos tentar mais uma vez o valor de nova conta cada. Verifique se tudo está funcionando bem, e agora vemos o valor de 50 em vez de 500. Bom. Então agora temos todos os dados que precisamos trabalhar com, e o próximo passo é realmente produzir esses valores em nossa interface de usuário. Vamos fazer isso de uma maneira semelhante logo acima, onde pegamos os elementos particulares. Mas ao invés de agarrar o valor dos elementos, vamos definir o valor em vez disso. Na parte inferior daqui, podemos adicionar um document.getElementByID. Qual ID queremos pegar para este elemento em particular? Vamos rolar para cima. Há o nosso lugar detentor de zero por cento, que agora podemos remover, e este tem o ID do percentual de gorjeta. Para trás, podemos adicionar isso. Em seguida, para definir o valor de nossos elementos em vez de nosso espaço reservado, podemos usar innerHTML. Este InnerHTML irá definir o valor dentro do nosso elemento, e queremos que isso seja equivalente ao nosso percentual de dicas. Salve e recarregue. Isso agora está funcionando, e também podemos adicionar ao final o símbolo percentual. Podemos adicionar isso usando o símbolo de adição, e, em seguida, desde que queremos adicionar um valor de string em vez de um número, isso vai ser adicionado entre aspas. Agora devemos ver um símbolo de porcentagem se recarregarmos o navegador e rolar pelo controle deslizante de alcance. Em seguida, temos este valor de dica logo abaixo. Vamos rolar de volta para o nosso código. Este é o elemento que queremos atingir apenas aqui e este tem o ID do valor da dica. Assim como aqui, nós também vamos usar document.getElementByID, passar o ID do valor da dica e, novamente, vamos definir o innerHTML. Nós já temos isso calculado logo acima no valor do valor da dica. Vamos tentar esta, uma nota de 50. Eu vou definir a ponta, e 10% de 50 agora é igual a cinco. Vamos usar isso mais algumas vezes, então eu vou copiar isso, colar isso logo abaixo. O terceiro será para o valor total, que é um cálculo do nosso projeto de lei sendo adicionado ao valor da gorjeta. O ID para esta seção foi total com dica, que podemos ver a partir do nosso HTML logo acima, foi esta seção apenas aqui. Em seguida, podemos adicionar que o conteúdo HTML com InnerHTML, enviar este igual a nossa conta sendo adicionado ao nosso valor dica. Vamos tentar isto, uma nota de 50. Estes dois valores somados nos dão o total de 55. Em seguida, temos a seção dividida logo abaixo. A primeira coisa que vamos buscar é o valor da divisão, então uma pessoa, mas agora vamos apenas definir o número de pessoas como 1, 2, 3, em vez de entregar pessoas ou pessoas logo depois. Vamos começar com este. Obter elemento por ID. O ID que precisamos para este, se rolarmos para a nossa seção dividida, podemos ver em seguida onde vou colocar todo o conteúdo. Se removermos isso, este será o valor de divisão. Este é o valor da nossa variável de divisão logo após este. O próximo que vamos pegar, é a conta total por pessoa. O ID para este elemento nesta seção aqui vai ser faturar cada. Novamente, também temos esse valor armazenado dentro da variável chamada nova conta cada. A última seção com a qual precisamos trabalhar é a ponta cada uma na parte inferior. Vamos novamente colar em nosso getElementByID. O spam que estamos atualizando tem o ID da dica cada um. Vou definir o valor para ser a ponta de cada variável, que você armazenou acima. Salve isso e volte ao nosso projeto. Eles são Bill? Sabemos que tudo isso está funcionando, então vamos para 10%. Uma vez que só temos uma pessoa, a conta é de 55, e eles também pagam a gorjeta total de cinco. Vamos tentar abrir isto para ser duas pessoas. O valor é atualizado aqui e isso agora atualiza nossos valores logo abaixo. Isso agora deixa a maior parte da funcionalidade da nossa calculadora de dicas no lugar. Em seguida, vamos avançar para adicionar alguma formatação na moeda e também os valores divididos. 8. Formatando moeda e divisão: Bem-vindo ao vídeo final deste projeto do curso. Neste vídeo, vamos fazer alguns retoques finais em nossa calculadora de dicas e, em particular, vamos formatar nossa moeda e também trabalhar com a saída dividida. Primeiro de tudo, vamos criar algumas funções que vai arredondar nossos valores de moeda para duas casas decimais, juntamente com colocar um símbolo de moeda na frente também. Juntamente com isso, onde temos nossa divisão no fundo, vamos mudar isso para produzir uma pessoa ou duas pessoas, três pessoas , e assim por diante. Também esta função de moeda pode ser usada para os valores de divisão na parte inferior também. Para fazer isso, vamos descer para o nosso script, e se dermos uma olhada onde estamos produzindo todos esses valores, em vez de simplesmente produzir uma variável, vamos passar isso para uma função. Vamos criar esta função bem no topo. Vamos começar com a função que vai formatar o nosso dinheiro. Para isso funcionar, também precisamos do valor real da moeda para trabalhar, e vamos passar isso para esta função muito em breve. Agora, há algumas coisas que queremos fazer com esse valor real da moeda. A primeira coisa a fazer é arredondar isso para duas casas decimais, e então nós vamos adicionar um símbolo de moeda na frente. Vamos pegar nosso valor, e podemos reatribuir isso a um novo valor. O novo valor será igual ao valor atual, e podemos definir isso para duas casas decimais usando o método ToFixed. Esta nova função então precisa retornar nosso novo valor. Então, antes de ir em frente e produzir este novo valor, nós também podemos adicionar a este início uma string que vai conter um símbolo de moeda, adicionar um espaço, e então nós podemos adicionar isso ao valor. Uma vez que é uma função, agora podemos reutilizar isso em todos os lugares que precisamos para produzir um valor de moeda. Vamos pegar isso, e se rolarmos para baixo, o primeiro é o TipValue. Em vez de produzir nosso valor incluído nesta variável, agora podemos chamar essa função passando em nosso TipValue. Este TipValue será realmente recebido dentro de nossa função logo acima como este valor, e então podemos fazer nossas alterações e retornar o novo valor. O total com ponta, também podemos pegar isso, e substituir isso com a nossa função. A seguir temos NewBilleach. Passe isso para a nossa função e, finalmente, o valor da dica para cada pessoa. Vamos agora salvar isso e verificar se isso está funcionando no navegador. Adicione um valor, e agora se selecionarmos valores de ponta diferentes e também dividirmos, vemos que estes agora são arredondados para duas casas decimais ao lado de saída do símbolo de moeda. A próxima coisa que vamos fazer é criar uma nova função que vai formatar a saída dividida, então esta função irá ou produzir uma pessoa, ou irá produzir duas pessoas e assim por diante. Volte para nossa seção de script, vamos criar uma nova função, e vamos chamar isso de FormatSplit. Isso também vai levar em um valor que será o número de pessoas entre as quais o projeto de lei é dividido. Vamos primeiro verificar se esse valor é igual a 1. Se for, então queremos retornar uma string que simplesmente diz, uma pessoa. Então, podemos retornar o valor mais uma string que é a palavra pessoa. Esta linha de código só será executada se o valor da divisão for igual a 1. Na verdade, isso só quer ser uma corda. Se o valor for dois ou superior, vamos então retornar um novo valor, que é o valor atual, e desta vez em vez de pessoa, o valor será pessoas. Agora saída isso, vamos usar nossa função FormatSplit, passando em nossa divisão. Desligado para o navegador, vamos verificar se isso está funcionando. Podemos adicionar um valor, e vemos a saída de uma pessoa. Vamos mudar isso para o número dois, duas pessoas, três pessoas, e assim por diante. Isso agora é algumas melhorias agradáveis para nossa calculadora de dicas, no entanto, há um caso de borda que precisamos cuidar, e isso depende dos valores particulares que adicionamos. Se fizermos algo como 47 e 15 por cento de gorjeta, dividido entre duas pessoas, pode não ser imediatamente óbvio, mas há um pequeno problema aqui. Esse problema é a conta de cada um, e também a ponta de cada um não cobre os totais apenas sobre o topo. A dica cada um é 3,52, que nos dará o valor de 7,04, e queremos fazer isso 7,05. O mesmo com a conta real cada um se cada pessoa coloca em 27.02, isso será ligeiramente menor do total. Agora, a maneira que podemos corrigir isso é indo para a nossa função que criamos anteriormente, que é FormatMoney. No momento em que chamamos o método ToFixed, isso é realmente arredondado em cima ou para baixo dependendo do número. Para corrigir esse problema, sempre queremos ter certeza de que nosso valor é arredondado para cima e nunca arredondado para baixo. Há alguns cálculos matemáticos complexos que podemos fazer para que isso aconteça, no entanto, também há uma maneira muito mais simples. Lá no topo, vamos novamente pegar nosso valor e mudanças. Podemos fazer uso de uma função matemática chamada ceil, que sempre arredondará nossos números. No entanto, por padrão Math.ceil irá arredondar para o número inteiro mais próximo. Por exemplo 27.02, será arredondado para ser 28. Isto devolver-nos-ia então alguns valores que são demasiado elevados. Em vez disso, queremos pegar a segunda casa decimal e, em vez disso, arredondar isso para cima. Para fazer isso, vamos multiplicar nosso valor original por 100. Vamos fazer alguns logs de console e ver como isso parece no navegador. É assim que o console registrará o valor original, então o primeiro valor e, em seguida, faremos o mesmo log do console, mas depois que esse valor for alterado. Vamos abrir as ferramentas de desenvolvedor com o botão direito do mouse e Inspecionar. Vá para a consola. Se olharmos para estes em pares, particularmente para baixo na parte inferior, 3.525 foi agora arredondado para 353, da mesma forma que 27.025, isso foi arredondado para cima. Agora isso foi arredondado para cima, agora podemos dividir isso por 100 para nos dar as casas decimais originais. Vamos pegar esse valor, dividi-lo por 100 e, em seguida, recarregar o navegador. Vamos adicionar nossos valores de volta no lugar, e agora esses valores multiplicados por duas pessoas não serão suficientes para cobrir o total da conta e gorjeta. Este é apenas um pequeno detalhe, mas algo que poderia ser realmente importante quando se trabalha com dinheiro. Vamos remover esses logs do console e limpar nossa função. Isso é suficiente para o nosso projeto de calculadora de dicas, espero que você tenha gostado, e também tenha aprendido algo novo. Agora você pode passar para o próximo projeto, fazer uma pausa ou adicionar algumas personalizações adicionais a este projeto via CSS para alterar a aparência, ou você pode adicionar algumas funcionalidades diferentes do JavaScript. Espero que tenham gostado deste projecto e vejo-te no próximo. 9. Siga-me no Skillshare!: Meus parabéns por ter chegado ao fim desta aula. Espero que tenha gostado e adquirido 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. Obrigado mais uma vez. Boa sorte. Espero que te veja de novo numa aula futura.