Excelente conteúdo amigo, cai de paraquedas aqui, dia 25/10/21, cá estou procurando um projeto em react.js simples para me aperfeiçoar, e dou de cara com um conteúdo atualizado, postado há somente um dia atrás kkkk Show de bola, muito obrigado!
fiz parecido mas pra facilitar a criação do botão fiz um array const characters = [ 'AC', '+/-', '%', '/', 7, 8, 9, 'x', 4, 5, 6, '-', 1, 2, 3, '+', 0, ',', '-', '=', ] e depois um map {characters.map((character) => ( {character} ))} mas pra editar a cor dos botões precisou fazer aqueles esquemas dos filhos: :nth-child(4n) { background-color: #ff9500; color: white; } :nth-child(-n + 3) { background-color: #d4d4d2; color: black; } :nth-last-child(-n + 2) { background-color: black; color: black; } :last-child { background-color: #d4d4d2; color: black; } deixando como padrão do componente o background-color: #505050; e color: white; para os outros, escondendo o que nao tem pintando de preto tb, resultado foi igual =D
Fala amigo tudo bom? nesse vídeo quando fazemos a divisão e resulta nesse número grande 2.3333333333333335 como faço para diminuir as casas decimais? ja procurei mais não encontrei vc saberia me ajudar?
Fala amigo tudo bom? nesse vídeo quando fazemos a divisão e resulta nesse número grande 2.3333333333333335 como faço para diminuir as casas decimais? ja procurei mais não encontrei vc saberia me ajudar?
44:30 O java script consegue interpretar as expressões porem o operador '+' no java script tem duas funionalidades a primeira é concatenar strings e a outra é a soma de calculos normais. é por isso que nos outros operadores mesmo o dado se tratando de uma string o java script consegue calcular normal mas quando se trata do operador '+' ele acaba concatenando as strings. Aprendi isso com o professor john smilga. otimo professor.
Corrijam me se eu estiver errado, baixei seu projeto e vi que somando mais de 3 números Ex: 2+3+4 A aplicação buga, ela passa a valer como o primeiro número fosse o 3, sendo assim somando somente o 3 e o 4....
Bom dia. Uma forma simples de fazer o '0' ficar com tamanho duplo é com 'width: 6.5em' (ou o tamanho que se encaixar no seu projeto essa foi a forma que fiz: ``` .double { width: 6.5em; text-align: start; padding-left: 1.2em; } ```
Para mudar se o numero é positivo ou negativo seria mas inteligente simplesmente usar o SetNum(num*-1); pq precisaria usar um if, e ele sempre mudaria o status do numero altomaticamente.
Muito bom! Mas um dos problemas nessa calculadora é que caso a pessoa digite 5+5+5 não funciona, somente se for "numero + operador + número + igual". Estou tentando fazer uma com essa funcionalidade e fica mais complicado.
EU ja fiz uma com esta funcionalidade com java script puro, foi mais complexo tem ums meses que a fiz mas se n me engano o calculo era feito apenas no botão de resultado a funcionalidade desto botão era transformar a string em um array separando numeros e operadores não me lembro com detalhes mas sei que foi bem infernal principalmente por que eu estava iniciando na programação. Falando nisso vou tentar refaze-la com react
Por algum motivo os background e adicionamento de cores de modo geral, não estão funcionando, não adiciona cor em nada. Ja inclusive copiei e colei o código do arquivo da video aula e não funciona também. Será que tem algum problema com o node ou com o visual studio? Uso a versão 18.16.0 LTS
eu fiz uma igualzinha a essa usando html, css e js, apenas. Ansiosissimo pra começar a estudar react, porem estou terminando de estudar js. Espero que nao seja muito complicado
Pra aumentar o tamanho lá do zero pra ficar maior que os outros só colocar uma id nele e alterar no CSS 0 #btnZero { width: 6.6em; border-radius: 1em; }
Opa Leo, tudo bem? #zero #+/- #4,6 / 3 no 0 eu fiz assim, defini a css: .zero{ width: 6.6em; padding-left: 1.25em; text-align: left; } e o componente ficou com a className="gray zero". já no 35:51, o setNum(-num) funciona tanto pra deixar negativo o positivo quanto vice versa, essa operação nega o "sinal" atual, a negação de - é +. não sei como ficou a sua, mas assim que terminei a minha ficou sem limite de display de tela, e sem arredondamentos também, então se o usuário tentar fazer 4,6 / 3 vai dar algo como "1.5333333333333332" e vai ultrapassar o limite de tela .
ERROR Cannot read properties of null (reading 'useContext') TypeError: Cannot read properties of null (reading 'useContext') aparece esta mensagem com muitos erros
Uma forma mais inteligente de fazer o calculo seria colocar value nas operações, assim o num receberia "5+8" e na função igual simplesmente ficaria assim: function calcular(){ setNum(eval(num)); }
Muito bom, minha lógica só me dificulta kkkkk, eu fui tentar fazer um tempinho antes e pra pegar o valor antes e depois do operador eu tava utilizando o splice() kkkkk pensa na dificuldade
Pra quem ta dando erro no container, executa esse comando "npm install @mui/material @emotion/react @emotion/styled" Eu nao entendi pq nao funcionou pra mim instalando individualmente :(
Descobri um bug no codigo no qual eu nao consegui resolver ainda, se alguem puder ajudar, vou agradescer. quando voce faz um calculo que o resultado é uma dizima periodica como por exemplo 22/3 o resultado é 7.333333333333333, ja tentei usar a função toFixed() para delimitar as casas decimais,porem nao funciona, tentei utilizar o css para delimitar o numero de caracteres, mas acaba que o numero inteiro da dizima fica escondido, ja que utilizei a propriedade overflow:hidden, para evitar que os numeros vazem do conteiner da aplicação , de qualquer forma ainda nao achei solução, se alguem puder ajudar vou agradescer muito.
Opa leo, tudo bem? sobre o botão "0" eu defini outra className Exemplo: 0 E no css defini o codigo assim exemplo: .graySpace { background-color: #505050; color: white; padding: 0em 4em 0em 1em; } tipo chamei o graySpace e defini desse modo para que o botão fique identico mais ou menos a calculadora do iphone
Olá, alguém sabe me ajudar? Eu escrevi o npm start .... mas apareceram várias msg de erro e não abriu a página do react.. Essas foram as msg de erro: npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead. npm ERR! code ENOENT npm ERR! syscall open npm ERR! path C:\Users emon\OneDrive\Documents\estudos\shecodes eact\w2-homework/package.json npm ERR! errno -4058 npm ERR! enoent ENOENT: no such file or directory, open 'C:\Users emon\OneDrive\Documents\estudos\shecodes eact\w2-homework\package.json' npm ERR! enoent This is related to npm not being able to find a file. npm ERR! enoent npm ERR! A complete log of this run can be found in: npm ERR! C:\Users emon\AppData\Local pm-cache\_logs\2022-11-23T14_40_41_321Z-debug-0.log PS C:\Users emon\OneDrive\Documents\estudos\shecodes eact\w2-homework>
![[LIVE] : ONE ลุมพินี 83 วันนี้!! คู่เอก "พันฤทธิ์ vs ซุปเปอร์บอล วันของโอม MBK"](http://i.ytimg.com/vi/1b4pkKHa_Fk/mqdefault.jpg)
Gostei do seu diferencial. Que é ensinar a lógica do programa não pronto e mostrando os problemas.
Vlw! Eu tento apenas simular todo o processo lógico para criar uma aplicação.
um dos melhores videos de react para iniciantes que a vi parabens pela didatica
Excelente conteúdo amigo, cai de paraquedas aqui, dia 25/10/21, cá estou procurando um projeto em react.js simples para me aperfeiçoar, e dou de cara com um conteúdo atualizado, postado há somente um dia atrás kkkk Show de bola, muito obrigado!
Caraca, deu sorte demais! Era destino mesmo tu ver esse vídeo kkkkk. Vlw mano, e mts outros projetos virão, pode ter certeza!
Excelente! Consegui ir até o final e finalizar o projeto! +1 inscrito! Agora vou subir o meu para o github hihi :D
Parabens pelo conteúdo, precisava achar um projeto simples em react para aprender, obrigado
Muito obrigado👊🏻 mais projetos virão por aí 😉
fiz parecido mas pra facilitar a criação do botão fiz um array
const characters = [ 'AC', '+/-', '%', '/', 7, 8, 9, 'x', 4, 5, 6, '-', 1, 2, 3, '+', 0, ',', '-', '=', ]
e depois um map
{characters.map((character) => (
{character}
))}
mas pra editar a cor dos botões precisou fazer aqueles esquemas dos filhos:
:nth-child(4n) {
background-color: #ff9500;
color: white;
}
:nth-child(-n + 3) {
background-color: #d4d4d2;
color: black;
}
:nth-last-child(-n + 2) {
background-color: black;
color: black;
}
:last-child {
background-color: #d4d4d2;
color: black;
}
deixando como padrão do componente o background-color: #505050; e color: white; para os outros,
escondendo o que nao tem pintando de preto tb, resultado foi igual =D
na virada vendo suas aulas! valeu
Haha isso que é comprometimento! Na próxima virada vai estar empregado 👊🏻
@@leoujo espero que sim!! Valeu
merece MUITO MESMO, valeu demais mano, adorei o vídeo!!!
Fala amigo tudo bom? nesse vídeo quando fazemos a divisão e resulta nesse número grande 2.3333333333333335 como faço para diminuir as casas decimais? ja procurei mais não encontrei vc saberia me ajudar?
22:41... "Poderia ter sido malandro como eu" Essa foi icônica 🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣 (Ficou irado mano!)
Ficou massa!
Ajudou muito! Consegui aprender um pouco mais sobre react :)
Muito bom! Vc é bom na didática e no que faz! Continua, por favor. Ce n faz ideia do qnt nos ajuda
Tmj👊🏻 sempre tento fazer o melhor conteúdo possível!
Brabo demais mano. Parabéns pelo video !
Muito obrigado 👊🏻
obrigado pelo vídeo!!!! me ajudou muito!!!
Conteudo top, não vi o video todo ainda pq vou tentar fazer sozinho quando eu tiver duvida vou volta aqui para ver como resolveu.. vlw meu mn
Boa! É uma boa forma de aprender. Vlw 👊🏻
Fala amigo tudo bom? nesse vídeo quando fazemos a divisão e resulta nesse número grande 2.3333333333333335 como faço para diminuir as casas decimais? ja procurei mais não encontrei vc saberia me ajudar?
Ótimo vídeo, ajudou demais. Sensacional a didatica
Muito obrigado 👊🏻
44:30 O java script consegue interpretar as expressões porem o operador '+' no java script tem duas funionalidades a primeira é concatenar strings e a outra é a soma de calculos normais. é por isso que nos outros operadores mesmo o dado se tratando de uma string o java script consegue calcular normal mas quando se trata do operador '+' ele acaba concatenando as strings.
Aprendi isso com o professor john smilga. otimo professor.
Show sua explicação. Muito obrigada!
De nada 😊
Excelente explicacao!! Didatica otima!! Parabens pelo conteudo, me ajudou muito!
Muito obrigado! E sempre vou lançando projetos novos aqui 😁
Cara da hora seu canal,
Estou começando assistir vc já faz um tempo
Opa, muito obrigado! Em breve vou soltar mais vídeos.
Ganhou mais um escrito meu mano, qual a extensão q tu usa meu man?
Você conversando com você mesmo é muito bom hahaha
Corrijam me se eu estiver errado, baixei seu projeto e vi que somando mais de 3 números
Ex: 2+3+4
A aplicação buga, ela passa a valer como o primeiro número fosse o 3, sendo assim somando somente o 3 e o 4....
Muito bom, obrigado pela excelente aula
Nada, que isso! 😁
Bom dia.
Uma forma simples de fazer o '0' ficar com tamanho duplo é com 'width: 6.5em' (ou o tamanho que se encaixar no seu projeto
essa foi a forma que fiz:
```
.double {
width: 6.5em;
text-align: start;
padding-left: 1.2em;
}
```
Valeu irmão, aulinha muito bacana tmj
Para mudar se o numero é positivo ou negativo seria mas inteligente simplesmente usar o SetNum(num*-1); pq precisaria usar um if, e ele sempre mudaria o status do numero altomaticamente.
Leo valeu pelo video muito bom.
Obrigado! 👊🏻
muito bom ótima didática
Cara, muito bom mesmo... ajudou demais! Valeuu!
Tmj 👊🏻
Muito bom! Mas um dos problemas nessa calculadora é que caso a pessoa digite 5+5+5 não funciona, somente se for "numero + operador + número + igual".
Estou tentando fazer uma com essa funcionalidade e fica mais complicado.
EU ja fiz uma com esta funcionalidade com java script puro, foi mais complexo tem ums meses que a fiz mas se n me engano o calculo era feito apenas no botão de resultado a funcionalidade desto botão era transformar a string em um array separando numeros e operadores não me lembro com detalhes mas sei que foi bem infernal principalmente por que eu estava iniciando na programação. Falando nisso vou tentar refaze-la com react
vc tentou usar o eval()?
Por algum motivo os background e adicionamento de cores de modo geral, não estão funcionando, não adiciona cor em nada. Ja inclusive copiei e colei o código do arquivo da video aula e não funciona também. Será que tem algum problema com o node ou com o visual studio? Uso a versão 18.16.0 LTS
Muito bom! Agora vou tentar fazer sozinho hehe
👊🏻👊🏻👊🏻
Show!
eu fiz uma igualzinha a essa usando html, css e js, apenas. Ansiosissimo pra começar a estudar react, porem estou terminando de estudar js. Espero que nao seja muito complicado
Qualidade total!
Aí sim, vlw Gui! 👊🏻👊🏻👊🏻
Pra aumentar o tamanho lá do zero pra ficar maior que os outros só colocar uma id nele e alterar no CSS
0
#btnZero {
width: 6.6em;
border-radius: 1em;
}
Boaaaa, vou testar depois!
Opa Leo, tudo bem? #zero #+/- #4,6 / 3
no 0 eu fiz assim, defini a css:
.zero{
width: 6.6em;
padding-left: 1.25em;
text-align: left;
}
e o componente ficou com a className="gray zero".
já no 35:51, o setNum(-num) funciona tanto pra deixar negativo o positivo quanto vice versa, essa operação nega o "sinal" atual, a negação de - é +.
não sei como ficou a sua, mas assim que terminei a minha ficou sem limite de display de tela, e sem arredondamentos também, então se o usuário tentar fazer 4,6 / 3 vai dar algo como "1.5333333333333332" e vai ultrapassar o limite de tela .
Line 72:47: 'operatorHandler' is not defined no-undef o que deve ser?
mais um escrito
isso ai é React Native? é para WEB ou Aplication Mobille aplicativo???? dar para mim usar essa escrita React js no Reação Native vai funcionar????
eu estou tendo um problema eu executo os códigos todos corretos e da sucessity , mais quando eu vou no navegador fica tudo em branco o que sera ?
ERROR
Cannot read properties of null (reading 'useContext')
TypeError: Cannot read properties of null (reading 'useContext')
aparece esta mensagem com muitos erros
Pesquisando encontrei uma forma mais fácil de inverter o sinal, é só multiplicar o num por -1. Exemplo: setNum(num * -1)
Boa! Deve ter alguma função do js pra fazer isso tbm.
para deixar o Numero 0 com um botão maior seria so criar um css so pra ele e deixar em 6em a lagura do botão
Uma forma mais inteligente de fazer o calculo seria colocar value nas operações, assim o num receberia "5+8" e na função igual simplesmente ficaria assim:
function calcular(){
setNum(eval(num));
}
Dessa forma se poderia fazer varias operações na mesma equação e ja faria o calculo completo.
O meu fica tudo branco quando uso o container... se eu tiro ai volta ao normal, sla pq
Muito bom, minha lógica só me dificulta kkkkk, eu fui tentar fazer um tempinho antes e pra pegar o valor antes e depois do operador eu tava utilizando o splice() kkkkk pensa na dificuldade
Haha pô, pode ir tentando desse jeito tbm, fica à vontade! Mas realmente vai te dar mais trabalho.
dica: pra inverter o sinal do numero multiplica ele mesmo por -1, tipo num = num * -1
Verdade, mais fácil…
boa lek!
Vlw, Gabs! O mago do Backend! 😜
Gostei, com erros reais resolvidos
Isso aí, a gente aprende assim, errando e dando a volta por cima!
Pra quem ta dando erro no container, executa esse comando "npm install @mui/material @emotion/react @emotion/styled"
Eu nao entendi pq nao funcionou pra mim instalando individualmente :(
como abro o arquivo do projeto no snack?
segundo projeto que estudo que sempre no dia seguinte da uma tela branca ÓDIIOO
estou com dificuldades pra instala esse material , ele funciona no react 18?
Que tipo de erro tá dando?
Estou com o mesmo problema, na hora de instalar o Container
pro botão eu adicionei uma outra classe além do gray chamada double e no css editei ela como:
.double{
width: 6.5em;
padding-right: 90px;
}
Descobri um bug no codigo no qual eu nao consegui resolver ainda, se alguem puder ajudar, vou agradescer.
quando voce faz um calculo que o resultado é uma dizima periodica como por exemplo 22/3 o resultado é 7.333333333333333, ja tentei usar a função toFixed() para delimitar as casas decimais,porem nao funciona, tentei utilizar o css para delimitar o numero de caracteres, mas acaba que o numero inteiro da dizima fica escondido, ja que utilizei a propriedade overflow:hidden, para evitar que os numeros vazem do conteiner da aplicação , de qualquer forma ainda nao achei solução, se alguem puder ajudar vou agradescer muito.
Cara, acho que eu já resolvi esse bug no outro vídeo, dá uma olhada lá! O nome é “resolvendo bugs e refatorando código”.
Opa leo, tudo bem?
sobre o botão "0" eu defini outra className Exemplo:
0
E no css defini o codigo assim exemplo:
.graySpace {
background-color: #505050;
color: white;
padding: 0em 4em 0em 1em;
}
tipo chamei o graySpace e defini desse modo para que o botão fique identico mais ou menos a calculadora do iphone
O cara é enjoado, não gosta de Android não 🤣😂
36:00 setNum(num * (-1))
leo, classname zero / .zero{
width: 7em;
}
em 32:00 era mais facil colocar o usestate vazio " "
e pra qm esta com o display desorganizado entre os numeros e so colocar no .wrapper{ max-width:193px}
Oi
Koé
Olá, alguém sabe me ajudar?
Eu escrevi o npm start .... mas apareceram várias msg de erro e não abriu a página do react.. Essas foram as msg de erro:
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path C:\Users
emon\OneDrive\Documents\estudos\shecodes
eact\w2-homework/package.json
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, open 'C:\Users
emon\OneDrive\Documents\estudos\shecodes
eact\w2-homework\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users
emon\AppData\Local
pm-cache\_logs\2022-11-23T14_40_41_321Z-debug-0.log
PS C:\Users
emon\OneDrive\Documents\estudos\shecodes
eact\w2-homework>
Oi, escreve “npm install” e tenta o “npm start” de novo 😁
@@leoujo o meu da o mesmo erro ,fiz o que voce recomendou mais nao funcionou