Jump to content

diegocastro

Membros
 Ver Perfil  Ver atividades

  • Contagem de Conteúdo

    1

  • Ingressou

  • Última visita

Informações Pessoais

  • Cidade
    Fortaleza
  • Estado
    Ceará (CE)

Clientes & Parceiros

  • Você é um cliente TecnoSpeed?
    Não

Visitantes Recentes do Perfil

O bloco de visitantes recentes está desativado e não está sendo mostrado a outros usuários.

Conquistas de diegocastro

0

Reputação na Comunidade

  1. diegocastro começou a seguir Sou iniciante na area de JS e quero fazer uma calculadora
  2. diegocastro
    comecei a estudar html e css, e ate agora não comecei a fazer js, mas me desafiei a fazer uma calculadora e estou nessa até agora graças a falta de conhecimento em js. este é meu código: <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="/style.css"> </head> <body> <div id="menu"> <header>Diego site</header> </div> <hr> <div id="container"> <div id="content">Bem vindo ao meu site.</div> </div> <hr> <p class="container1"> Aqui faremos uma calculadora.</p> <div id="calculadora1"> <div id="calculadora"> <div id="numero"> <input type="number" id="calc"> </div> <div id="tudo"> <div class="numbers"> <ul class="numbers1"> <a href="" id="f7"> <li>7</li></a> <a href="" id="f8"><li>8</li></a> <a href="" id="f9"><li>9</li></a> </ul> <ul class="numbers2"> <a href="" id="f4"><li>4</li></a> <a href="" id="f5"><li>5</li></a> <a href="" id="f6"><li>6</li></a> </ul> <ul class="numbers3"> <a href="" id="f1"><li>1</li></a> <a href="" id="f2"><li>2</li></a> <a href="" id="f3"><li>3</li></a> </ul> <ul class="igual"> <a href=""> <li>=</li></a> </ul> </div> <div id="seletores"> <ul> <a href=""> <li class="seletor1">+</li></a> <a href=""> <li class="seletor2">-</li></a> <a href=""> <li class="seletor3">x</li></a> <a href=""> <li class="seletor4">/</li></a> </ul> </div> </div> </div> </div> <div id="catioro"> <img id="jesse" src="/sites testes/site 1/img/download.jpg" alt="" width="" height=""> <p>----------> porque não ta calculando?</p> </div> <p class="mesiga">Siga minhas redes sociais</p> <div class="social_media"> <p class="thanks">obrigado por visitar meu site!</p> <ol id="icons"> <a href="https://www.github.com" target="_blank"> <li class="lista"><img src="/sites testes/site 1/img/github-sign.png" alt="">Github</li></a> <a href="https://www.instagram.com" target="_blank"> <li class="lista"><img src="/sites testes/site 1/img/instagram.png" alt=""> Instagram</li></a> <a href="https://www.linkedin.com" target="_blank"> <li class="lista"><img src="/sites testes/site 1/img/linkedin.png" alt=""> Linkedin</li></a> </ol> </div> <a href="/sites testes/site 1/index.html" class="comeback"> <strong> Voltar ao site original</strong></a> </body> e esse é o CSS: body { background-color: rgb(239, 239, 227); color: rgb(0, 0, 0); font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; } #container { width: 100%; overflow: hidden; } #content { white-space: nowrap; animation: scrollText 10s linear infinite; /* Define a animação */ } @keyframes scrollText { from { transform: translateX(-15%); } /* Começa fora da tela à direita */ to { transform: translateX(100%); } /* Termina fora da tela à esquerda */ } header { background-color: aqua; color: black; width: 200px; height: 60px; border-radius: 20px; justify-content: center; /*alinha o texto horizontalmente*/ font-size: 30px; display: flex; /* Utilizando Flexbox */ align-items: center; /* Alinha verticalmente */ /* Outras propriedades de layout para o container, se necessário */ } hr { border-width: 1px; } .apresentação { text-align: center; width: 400px; } .container1 { display: flex; margin: 0px; justify-content: center; } #menu { display: flex; justify-content: center; } span { background-color: blue; color: white; padding: 3px; border-radius: 3px; } #calculadora1 { margin-top: 10px; margin-bottom: 10px; display: flex; justify-content: center; } #calculadora{ height: auto; width: auto; background-color: rgb(0, 136, 255); border-radius: 18px; } #numero { margin: 10px; display: flex; justify-content: center; } #calc { color: rgb(9, 51, 106); justify-content: center; border-radius: 18px 18px 10px 10px; height: 50px; width: 320px; font-size: 40px; text-align: right; } #calc[type="number"]::-webkit-inner-spin-button, #calc[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; /* Remove a aparência padrão */ margin: 0; /* Ajusta a margem */ } .thanks{ margin: 0px 0px 0px 10px; font-size: 18px; } .social_media{ display: flex; justify-content: space-between; align-items: center; height: 70px; } .mesiga{ font-size: 20px; margin: 100px 0px 0px 0px; display: flex; justify-content: right; font-weight: bold; } #icons { display: flex; } img { height: 30px; margin-right: 5px; } .comeback { background-color: aqua; color: rgb(0, 0, 0); font-size: 20px; text-align: center; display: flex; justify-content: center; align-items: center; height: 60px; /* Ajuste conforme necessário */ width: 200px; position: fixed; bottom: 10px; /* Move para longe da borda inferior */ left: 50%; transform: translateX(-50%); /* Centraliza horizontalmente */ border-radius: 10px; } a { text-decoration: none; color: inherit; } .numbers { list-style: none; } .numbers1 { display: flex; justify-content: space-between; list-style: none; text-align: center; } .numbers2 { display: flex; justify-content: space-between; list-style: none; text-align: center; } .numbers3 { display: flex; justify-content: space-between; list-style: none; text-align: center; } ul { margin: 0px; padding: 0px; } li { background-color: aliceblue; height: 50px; width: 50px; border-radius: 10px; margin: 30px 20px; font-size: 30px; display: flex; align-items: center; justify-content: center; box-shadow: 4px 4px; } #tudo { display: flex; } .seletor1 { margin-top: 30px; background-color: rgb(104, 228, 76); } .seletor2 { margin-top: 60px; background-color: rgb(104, 228, 76); } .seletor3 { margin-top: 60px; background-color: rgb(104, 228, 76); } .seletor4 { margin-top: 50px; margin-bottom: 50px; background-color: rgb(104, 228, 76); } #seletores { margin: 0px; padding: 0px; } .igual { display:flex; justify-content:center; } .lista { color: rgb(122, 39, 239); font-size: 20px; font-weight: bold; color: #0e5e78; background-color:#2bc5f9 ; padding: 0px; height: 50px; width: 130px; display: flex; margin: 10px; list-style: none; align-items: center; } #jesse { height: 300px; } #catioro { display: flex; align-items: center; justify-content: center; } tem uma imagem de como meu site em 50% abre anexado
×
×
  • Create New...