Transcrições
1. Introdução ao curso: Olá e bem-vindo à criação de uma calculadora à mão Aqui na habilidade compartilhar ponto com. Neste curso, vamos criar uma nova calculadora a partir do zero usando HTML, CSS e JavaScript. Vamos escrever HTML moderno,
CSS e JavaScript, e seu projeto ao longo deste curso é basicamente criar uma nova calculadora, assim como o que você vê aqui. Mas, você sabe, fazer o seu parecer um pouco diferente, pouco mais agradável, provavelmente. E adicione a interatividade aqui para que você possa clicar em qualquer um desses números e fazer todo tipo de matemática, se quiser. Este curso é perfeito para Front e desenvolvedores que estão aprendendo html, CSS e JavaScript e você quer um pouco mais mãos na prática, criando algo um pouco mais realmente vida do que apenas um aplicativo Olá mundo ou uma
lista para fazer . Se isso parecer muito interessante para você, sinta-se livre para participar deste curso e começaremos imediatamente
2. Configurando o projeto: Olá e bem-vindo à primeira lição sobre a criação de uma calculadora a partir do zero ou à mão . Neste curso, vamos usar HTML CSS junto com alguns JavaScript. Agora, nada vai ficar muito complicado, mas você já deve saber básico HTML. CSS. E se você não sabe qual é a parte do javascript, tudo bem, eu posso guiá-lo através dessa parte quando chegarmos lá também. Agora, as
primeiras coisas primeiro. Eu criei um arquivo chamado index dot html e estou usando V s Codas, meu editor. Então eu vou digitar html cólon cinco e, em seguida, aperte guia, e isso apenas preenche automaticamente um monte de coisas mágicas para mim. Isto é o que você precisa para obter sua página web html regular configurar de qualquer maneira, Então eu só vou jogar um título aqui chamado Calculadora em um HTML. Se você quiser alterar o título da aba, basta mudar o texto aqui. Agora eu vou virar para o Firefox, e eu posso ir para cima para arquivo aberto, e eu posso selecionar este arquivo HTML onde quer que você salvar isso. Então, se estiver em sua mesa, você vai querer ir para a sua área de trabalho em abrir este arquivo HTML. Eu sempre chamo de índice dot html porque isso é uma boa convenção de nomenclatura para sites qualquer maneira. Então vamos em frente e abrir isso e não veremos nada que possamos ver aqui em cima. Diz “Calculadora”. Isso é tudo o que adicionamos agora para demonstrar que esta página está funcionando. Não podemos dizer dentro do nosso corpo onde devemos ser capazes de escrever texto e adicionar HTML e todo tipo de coisas lá. Nós podemos ter um H um tag, e este H um tag é um cabeçalho um. Então é um texto grande. E se eu apenas salvar esse arquivo e virar para disparar Fox e depois atualizar esta página, você pode ver que diz grande texto aqui. E o texto de tamanho normal é como em um parágrafo com a tag P. E eu podia sentir isso com um texto de Laura Ipsum lá dentro. Então vou dizer isso de novo. Passe para o Firefox e vamos clicar em Atualizar. E então este é um texano de tamanho normal. Este é um texto grande. Nada sobre isso é fantástico. Esta é a versão mais básica de um site. Você poderia criar, mas é muito importante ter esta base configurada. Então o que estamos dizendo aqui é usar DOC tipo HTML. Esta é a tag HTML cinco. Então temos um elemento HTML, eo padrão Lang é Inglês. Tecnicamente, você não precisa disso. Os treinadores V preencheram automaticamente isso para mim. Nós dissemos que o personagem disse seu UTF oito. Então podemos ter caracteres japoneses,
coreanos, caracteres árabes, caracteres
ingleses, todo tipo de coisas aqui. E a nossa página não vai parecer engraçada. Todos os personagens estão indo para renderizar como eles regularmente faria. Então nós dissemos, Vieux port, isso basicamente vai fazer nosso site responsivo. Então, se você carregasse esta página, digamos que seu dispositivo móvel, isso funcionará da maneira que deveria funcionar e você pode escrever consultas de mídia CSS. Em seguida, adicionamos um título. Esse título é o título apertado aqui em cima, e isso é tipo de tudo o que vai na cabeça e no corpo é onde colocamos todo o nosso conteúdo
real. E então nós colocamos tudo isso dentro de nossos elementos HTML e basicamente o que estamos dizendo, Aqui está tudo daqui para ouvir todas essas coisas no interior é ht não avançar. Nós vamos colocar todo o nosso conteúdo real dentro desta seção aqui, e nós vamos estar escrevendo alguns CSS bem aqui com o CSS interno físico. Então vamos escrever CSS bem dentro deste documento e no final deste curso
irá limpar isso e certificar-se de que ele vai para seu arquivo apropriado para que nós estamos seguindo as
melhores práticas. Então, primeiro, precisávamos descobrir esse arquivo. Precisamos estruturá-lo. Precisávamos tirá-lo do jeito que parece agora, uma vez que você tem algo assim, você pode realmente começar a criar sua página da Web. Mas não é até que tenhamos um pouco disso configurado que podemos criar uma
página Web adequada . Então a próxima última coisa que vamos fazer é escrever algum html e vai
parecer totalmente nojento. Mas então nós vamos adicionar alguns CSS e vai olhar muito, muito bom
3. Stubbing a HTML: Tudo bem. As primeiras coisas primeiro. Precisamos parar um pouco de HTML. Agora, esta parte honestamente não é a mais excitante. Mas html é o esqueleto por trás de cada site, cada aplicativo web. É a chave para dizer Javascript e CSS como enfraquecer o estilo e interagir com a nossa página. Agora vamos criar uma calculadora, e vamos apenas usar HTML para começar, então isso vai parecer muito nojento. Mas o que podemos fazer é criar uma div onde todo o conteúdo da nossa calculadora pode viver. E se quiséssemos, também
poderíamos dar essa classe de calculadora. Agora, uma vez que entramos em alguns dos CSS, vou descrever quais classes e quais idéias são e coisas assim s o A div é apenas um elemento divisor
padrão. Realmente não faz nada. É só um elemento fictício. É apenas para criar coisas de propósito geral. Mas dentro daqui, também
queremos outro div. E é aqui que os nossos resultados vão chegar. Então é aqui que está o topo da calculadora. Onde você coloca um mais dois é igual a três. Isso é onde isso vai ir, então nós vamos criar e uma lista Nordling com todos os
nossos itens de lista aqui. E então vamos dar uma olhada no que temos atualmente. Alguém vai escrever um teste lá. Eles salvam este arquivo e vamos para o Firefox e clique, Atualizar, e nós podemos ver isso. Eu só estou fazendo aqui para que você possa ver aqui em cima. Conheci 300%. Não parece muito bom, não é? Bem, precisamos adicionar multiplicação clara, dividir números um a 10 ou zero a nove, vez de sinal igual em todos os tipos de coisas. Então vamos em frente e adicionar isso aqui. E, em seguida, no próximo vídeo, podemos fazer o CSS realmente tocar isso da maneira que queremos que ele tipo de olhar. Mas agora precisamos criar uma calculadora com alguns botões. Agora, você não precisa usar uma lista ordenada da ONU, que é o que eu estou usando aqui na lista ordenada. Com um item de lista dentro dele, você pode usar botões também. Você pode usar links, você pode usar qualquer coisa que você gosta. Eu só vou usar um A nordle ist porque ele meio que mantém o HTML
realmente, muito simples. Então eu vou apenas copiar isso algumas vezes e não tenho certeza se isso é suficiente, mas nós vamos descobrir perto do final. Então o 1º 1 vai ser C para limpar. Então vamos adicionar um asterisco. Esse é o símbolo de multiplicação e o símbolo de divisão deixa sair um decimal lá dentro. É fazer sete, 89 e então basicamente, como no planejamento disso é este vai ser o top quatro e então nós temos um conjunto de três números aqui. Então teremos outro conjunto de três números e outro conjunto de três números, e a maneira como eu organizo isso pode ou não estar totalmente correta. Talvez tenhamos que mudar alguns desses, mas tudo bem. A forma como vamos criar isto vai ser completamente flexível. Foi em um sinal de mais lá e então vamos fazer 45 e seis Jones a menos, sinal 12 e três e isso vai parecer muito bizarro só até termos este tipo de tudo resolvido, em
seguida, um sinal de igual. Vamos colocar um zero lá também e de novo. Se precisarmos resolver isso, podemos ajustar isso mais tarde. Mais tarde. Isso é totalmente bom. Então nosso HTML parece algo assim. E, por fim, não
vamos apenas criar uma calculadora regular, mas também certificar-nos de que isso é algo que você pode usar em seu portfólio. Então vamos criar outro DIV aqui com uma classe e eu movo isso para baixo. Vamos chamar de assinatura, e é aqui que você pode colocar sua assinatura quando terminar seu projeto. E eu vou chamar isso de uma boa calculadora pelo seu nome. E por último, mas não menos importante, vamos em frente. Refresque-nos e nada extravagante, literalmente a página mais chata que podemos pensar. Mas na próxima lição, vamos começar a aplicar alguns CSS, e isso vai parecer incrível imediatamente.
4. Como estilizar a página: Certo, até agora, temos essa página muito feia. Isso não é jeito de viver sua vida. Isto não é mais 1995. Podemos fazer isso parecer muito, muito legal. E, na verdade, não temos que fazer tanto trabalho. Então é aqui que entramos em CSS, e vamos escrever nosso CSS aqui apenas por enquanto. E então podemos nos mover para o seu próprio arquivo um pouco mais tarde. Então, as primeiras coisas primeiro. Acho que precisamos definir alguns detalhes sobre nosso corpo, nosso passado, todo
esse pager onde está todo esse branco. Vamos mudar um pouco disso para que possamos mudar o corpo inteiro. Esse é o elemento do corpo inteiro aqui, simplesmente digitando corpo. E isso combina aqui. Então é o nome exato do elemento. Então temos essas chaves de abertura e fechamento. E aqui podemos apenas dizer cor de fundo, e então podemos dar-lhe cor hexadecimal. Poderíamos dar um nome para que pudéssemos dar um nome como Aqua, e isso vai parecer terrível. Mas
olha, olha, agora temos água, então você sabe que não temos mais 1995. Temos agora um site de 1997. Vamos em frente e adicionar uma cor hexadecimal, embora de 999 E isso é apenas um tom de cinza. E meu código V acha que estou usando um template Django, mas não estou. Estou usando um modelo HTML. E se eu passar o mouse sobre este tempo suficiente, você pode realmente ver que o código V s é bom o suficiente para me dar um seletor de cores e você pode escolher qualquer cor que você gosta. Então você não tem que acabar usando as mesmas cores que eu uso. Só vou usar algo genérico. Ah, e você pode personalizá-lo do jeito que quiser. Vamos continuar e salvar isso e atualizar nossas páginas mais. E OK, você sabe, não
parece tão brega quanto 1997. Talvez estejamos em 1999 agora. Vamos dar um salto quântico aqui. Vamos em frente e adicionar um Grady int aqui atrás. Então Grady INTs em CSS pode ser meio complicado. E o que eu gosto de fazer é usar um serviço chamado Color Zilla e eu quero usar o gerador int
Grady final aqui e o que eu vou fazer é apenas pegar estes e arrastá-los para baixo. E então vamos usar um rádio e mudar essas cores. Então, qual deve ser a cor interna agora que podemos cutucar por aqui. Podemos usar qualquer tipo de cor que quisermos. já tenho um em mente Masjá tenho um em mente. 70 77 c Então é cinza. E mais uma vez a minha calculadora vai ser muito boa. O seu pode ser super colorido e a cor externa aqui. O que eu quero que esta cor seja? Preto, talvez? Sim, eu gosto disso. E então tudo o que temos que fazer é clicar em copiar. E então esta é a nossa pequena prévia. E mais uma vez, eu só vou fazer isso maior aqui. E esta é a nossa pequena pré-visualização aqui, e este é todo o código que ele gera para nós. Este é um CSS normal. Não temos de nos preocupar com o que isto é. Nós sabemos que isso vai funcionar, então eu apenas clique em copiar, voltar para o nosso código aqui, e eu vou literalmente apenas colá-lo aqui e eu vou consertar alguns dos inventos. Vamos em frente e salvar isso. Vamos voltar para a nossa calculadora e atualizar. Ok, nada mal, nada mau. Podíamos ver que o Grady se repetia um pouco. Então nós temos que ajustar isso se quisermos que isso tipo de esticar todo o caminho de cima para baixo. Agora, no CSS, temos um pequeno hack de vida legal que não é realmente um ato de vida. Não é mesmo hackear tudo. Tudo o que vamos dizer é o HTML e o corpo. Todo o elemento HTML, juntamente com todo o corpo, deve ocupar 100% da altura do seu navegador. E então vamos selecionar o elemento HTML e os elementos do corpo separados por uma vírgula, e vamos simplesmente dizer altura 100%. E quando eu atualizar a página aqui, vamos ver que isso realmente tipo de conserta a si mesmo, então não vemos um pouco repetindo Grady int na parte inferior lá. Assim, não
podemos ver a mensagem dela, mas está tudo bem. Não precisamos fazer isso agora. Em seguida, vamos em frente e fazer esta calculadora de cálculo parecer um pouco, você sabe, vamos bloquear e mais como Woo. Então, precisamos criar uma classe perto chamada Calculator Calcular Whore, e eu estou selecionando este elemento por seu nome de classe usando o seletor DOT. Então ponto significa classe e então nós apenas combinamos este nome com este nome aqui e, em seguida, enfraquecê-lo estilo. Vamos em frente e dar a isso um fundo. Acho que podemos fazer uma cor de fundo,
mas vamos fazer um fundo normal de 353535 e isso é apenas um cinza mais escuro. Acho que podemos fazer uma cor de fundo, Vamos dar a isso um com de algo como 300 pixels. E talvez vamos dar um pouco de preenchimento também, tapinhas de uns 15 pixels. Vamos ver o que isto parece até agora. Certo, pelo
menos podemos lê-lo. Então você sabe que isso é um passo na direção certa. Vamos em frente e centralizar isso também. Então é fazer posição. Top absoluto 50% esquerda 50%. Agora, isso não está realmente indo para, uh, centro. Isto vai tomar este canto aqui em cima, e vai colocá-lo bem no centro. Certo? Palavras, mais leves assim. Então isso não é bem centro, mas nós podemos compensá-lo pela metade do com e metade da altura, então nós podemos tipo de realmente bater no centro com uma declaração chamada Transformar e nós dizemos traduzir o acesso X em menos 50%. 50% dos elementos com e o acesso aos Emirados Árabes Unidos também aumentaram em 50% da altura. Não salve isso e atualize aqui e agora ele está realmente centrado, e quando eu zoom próprio, ele sempre vai ficar centrado. É agora que estamos chegando a algum lugar. Por último, mas não menos importante, vamos em frente e nos dar um pouco de arredondamento, talvez uma sombra de caixa. E vamos enviar-lhe todo o nosso texto para ser Vamos alinhar todo o nosso texto para ser centrado s Então nós vamos apenas fazer alguns toques finais em nossa calculadora nesta lição, e então a próxima vamos realmente fazer a calculadora parecer uma calculadora com botões e tudo mais. Então, alinhar texto, centralizar e tudo o que vai fazer é certificar-se de que todo o nosso texto está dentro. O centro vai ajustar isso mais tarde. Podemos sobrescrever isso mais tarde. Vamos nos dar um raio de borda de algo como cinco pixels alguém que voltamos aqui e atualizamos você pode ver é realmente arredondado aqui como uma calculadora real na vida real. E vamos em frente e dar a isto uma sombra de caixa. Então, vamos dizer que a sombra da caixa no acesso X não deve ser nada sobre o porquê Access para cima e para baixo deve ser seis pixels. Não deve haver borrão. E a cor deve ser. Eu vou dizer um. Um um, um, um. Esse olhar está bem? - Sim. Isto é sobre onde você vai? Isto é sobre a cor que eu quero aqui em cima. Então essa é a primeira caixa quebrada a segunda sombra caixa. Vou acrescentar. Faço isso com uma vírgula aqui. A 2ª 1 vai ser ex access zero. Por que acessar oito pixels? O desfoque vai ser 10 pixels iam dar a este um RGB um valor. Então isso é um valor Alfa verde vermelho. E isso vai ser 00 novos 000 Então essa é a cor preta em RGB. É a ausência de cor, por isso não tem nenhum valor. É por isso que damos zeros. Então digamos que tem que ser 0,75%. Pague a cidade e vamos ver como isso se parece. E agora só temos este pequeno Sim, parece uma fronteira no fundo. É arredondado e tem uma sombra, então na verdade parece que está pulando da tela um pouco. A próxima lição. Vamos em frente e estilo, os resultados e os botões e talvez a sua assinatura também se tivermos tempo suficiente.
5. Como estilizar os botões: Olá. Bem-vindos de volta a esta lição. Vamos seguir em frente e estilizar a seção de resultados que estilo todos os botões, basicamente todos de uma vez. E então vamos se tivermos tempo suficiente nesta lição. Se não enfraquecermos, empurre isto para a próxima lição. Mas se tivermos tempo, vamos também estilizar a assinatura. Primeiro, vamos fazer a seção de resultados e precisamos ser capazes de atingir esse Div. Agora, se tivermos como alvo um Div, nosso corpo selecionará cada mergulho. Temos um aqui, e temos um aqui e um na nossa assinatura, então não queremos fazer isso. Queremos estilizar apenas este em particular. Então agora eu posso dar a isso uma classe de apenas chamá-lo resultado e por padrão vai ter zero lá Now. Isso não vai realmente fazer nada até que escrevamos alguns CSS para que eu possa escrever resultados de ponto e lembrar que DOT significa classe e, em seguida, abrir e fechar chaves. E vamos fazer isso realmente feio. Vamos nos dar uma cor de fundo de vermelho. Vamos dar a isto uma cor azul. Essa vai ser a cor do nosso texto. A largura vai estar em algum lugar em torno de 90% ish novamente. Você pode ajustar isso o quanto precisar. Quando você está criando sua própria calculadora também. Dê-nos uma margem. Então este vai ser o preenchimento em torno do elemento. Então, o preenchimento por aqui e nós vamos dizer no topo oito pixels à direita é zero pixels na parte inferior, 20 pixels e à esquerda, 10 pixels. E vamos ver com o que estamos trabalhando agora. Ok? Então parece mesmo um bar. Então, você sabe, nada mal. Vamos mudar esse texto. Alinhar embora linha têxtil vai ser para a direita. Talvez nos dê uma altura de, tipo, 50 não 50% 50 pixels ish. Talvez nos dê uma altura de linha de cerca de 50 pixels também, apenas para que o nosso texto permaneça centralizado. Sim. Ok. Está se juntando. Precisamos que o fundo seja maior, , então vamos fazer o fundo maior. E então vamos mudar a cor de fundo e coisas assim também. Por isso, vou adivinhar com este, , não
sei, 36 pixels algures por aí. Vamos ver o que isso faz. Ei, nada mal. Talvez 35. Sim, mal fez diferença. Nosso número é abraçar aquela fronteira direita onde aquele vermelho se encontra com o grande. Vamos em frente e dar um tapinha, então haverá algum espaçamento para a direita. 10 pixels. Lá vamos nós. Isso parece um pouco melhor agora. Acho que precisamos de mais três coisas no seu E se este número ficar muito, muito longo? Se este número é
realmente, realmente, muito, muito, muito, muito, muito , muito longo, vai ser uma espécie de Caia fora, nós não queremos isso. Então vamos nos dar um excesso de Oculto e que apenas certifique-se de que nosso número sempre, você sabe, fique dentro dos limites físicos de uma calculadora do mundo real. E talvez, vamos,
ah, ah, mudar a cor de fundo. Vamos nos livrar do vermelho e vamos fazer como C E C F A C Em algum lugar lá. Como é que isso vai parecer? Sim, parece uma velha calculadora verde e a cor do texto. Vamos fazer isso em algum lugar. Três B três b o três b 32 de algo assim. E novamente, essa cor é apenas essa cor escura e
acinzentada acastanhada. Isso é refrescante. Isto vai começar a parecer um pouco melhor. Ok, ok, nada mal. Talvez. Vamos mudar a fonte e vamos mudar a sombra da caixa estão em sombras de Bach. Então, a família da fonte. Digamos que essa família de telefones tem que ser digital. Você pode mudar este fundo também, se quiser. Se você tem o fundo digital, ele vai carregá-lo. Eu aparentemente não, então não vai carregá-lo, então eu realmente vou me livrar disso. Mas pode mudar o telefone para o que quiser. Ariel Times New Roman Algo personalizado vai realmente adicionar uma frente personalizada um pouco mais tarde . Descendo a estrada em Last Thing estava em uma caixa sombria caixa sombra. E digamos que esta sombra de caixa tem que estar por dentro. Vamos dizer que é um inseto. 00 e oito pixels vai ser o borrão e vai ser RGB um azul tão vermelho verde Alfa 000 que vai ser preto e um 0.5 é 50% como um decimal. Ele também teve mais um aqui e no set zero picaretas, esses dois pixels zero e então talvez vamos apenas registrar. Podemos dar uma olhada no que estamos construindo aqui. Veja como isso parece. Oh, sim. Certo, então temos essa sombra lá dentro. É muito fraco, mas parece muito bom. Então. Temos o vermelho em cima e não queremos necessariamente que isso seja lido. Queremos que seja uma cor que vai parecer que vamos dar alguma profundidade. E nós realmente só precisamos de uma cor mais escura para isso, como um um um um um um um um um um um um? Não, isso não é ruim. Vamos em frente e adicionar alguns números aqui. Vamos em frente e estilizar isso, então. Sim, não
vamos ter tempo para este neste vídeo, mas a assinatura que podemos fazer no próximo vídeo. Então a coisa boa sobre tudo isso é enfraquecer o estilo, tudo isso de uma vez. Então vamos em frente e selecionar este elemento ordenado por seus elementos. Nome ul. Vamos dar-lhe um preenchimento de zero e uma margem de zero. E vamos ver o que isso faz. Certo, esse tipo de esmaga as coisas juntas. Isso é bom. Isso é o que queremos. Próximo. Queremos selecionar esse mesmo UL e, em seguida, todos os elementos de item de lista abaixo dele. Então este é o nosso elemento pai. É este tipo aqui. E então todos os elementos Children chamados Al. Eu ia pegar aquele e aquele e aquele todo o caminho para baixo. Então, as primeiras coisas primeiro. Vamos nos livrar desse estilo de lista. Queremos ter certeza de que isso não parece uma lista. Lá vamos nós, sem mais pontos de bala. Em seguida, vamos dar a isso uma cor de fundo de Digamos apenas registrar para sabermos
com o que estamos trabalhando que é apenas detestável. Mas cada botão também deve ter um pouco de preenchimento. Podemos dizer que a largura de cada um será em torno de 15%. Podemos ajustar estes na estrada se algum destes estiver incorreto, a
propósito, e também vamos usar esta coisa chamada Float agora em Modern nos vê, você pode usar caixa flexível, e você também pode usar grade. Nós vamos ficar com flutuador e flutuar é apenas uma maneira mais fácil de lidar com esses botões porque nós queremos que todos os tipos de abraço lado a lado. E não queremos necessariamente entrar nas complexidades da caixa flexível ou grade porque é apenas uma calculadora. Só queremos manter isto simples. Então, vamos atualizar nossa página. E você poderia olhar para isso imediatamente? Isso toma forma como uma calculadora, e na verdade, eu acho que tenho tudo isso na ordem certa para limpar a divisão de multiplicação. Esse é o nosso período 789 mais 456 menos 123 igual. E então zero provavelmente acabará fazendo o zero ocupar um ponto abaixo de um abaixo de dois e abaixo de três. E então o sinal de igual vai cair também. Estamos quase lá com os botões. Vamos mudar a cor para como um branco. Então esse é o símbolo hexadecimal para Branco. É o número assinado F f f ou você poderia apenas digitar branco. Todos eles devem ter uma margem, e a razão pela qual queremos isso é porque nós não queremos que todos eles sejam tão lado a lado que ele realmente se parece com um botão grande. Queremos que eles sejam separados. Então, se eu salvar isso e atualizar, você verá que esses botões realmente se separam em botões. E isso é por causa da nossa margem aqui. Agora precisamos adicionar um cursor porque atualmente, se você acabou de colocar o mouse sobre, ele não se parece com um botão. Sua boca não muda. Mas se atualizarmos com o cursor, o mais realmente mudou. Parece que você pode clicar nele. Isso é bom para a experiência do usuário. Vamos nos dar, como um tamanho divertido de talvez 20 pixels. Algo como essa linha têxtil vai ser o centro. Acho que não devemos definir essa linha de texto. Não, não
sabemos que já está pronto. Vamos também dar a estes um raio de borda para que os botões não sejam super duros e pontudos nos cantos. Vamos nos dar a bordo de um raio de... Acho que quatro pixels talvez não sejam suficientes. São quatro pixels. Certo, que tal cinco pixels? Seja como for com cinco pixels. Por enquanto, também
precisamos mudar a fonte, para a
qual não teremos tempo. Neste vídeo. Faremos isso em outro vídeo. Ah, e nós vamos apenas um monte de outras coisas aqui também. O que estamos perdendo agora? Então a cor de fundo é vermelha. Talvez vamos mudar a cor de fundo ou algo que se pareça mais com um botão. Então não é tão detestável e em seu rosto alto. Vamos também adicionar uma sombra de caixa para que por baixo aqui, assim como o que temos aqui em baixo, na verdade
parece que temos algum tipo de sombra ou algum tipo de elevação fora da calculadora. Então, em primeiro lugar,
essa cor de fundo realmente precisa ir que não pode mais ser lida. 45 por cinco por cinco. Nada mal. E se fizéssemos 40? Sim,
vamos com aquele isqueiro. Sim, Um pouco mais fácil de trabalhar, na minha opinião, mas de novo, isso é totalmente com você. Por fim, vamos em frente e adicionar esta caixa uma sombra que vamos adicionar às sombras aqui, então o primeiro 1 vai estar no eixo X. Não se mova em nenhum lugar sobre o porquê de acesso mover para baixo cinco pixels e o azul vai ser zero. E então vamos dizer que isto deve ser um cinco. Um 585 E isso nos dá essa pequena colisão lá embaixo, então isso realmente começa a parecer uma calculadora. É também em um secundário, mas no seu e no botão set, não um botão manter dizendo. Quis dizer, Box Shadow. Vamos ter uma sombra de caixa interna e vamos adicionar uma segunda sombra com uma vírgula
lá no eixo X, movendo zero no acesso Y movendo-se para baixo dois pixels. O desfoque deve ser zero pixels. E vamos dar a isso uma cor um pouco mais escura. Acho que isso não é muito escuro. Não é não? Isso é um cinza bastante padrão e leva atualização. Ok, ok, eu posso viver com isso. Penso que isso é bom para esta lição em particular na próxima lição. Vamos, hum, bem, eu disse, nós vamos fazer isso. Eso Vamos estilizar isso um pouco. Podemos realmente voltar a isso uma segunda vez, e então vamos fazer um pouco mais com os botões
6. Sua assinatura: no último vídeo, eu disse, Nós vamos trabalhar na assinatura. Eu provavelmente não deveria ter feito essa promessa, mas nós vamos continuar com ela de qualquer maneira, porque foi o que eu disse. Faremos isso na nossa assinatura. Vamos em frente e copie essa aula. O nome da classe, assinatura e enfraquecer alvo que, porque é uma classe, podemos usar o ponto para assinatura ponto e podemos dar isso algum tipo de cor. Então, talvez branco. Podemos ajustar isso um pouco mais tarde também. A família
da fonte pode ser algo totalmente diferente. Talvez. Vamos comentar isso por enquanto. E isso é apenas um comentário CSS aqui. O tamanho da fonte. Vamos ver, não
use pixels. Vamos usar reinos. Então 0,75 relativo Mm diz sim, poderia realmente me dizer o que é isso. Seria ótimo se o fizesse. Para floresta escalável, o tamanho da fonte é um fator de escala aplicado à
unidade E. M. M.de frente. E basicamente esta é uma unidade relativa e M. Portanto, um é o seu tamanho de fonte normal e 0,75 é cerca de 3/4 do seu tamanho de fonte normal. Seja lá o que for, vai ser outra vez. Podemos mudar isso na estrada. Se decidirmos que talvez os quartos não sejam do jeito que queremos. Digamos que o texto que uma linha será para a direita. E só para sabermos onde estamos trabalhando, uma fronteira marítima, um pixel vermelho sólido porque estamos usando muitos carros alegóricos aqui. Isto pode não ser apenas uma escrita div aqui. Isso pode estar ocupando algum espaço extra, e com certeza, você pode realmente ver que esta é a assinatura inteira. Nós não queremos nada disso. Então o que precisamos fazer aqui é posição relativa, e isso vai nos permitir definir um índice SET. E Zed Index é como, você sabe, quando você está pintando em uma tela e você pinta camada em cima da camada, isso é o que isso é como que os índices dizendo que poderíamos colocá-lo na frente de outras camadas estavam atrás outras camadas e horas. Esse índice, neste caso, vai ser menos um. Queremos colocá-lo atrás de outras camadas, e agora parece que ele está fazendo isso, mas nós só queremos ter certeza. Agora vamos largar essa borda vermelha. E por enquanto, acho que vai ficar tudo bem. Nós realmente precisamos mudar isso um pouco, e é um pouco apertado lá em cima. Então, espero que isso possa ser um pequeno problema. Então eu estava falando sobre este canto aqui e como o Texas basicamente tocando um
dos botões de cima. Então, porque já estamos usando posição relativa, podemos dizer Mova isso do topo. Quero dizer, eu acho, e algo como quatro pixels pode enfraquecer. Ajuste isso mais tarde, e vamos movê-lo da direita para fora da parede direita em cinco pixels. E então isso só vai bater isso para baixo para a esquerda apenas um pouquinho. Ei, isso não é ruim, mas talvez tenhamos que voltar a isso um pouco mais tarde no próximo último. Vamos em frente e adicionar um costume. Forints ou botões realmente parecem um pouco mais agradáveis, e talvez nós vamos aplicar isso para esse mesmo fundo para a nossa assinatura aqui antes de continuar trabalhando no estilo dos botões. Porque agora, se clicarmos literalmente, nada acontece. Ele não se move para cima, não olha para baixo, não faz nada
7. Fonte personalizada: Está bem, Doke. Vamos procurar uma diversão personalizada, então vamos longe demais. É dot google dot com porque eles podem nos dar acesso a praticamente todos os fundos que eu conheço de graça. Ou se quiséssemos, poderíamos pagar por um. Não vou pagar por um. Só vou usar um grátis agora. Tem um em mente já chamado de compartilhamento? Não, esse é o compartilhamento de palavras personalizadas, e vai ficar assim. Vamos adicionar um monte de números aqui. Isso parece o que queremos? Eu acho que sim. Sabe, se não, podemos sempre mudar isso também. Essa é a coisa boa do desenvolvimento da Web é que se não
gostarmos disso, podemos trocar por qualquer outro fundo. Então eu vou apenas gostar deste estilo e clicar na cama aqui em cima, e há duas maneiras de fazer isso. Podemos adicionar uma folha de estilo usando link, ou podemos usar o comando at import, e vamos usar o comando at Import aqui. Tem que copiar isso. Vamos para o topo do nosso estilo aqui e colar. Agora, isso não vai fazer nada logo de cara. Nós realmente adicionar uma família de fontes de compartilhamento, e depois maldição de estranho, que volta a cursivo, mas ok, então eu vou copiar isso. E onde eu queria mudar isso? Eu queria mudar todos os meus botões, e eu queria mudar isso na assinatura. Então eu vou salvar essa página, voltar para a nossa calculadora e refrescante. Ok. Eu gosto disso. Posso viver com isso. Consegue viver com isso? Posso viver com isso. Caso contrário, se você não gostar disso, você sempre pode usar um fundo diferente.
8. Movimentos de botão: Certo, temos esses botões. Eles vão. Parecem botões. Sabemos que na verdade são elementos da lista. Então nós meio que enganamos o usuário um pouco lá. Tudo bem, mas quando clicamos, nada acontece. Então precisamos adicionar algum tipo de estilo aqui que aconteceu que basicamente, quando clicamos
nisso, parece que está se movendo para baixo. Então todos os nossos botões, nossos aliados e nós estamos selecionando a lista ordenada da ONU e, em seguida, os itens da lista. Então, vamos também trabalhar a partir disso. Vamos criar um U L L I iria selecionar todas as listas ordenadas e, em seguida, todos os elementos
aliados abaixo dele. Nós vamos dizer quando ele está ativo, e isso significa que quando você está clicando e segurando ele, o que ele vai fazer dio? Nós vamos nos dar uma posição de parente Eu vou dizer derrubar por cinco pixels. Também vamos mudar a sombra da caixa. E, em seguida, sombra de caixa como nos livramos disso do último vídeo. Aquela sombra da caixa. Acabei de comentá-lo, e vamos lidar com isso em apenas um segundo. Só quero dar uma espreitadela aqui. Ok, está
se movendo, certo. Se nós realmente apenas essa caixa sombra a caixa sombra move-se para cima ou basicamente nós meio que nos livramos dela para a maior parte
do tempo. Quanto mais olho para isto, mais não gosto
da sombra de cima naqueles eso. Vamos editar isso,
porque isso vai me enlouquecer quanto mais eu olhar para ele, mais não parece certo. Então nós temos. Sim, temos o botão dela aqui. Esse é o nosso aliado Box Shadow X zero. Por quê? Movendo-se para baixo cinco pixels. Borrão Zero A 58585 OK, talvez não vamos usar exatamente o mesmo que estávamos usando aqui em cima. Vamos tentar mudar isso. Vamos tentar fazer zero pixels no eixo X que fica à esquerda. E agora, vamos talvez fazer dois pixels para baixo. Isso é de cima e de baixo. Vamos ver por que Access e um desfoque de cinco pixels com um RGB um vermelho verde azul alfa de Sim, esse é o que queremos bem ali. E vamos ver como isso acaba. Ei, isso parece muito melhor. Está bem? Ainda temos a coisa toda se movendo para baixo, que é o problema atual, mas consertamos aquela estranheza que tínhamos originalmente. Estou muito mais feliz com isso agora. Então agora vamos voltar para o nosso aliado. E quando você está pressionando e segurando um desses botões, qual é a sombra indo para dilatação? Vamos dar a isto um insecto para que as sombras fiquem por dentro. Vamos tentar X x zero. Por que acessar um pixel para desfoque pixel e rgb um Alfa verde vermelho neste vai ser preto, bem como o seu 0.4 novamente. Se estás a olhar para este novo tipo, Caleb , isto é fixe. Mas, você sabe, eu só quero que você saiba que esta é uma calculadora muito cinza e
chata. Sinta-se livre para enfeitar isso em uma imagem de fundo em vez de uma radiante. Você pode nos mudar para parecer mais madeira ou plástico ou qualquer coisa assim. E você? É isso que eu quero? Sim, isso é o que eu quero porque isso parece muito achatado. Agora temos Oh, ok. Temos que mudar isso porque temos muitos botões aqui. Então vamos fazer este trecho zero até aqui e aqui. E vamos fazer esse sinal de igual esticar até o fundo. Como diremos esse sinal de igualdade? Este sinal de igualdade vai ser complicado quando eu pensar assim. Este é o segundo último. Vamos usar um décimo filho. Selectores, este é um pouco mais avançado CSS. Basicamente, o que vamos dizer é zero um, 23456789 10 11 12 Todo o caminho até este aqui. E vamos selecionar esse específico usando apenas CSS. E podemos fazer isso com a UL Ally e a criança número de 16. E vamos dar a isso uma borda duas picaretas um branco sólido. E vamos nos certificar de que estamos mirando no caminho certo aqui. E, no entanto, estamos a falar do caminho certo. Então vamos ignorar isso porque isso vai se mover para onde
quisermos , porque tudo o resto está flutuando. Queremos ter certeza de que os elementos flutuantes estão com aqueles com os quais trabalhamos. Eso, este é o que queremos. Então foi um bom palpite. Então vamos fazer isso duas vezes a altura. Geralmente é. Então, se você está se perguntando, Ei, qual é a altura. Vamos voltar aqui. Clique neste. Inspecione elemento. E se eu clicar em qualquer um desses ou passar o mouse sobre eles, você pode ver isso no meu modelo de objeto de documento. É aqui em cima, a representação visual dele. Cada um destes é 65 por 43. E se arrastarmos esse cara do layout para lá, podemos realmente ver. Mas por dentro, 45 pixels por 22 pixels. Os homens têm 10 no top 10. Na parte inferior estão isso é quase 23 pixels para um total de 42. Agora, isso pode não ser inteiramente preciso porque estamos fazendo algumas coisas extras. Então, quero dizer, honestamente vou adivinhar, uh, vamos ver 37 pixels. Vamos mudar a altura dele e ver o que acontece. Eu fiz bem grande. E se olharmos para isto, apenas aquele sinal de igual é o que estamos a ver aqui. Apenas o sinal de igual que a altura é Não. 37 mais 10 na parte superior e inferior. Então eu vou apenas olhar para este aqui. Eu vou dizer 75 pixels e vamos em frente e nos livrar da fronteira porque isso vai nos bagunçar também e pensar que eu posso viver com isso. Vou viver com isso. Vou fazer isto funcionar, e depois temos de mudar este aqui. Agora, isso já está flutuando. Então este é um interessante porque nós temos que selecionar este botão em particular e
empurrá-lo de volta para cima e, em seguida, esticá-lo para fora para a direita. Vamos em frente e agarrar esse elemento. Então, Ul Ally. E qual deles é esse? Acho que foi o último elemento. Chuva? Sim. Este é um fácil de agarrar com CSS, podemos apenas dizer último filho, e isso é a margem superior de como menos 45 pixels. Novamente, eu estou apenas olhando para nós e uma largura de como 70% e acho que nós precisamos realmente mover essa
margem um pouco para cima porque estes não se alinham e que com isso um pouco demais eso o que podemos fazer em vez de escrever, poupança, refrescante. Na verdade, podemos mudar isso aqui. Então, o que eu fiz foi certo. Clique em inspecionar Elemento e selecionei o que quero editar. Então eu estou no zero e aqui dentro. Lá está ele. Menos 48 é o que queríamos, e eu só estou mudando esse valor aqui. E a largura. Vamos fazer isso menor. Menos 65 não são menos 65 apenas 65%. Então, a altura Não há erro. O topo emergente é menos 48 pixels, ea largura foi, eu acredito que eu disse 65%. Então vamos em frente e atualizar isso e ele fica do jeito que deveria. Perfeito. Isso está parecendo muito bom. E depois sabes que mais? Vamos retocar este sinal de igualdade. Vamos fazer esse sinal de igualdade. Esteja bem no meio. Queremos fazer uma altura de linha, não o último filho executar uma altura de linha de 75 pixels. Vamos ver o que isso faz, e este é apenas o nosso sinal de igualdade. Essa é a que damos altura extra, também. Sim, parece muito bom, muito bom. Estou feliz com isso. Então, por enquanto, acho que podemos deixar isso onde está, e podemos começar a trabalhar com alguns do JavaScript. Agora haverá todos os tipos de casos estranhos com JavaScript porque isso é
matemática humana , onde você sabe que não pode dividir um número por zero. O que acontece quando fizermos isso? Nós vamos lidar com todo o tipo de coisas lá dentro. Então, a próxima lição vamos saltar para o mundo do JavaScript.
9. Ações de botão: Ok, estamos fazendo tanto progresso aqui. Atualmente, porém, quando você clica em um desses botões quero dizer, parece que ele está fazendo algo, mas na verdade não faz. Então, quando clicamos no número cinco, número cinco deve aparecer aqui quando você clicar em Dividir, ele deve salvar cinco dividido por. Então vamos em frente e fazer isso realmente funcionar. As primeiras coisas primeiro. Precisamos nos livrar desses números aleatórios. Em que número a calculadora geralmente começa? Ou nada ou zero. Sim, vamos começar com zero agora. Podemos fazer isso em vários vídeos aqui, e a primeira coisa que queremos fazer é selecionar todos esses e, em seguida, adicionar um
ouvinte de eventos . Então, sempre que você clicar em nove ou um ou limpar, ele vai fazer alguma coisa. Então escrevemos isso em nosso JavaScript na parte inferior da página dela. Escrevemos roteiro de abertura e fechamento, e então podemos pegar uma lista de todos os nossos aliados. Então estamos dizendo constante porque esta lista não vai mudar aliados de que apenas portal para Ally é igual ao seletor de consulta de ponto documento. Uh, e nós vamos pegar todos os elementos aliados da UL. Agora, se alguma vez te estás a perguntar, como é que sabemos o que estou a fazer? Porque parece que estou a programar no escuro. O que você pode fazer é certo. Clique em, inspecionar em sua página, Vá para o console e você pode escrever isso. Copiei e colei isso lá dentro. E quando eu digitar aliados e apertar enter, você começa essa coisa chamada uma nota uma lista e eu tenho 17 itens em seu e você pode ver que quando eu passar o mouse sobre cada um. Na verdade me diz qual é
qual, o que é muito legal. Então, essencialmente, esta é uma matriz ou uma lista de cada l que eu tenho nesta página. Agora que eu tenho que eu posso percorrer cada um e adicionar um ouvinte de eventos. Então eu vou percorrer cada um com aliados ponto para cada um. E isso é javascript moderno também, quando vamos usar uma função aerodinâmica gorda aqui. Então, em vez de escrever a função como costumávamos fazer com a nossa antiga maneira de escrever javascript , não
vamos fazer isso. Nós só vamos dizer para não usar funcional apenas passou através do que quer que seja a nota. E esse nó, cada um deles é chamado de nó. Então passe por essa nota e, em seguida, com esse nó, podemos dizer nenhum ponto adicionar ouvinte evento. E o que acontece quando você faz alguma coisa? Então vamos dizer a maioria para baixo e então este, nós vamos realmente dar uma função adequada e não vamos chamá-lo e porque isso não é intuitivo. Se você é uma espécie de novo em JavaScript, vamos passar em um evento para esta função particular. E as primeiras coisas primeiro, vamos dizer ponto de evento, evitar padrão, e a próxima vamos obter o valor do que está dentro deste aliado. Então é um valor constante é igual a, e então qualquer que seja essa nota em particular, então vamos pegar essa aqui. Esse é o asterisco. E se nós rolar para baixo para interior
interior, interior inter texto, nós podemos obter esse valor bem ali. Fazemos isso com qualquer um dos outros, também, porque estes são todos iguais. Eles só têm um número ou uma letra diferente lá dentro. Então este é “Não, não
vamos fazer isso”. Vamos fazer o número nove, então é o item seis na nossa lista. No entanto, é o número nove aqui em cima, e se olharmos para baixo, olharemos para baixo. Texto interno é nove. É isso que queremos. Então, temos um valor de nó ponto texto interno e, em seguida, apenas no caso de haver espaços em torno dele. Então talvez você escreveu seu HTML como esta guarnição vai apenas se livrar desse espaço extra para você, e então nós podemos console dot log esse valor agora. Isso ainda não vai fazer nada de útil ou valioso. Vamos atualizar nossa página. E quando eu clico sete, ele diz sete e você pode realmente ver que cada vez que eu clicar em um botão, ele aparece aqui em baixo agora. Uma coisa a observar aqui é que quando você está usando o evento dot previne default, ele vai tentar impedir que tudo faça o que ele normalmente faz. Agora, se você estiver usando links em vez de um item de lista, provavelmente precisará disso, que significa que suas animações não funcionarão. Quanto mais eu clicar nisso, nada acontece. Meu botão não se move mais para baixo. Então, se eu apagar isso, salvar o arquivo voltar aqui. Refresque agora diz cinco. Agora diz oito. E agora os botões estão se movendo para baixo também. Então fique ciente disso. Se você está usando esses itens como eu estou, você não tem nada com que se preocupar. Você pode ignorar o último minuto do que eu estava falando. Em seguida, queremos realmente obter o resultado aqui. Isso é muito grande. Queremos obter esse resultado, e queremos colocar esse número lá. Então vamos em frente e pegar esse resultado também. Então os grãos resultam, e eu estou usando um cifrão aqui apenas como um exemplo. Você não precisa,
mas como exemplo, mas como exemplo, o cifrão geralmente significa que você está pegando algo do modelo de objeto do documento, que significa que devemos usar um aqui e aqui também. O resultado vai ser o seletor de consulta de ponto de documento, e então nós só queremos agarrar esse resultado. E acho que chamamos de resultados de aula. Resultados da aula certos. Sim. E o que podemos fazer é apenas sobrescrever esse texto de resultado. É agora que podemos dizer resultado ponto texto interno é igual ao valor. Vamos sair desse log do console e atualizar sua página, e isso vai dizer sete e depois cinco e então nove e depois zero,
e então assim por diante e assim por diante e assim por diante. Podemos continuar fazendo tudo o que quisermos. Não, acho que é o suficiente para este vídeo em particular no próximo. Vamos em frente e realmente adicionar alguma lógica onde podemos dizer oito, divididos por nove ou zero mais quatro em vez de apenas ter um caractere de cada vez aparecer.
10. Calculadora operacional: Tudo bem. Onde paramos foi Toda vez que pressionamos um botão, ele remove o valor que estava lá e mostra o novo valor lá em cima, que é o que queremos. Mas, na verdade, temos um pingente. Então, se eu bater um e, em seguida, para o número 12 deve desenhar não um e depois dois, nós também queremos descobrir como usar o sinal de igualdade e todas essas outras coisas e
ter certeza de que se alguém bate no mar, que ele apenas limpa a resposta para fora. Então vamos adicionar tudo isso neste vídeo em particular. Agora, no último vídeo, dissemos que o resultado ponto inter imposto vai ser o valor. Vamos nos livrar disso porque isso só vai mudar o número uma e outra vez. Na verdade, vai substituí-la todas as vezes. Nós não queremos isso. O que queremos, em vez disso, é pegar o texto do resultado. Então, o que quer que esteja aqui, precisamos pegar isso agora. Não sabemos se haverá espaços ou não, então teremos que aparar isso também. Então é const texto resultado é igual ao resultado do ponto ponto ponto ponto ponto ponto ponto ponto ponto ponto ponto ponto ponto ponto e tudo o
que vai fazer é pegar este resultado aqui que seletor de consulta. Ele vai pegar isso e vai pegar o valor lá dentro. Então, se fosse o espaço cinco, isso ainda apareceria como o número cinco para nós, é o que queremos. Agora vamos começar adicionando alguma lógica simples sempre que temos algo que pode acontecer através de vários caminhos. Se eu dissesse que você poderia ir para a esquerda direita ou direita, você poderia tomar três ações em sua vida. Se você estava dirigindo por uma estrada ou andando por um caminho calculadoras não é diferente. Os eventos podem ser claros. Você poderia ter algum tipo de aplicação matemática real aqui. Você poderia estar dizendo o que eu coloquei lá dentro,
convertido em respostas reais ou uma solução. Ou talvez você esteja apenas adicionando um número ao resultado de mensagens de texto aqui. Então você está pendente desse número. Vamos começar com a forma mais simples. Começo com claro, claro sempre que apertamos o botão de limpar. Tudo o que deveria fazer é deixar a tela em branco. Então agora podemos dizer se o texto do resultado é igual a ver e eu estou recebendo esse ver a partir daqui, que também está aqui. Se for igual ver o que vamos fazer? Nós vamos mudar que resultou ponto texto interno para eu estou limpo porque é uma calculadora
detestável, Aparentemente, e então nós vamos retornar True. E tudo o que o retorno faz é porque esta é uma função. Sempre que a função é executada, o
código vai de cima para baixo. E quando ele atingir este retorno, palavra-chave vai dizer, Ei, se há algo abaixo dele como este, não execute nenhuma dessas coisas. Está dizendo que você apertou a palavra chave de retorno parar de executar tudo abaixo. É apenas sair sobre o funcional juntos. Isso é o que queremos. Então este vai ser um exemplo muito estranho. Eu só apertei a atualização, então se eu acertar oito, nós vemos que nada acontece porque nós nos livramos daquela parte onde diz que eu acho que como um botão coloca o número aqui. Mas se clicarmos, nada vai acontecer. E, na verdade, não vamos passar por isso rapidinho. Cometi um erro lógico. Texto do resultado do verão. Isso é o que eu estou procurando o que nós queremos, na verdade, é o valor do botão. Este é o botão que estava pressionando, então é suposto ter valor em. Vamos nos certificar de que estamos sempre comparando. Então, se você escrever um Casey inferior ou um Casey superior, isso ainda vai funcionar para você. Valor de ponto para minúsculas Vamos garantir que este é um minúsculo, então ele vai levar a letra C maiúscula fazendo um minúsculo. E se for igual a uma minúscula, então mudará o resultado em seu texto. Aqui vamos nós. Aqui está um exemplo melhor. Então, sempre que eu atualizar e limpar diz que estou livre agora isso é detestável. Nós só queremos limpar isso, limpar esse valor Maldito atualizar Bam, bam! Simplesmente assim. Esse é o botão “limpar”. Mas se fizermos oito divididos por cinco, nada aparecerá aqui. Então precisamos ter certeza de que isso apareça. Então o que podemos fazer é pegar esse resultado e apenas um lembrete de que aqui
podemos pegar esse resultado existente e podemos mudar algo para ele. Podemos mudar o valor. Então o que estamos dizendo aqui é uma caneta, o valor. A menos que seja uma letra C. Então vou de cima para baixo. Se é uma letra C vai voltar verdadeira
, não vai fazer nada. Se é qualquer outra coisa, então ele vai pegar esse resultado e vai adicionar o valor a ele. Oito Dividido por cinco vai ser um dividido por cinco em nossas áreas de resultados. Vamos em frente e salvar isso e demonstrar este oito dividido por cinco. Agora você pode ver que nós temos um zero inicial lá, então isso foi um pouco de um problema. Mas você pode ver que nossos números estão todos aparecendo lado a lado agora. E isso é uma boa notícia. Isto é o que queremos. Queremos algo assim aqui. Isso significa que podemos realmente começar a fazer algumas contas. Então, se esclarecermos isso e fizermos sete vezes sete e, eventualmente, atingirmos iguais, o que
vai acontecer? Ok, bem, agora temos outro caso de ponta. Temos outro caminho a percorrer quando cada acerto for igual. Iguais não devem aparecer lá. Deve fazer as contas para você. Vamos em frente e adicionar isso aí. Então agora podemos dizer se esse mesmo valor é igual a um sinal de igual. Podemos agora dizer que o resultado ponto texto interno é igual a uma solução de
alguns, algum tipo de solução. Ainda não sabemos o que é. Vamos em frente e criar essa solução, no entanto. Então, é para deixar a solução, porque eventualmente talvez possamos mudar. Então, temos usado Const até agora. Contagens significa que você não pode alterar esse valor na variável. Deixar significa que você pode. Então, isso é mudá-lo. E essa solução vai ser má. Seja qual for o resultado ponto texto interno ponto nenhum html inter text dot trim vai ser, então ele vai pegar esse resultado. O que quer que esteja atualmente na seção de resultados bem aqui, ele vai pegar esse texto interno. Vai apará-lo. Agora aqui está a coisa é que podemos realmente ver que nós já escrevemos este. Nós apenas digitamos o texto do resultado. Esse é o poder das variáveis. Não temos que digitar a mesma coisa duas ou três vezes. Podemos digitá-lo uma vez e usá-lo novamente. Finalmente, precisamos retornar verdadeiro e a razão para isso é porque se não o
fizermos, teremos o sinal de igual que ele vai fazer sete vezes. Sete. Ele vai mostrar. Mostre-nos 49 em, em
seguida, vai anexar esse sinal de igual. Nós não queremos isso. Queremos que nunca mostre o sinal de igualdade. Apenas faça as contas. Então, agora, se fizermos sete vezes sete Bem, temos um 07 lá dentro, mas tudo bem, podemos lidar com isso mais tarde. É igual a 49 é igual a agora. Somos super próximos, mas temos um problema. Sempre que começamos de novo em vez de zero, ele diz 07 E sempre que
multiplicamos, temos sinal desigual no final, diz Tackle aqueles, E isso será suficiente para esta lição particular. Então vamos em frente e nos livrar desse zero. Então, podemos dizer se o texto do resultado é igual a zero. Altere os resultados ponto inter texto para nada. Agora não vamos dizer para voltar aqui porque nós simplesmente queremos substituí-lo e deixar tudo o resto aconteça. Vamos salvar isso e atualizar, e agora porque vai começar com zero, eu vou acertar sete. Você vai passar por aqui,
digamos, “ Oh, você atingiu 70 esse número que está atualmente lá é zero. Então apague e então ele vai tentar fazer essas condições ALS. Eles não vão ser uma combinação, e então ele vai adicionar o número que eu queria que fosse anexado aqui atrás. Então, quando eu acertei sete, não
diz mais 07, o que é muito, muito bom. Então esse é um problema resolvido. A próxima é se eu fizesse sete vezes oito, nós tínhamos aquele trabalho de igualdade de sinais. No entanto, isso pode já ter resolvido porque estávamos limpando nosso código. E porque estamos fazendo matemática adequada agora, isso vai começar a funcionar da maneira que queremos. O Teoh. Então, na próxima lição, vamos em frente e adicionar um pouco mais de lógica aqui, porque o que acontece se eu limpar isso? E eu fiz 10 dividido por zero? O que você acha que vai aparecer? Vamos precisar lidar com esse cenário
11. A calculadora finalizada: Tudo bem, saindo da última lição. Eu meio que deixei você em um penhasco,
e eu disse, o que acontece quando você faz 10 Dividido por zero. Na vida real, você não pode fazer 10 dividido por zero. O que acontece, você fica com o infinito. Na verdade, isso está em JavaScript. Esse é um tipo de dados, mas também isso não é errado. Agora o problema é, se eu digitar cinco ou oito ou algo assim, ele continua dizendo infinito, nós não queremos isso. E se limparmos isso e acertarmos igual? Nós também ficamos indefinidos. Nós também não queremos isso, porque nossa lógica não está procurando por isso. Não está procurando a palavra “indefinido” ou “infinito”. Então o que precisamos fazer é verificar para ver se o resultado tributa zero. Se estiver indefinido ou se for infinito, basta repô-lo de volta para ficar em branco. Então podemos dizer isso muito facilmente dando um ou condicional aqui ou assim. O resultado. Impostos iguais a zero, ou são os dois canos. O texto do resultado é igual a indefinido, ou que são os dois pipes ou o texto do resultado é igual ao infinito e que tinha um I maiúsculo. Vai levar qualquer que seja o resultado em seu texto, e vai simplesmente reiniciá-lo para nada. Isso é o que queremos. Vamos em frente e dar uma chance agora. E se eu apenas bater igual a nada acontece se eu bater, Clear me dá indefinido. E que tal Hey, olha para isso. Ele vai embora agora. Eu também posso fazer 10. Dividido por zero é igual ao infinito. E se eu clicar, não sei cinco. Bem, isso ainda aparece Infinity. Isso provavelmente significa que eu fiz um tipo de algum lugar que o infinito acertou. Conhece o teu eu. Sei que quando faço erros de digitação, faço o tempo todo. Vamos tentar de novo. 10 dividido por zero é igual ao infinito e, em seguida, acertar cinco. Lá vamos nós. Agora temos uma calculadora de trabalho. Também podemos usar pontos decimais. Nós ainda não exploramos isso, então nós poderíamos fazer 12,5 mais 15,5 é igual a 28 Então pontos decimais estão funcionando automaticamente para nós também. Tudo bem. E é assim que você cria uma calculadora para que agora possamos lidar com todos os tipos de situações que podemos lidar. Limpar, multiplicar, dividir números decimais mais mais iguais e subtração. Fazemos todas essas coisas lá dentro. Ou isso é de 199 a 145? Então, em torno de 25 linhas ish de código, fizemos uma calculadora em JavaScript, e a última coisa que realmente precisamos fazer é movê-los para seus próprios arquivos, porque
agora você sabe que não há nada de errado com o que estamos fazendo. Mas como uma prática recomendada, devemos mover o CSS NZ JavaScript para seus próprios arquivos. Então, no próximo vídeo, vamos em frente e fazer isso.
12. Limpeza de código: Está bem, Dokey. Temos um monte de códigos aqui. Nós temos HTML CSS e JavaScript, e a maneira como estamos escrevendo isso não é errado. Mas podemos fazer isso de uma maneira melhor. Então todo o nosso CSS, o que eu vou fazer é pegar que da linha oito até a linha 88 eu vou cortar isso bem aqui. E vamos nos livrar das coisas que habitam de volta para podermos ver isso. E precisamos criar um novo elemento aqui chamado Link. E a relação vai ser uma folha de estilo. E nós vamos ligar isso usando H ref para um arquivo chamado style dot CSS. E isso rimou um arquivo chamado Style. Isso não foi intencional. Mas fique com ele porque eu gosto. Agora precisamos criar um arquivo chamado style dot CSS. As primeiras coisas primeiro. Isso engana muita gente. Então isso não existe no meu computador agora, então se eu voltar aqui, atualizar, você pode realmente ver que todo o CSS desapareceu. Ok, então se eu apenas abrir no meu navegador, eu apenas atualizei lá e você pode ver que meus estilos não são mais aplicados. Isso está tudo bem. E se você entrar no seu cônsul aqui e você vê, uh, algumas vezes vai entrar dependendo do navegador, é
claro. Mas às vezes você vai ver como um 404 Ele vai dizer que o estilo que CSS não existe se esse é o caso, mas ele existe. As chances são o seu estilo que CSS simplesmente não está na mesma pasta que o seu índice dot html. Agora, no meu caso, nada aparece. E se eu for para a rede e apertar a atualização, absolutamente nada acontece. Não há nada aqui dentro de qualquer carga do dedo do pé. E isso em si é realmente um problema. Está dizendo que não há estilo que ela esteja tentando carregar. Então o que eu vou fazer aqui é apenas criar um novo arquivo e colar o que eu tinha lá, e eu vou salvar isso como estilo no ponto CSS e eu tenho esses dois arquivos lado a lado. Então, na mesma pasta, eu tenho índice dot html. Eu tenho estilo dot CSS. Agora, se eu voltar aqui e atualizar sua página deve ser estilizada da maneira que você esperava ser estilizado, mas também, você deve ver algumas coisas aqui dentro dentro da sua guia de rede e você pode realmente ver que esperava conhecido que você era l ou função de filtro, mas encontrou pro Gee, I d. Isso é realmente OK. Isso é porque estamos dando suporte ao Microsoft Radiance para I E 69 do qual poderíamos realmente nos
livrar porque praticamente conhecido no mundo para suportar o Internet Explorer 69 mais. Então isso é basicamente o nosso CSS e um arquivo externo. Agora precisamos ir para o nosso índice dot html e pegar este script todas essas coisas. Vamos da linha 37 para 62 e cortamos. E este pode ser fontes de script iguais a, e nós chamamos isso de ponto de script Js e vamos colocá-los na mesma linha. Agora, quando eu atualizar isso, nada vai acontecer. É porque tiramos todo o nosso javascript para fora, e quando atualizamos nossa página aqui, podemos realmente ver. O Firefox diz. Carregamento falhou para script com origem de e, em seguida, script dot Js. Então, se você vir algo assim com seu jazz ou seu CSS, isso significa que simplesmente não consegue encontrar o caminho certo. E então nós só queremos ter certeza de que Script Js está na mesma pasta que nosso como nosso índice dot html. Então é criar um novo arquivo. Vamos pagar o código estelar aqui e podemos salvar isso como ponto de script Js. E quando voltarmos aqui, o Firefox vai parar de reclamar porque está carregando perfeitamente. E eu era calculadora continua o trabalho do dedo do pé. E com tudo isso, agora
fizemos uma calculadora com HTML em menos de 40 linhas de código 39 linhas de código. Excluindo este e este como aquele 37 linhas de código HTML. Nós temos uma calculadora em menos do que vamos nos livrar dessa rede e isso e aquilo e que era como cinco espaços lá e em como, 22 ish linhas reais de código. Temos uma calculadora JavaScript funcional e em cerca de 80 linhas de CSS, temos uma calculadora
muito, muito bonita. Então, no final do dia, isso na verdade não é muito código, e nós fizemos algo muito, muito legal
13. Resumo: meu querido desenvolvedor de front-end. Em primeiro lugar, obrigado por fazer este curso sobre compartilhamento de habilidades. Você tem um projeto e cada projeto de compartilhamento de habilidades. Cada curso de compartilhamento de habilidades tem uma pequena seção de projeto em que você pode realmente criar um projeto
adequado. Você pode compartilhar capturas de tela, ou você pode colocar todo esse código em um ponto de caneta de código io e você pode compartilhar esse link de incorporação. De qualquer forma, apenas certifique-se de adicionar seu projeto de compartilhamento de habilidades. Mas não quero que use o código-fonte que eu tenho. Não faça uma calculadora chata como esta. Tente usar algo que seja um pouco mais interessante. Então, em vez de um fundo radial cinza, talvez colocá-lo em uma mesa em vez de uma calculadora de aparência cinza. Talvez ele se pareça mais com plástico ou usa uma imagem de fundo que se parece com
plástico repetido ou algo assim. Você pode alterar a maneira que seus botões agem e como eles parecem uma inchar por último, mas não menos importante, O que quer que você faça para modificar sua calculadora, certifique-se de assinar seu nome nele, porque esse será o seu trabalho. Uma vez que você tem o seu projeto final, não se esqueça de compartilhá-lo em sua parte de habilidades tipo de seção sobre, e eu posso dar uma olhada nele e eu posso dar-lhe feedback e todos os tipos de coisas. E por último, mas não menos importante, se você gosta do meu estilo de ensino, não esqueça que você sempre pode me acompanhar na partilha de habilidades. Confira alguns dos meus outros cursos. Se você quiser saber mais sobre HTML ou CSS ou JavaScript ou qualquer coisa que você tenha visto neste curso
específico, você também pode ir para o meu perfil. Eu tenho uma masterclass HTML ou, uh, é chamado de o desenvolvedor HTML final tem uma masterclass CSS chamada de masterclass CSS e JavaScript para iniciantes e JavaScript, de iniciantes a cursos ninja. Então, se você está se perguntando sobre JavaScript moderno, se alguma coisa disso não faz sentido e você quer aprender sobre isso, eu te protejo. Se você não sabe sobre digamos Grady INTs radial ou caixa de sombras, essa foi uma boa, porque isso é ah, declaração CSS
realmente estranha para trabalhar com. Se você está meio interessado em aprender sobre coisas assim, você pode conferir os cursos de masterclass CSS. Mas eu tenho vários outros cursos sobre outros assuntos também, como Python. Mas é claro, e como sempre, não
há pressão para ir e aprender todas essas coisas imediatamente. Html. CSS e JavaScript Eles estão por aí há mais de 20 anos, e eles não vão desaparecer tão cedo. Portanto, não se esqueça de criar seu projeto de compartilhamento de habilidades. Vá em frente, jogue isso no seu projeto de compartilhamento de habilidades para que eu possa dar uma olhada nele. Ah, e você também pode compartilhá-lo com a comunidade e olhar para os projetos de outras pessoas e obter alguma inspiração para ver o que você gosta e o que você não gosta. Obrigado novamente por fazer este curso, e eu vou vê-lo em outro.
Kalob Taulien, Web Development Teacher
