javascript Sou iniciante na area de JS e quero fazer uma calculadora

diegocastro · Dezembro 23, 2023

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>

<head>

<title>Document</title>

</head>

<body>

<header>Diego site</header>

</div>

<hr>

<div id="content">Bem vindo ao meu site.</div>

</div>

<hr>

<p class="container1"> Aqui faremos uma calculadora.</p>

</div>

</ul>

</ul>

</ul>

</ul>

</div>

<ul>

</ul>

</div>

<p>----------> porque não ta calculando?</p>

</div>

<p class="mesiga">Siga minhas redes sociais</p>

<p class="thanks">obrigado por visitar meu site!</p>

<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

Entrar

javascript Sou iniciante na area de JS e quero fazer uma calculadora

Postagens Recomendadas

diegocastro

Link to comment

Compartilhe em outros sites

Crie uma conta ou entre para comentar 😀

Crie a sua conta

Entrar

Você também pode se interessar por:

Qual o código para esse site abaixo HTML/CSS? Não consigo reproduzir

Como criar uma função em JavaScript para obter o endereço IP e outros dados da conexão?

Existe um compilador para Python que suporte codificação web (PHP, CSS, HTML)?

Div com colunas e linhas

Meu "if" não funciona....

Quem está online 1 Membro, 0 Anônimos, 34 Visitantes (Ver lista completa)

Próximos Eventos

Estatísticas de Membros

Fórum

Programa de Indicação CdD

Cursos

CdD

Mais