12
respostas

8 - Faça como eu fiz: console.log/ Projeto: Cadastro-Jedi-Treinando-JS

Para treinar o console.log eu brinquei um pouco fazendo um cadastro que pede nome, sobrenome, idade e uma pergunta. Caso acerte aparecerá: " Isso aí, você se tornou o novo Jedi!" e caso erre: "Aprender você ainda precisa :(". abaixo deixarei o código, link dos arquivos no GitHub e print de como fica a tela.

alert('Boas-vindas ao cadastro Jedi');
let resposta = 'tentativa não há';
// Cria uma variável para armazenar o nome
let nome = prompt("Qual é o seu nome?");
let sobrenome = prompt("Qual seu sobrenome?");
// Exibe o nome e sobrenome no console
console.log("Nome:", nome + " " + sobrenome);

let idade = prompt("Qual sua idade?");
// Exibe a idade no console
console.log("Idade:", idade);
// Exibindo Mensagem
alert('Falta pouco para se tornar um Jedi');
let pergunta = prompt('Faça ou não faça... ');
if (pergunta == resposta) {
    alert(`Isso aí, você se tornou o novo Jedi!`);
} else {
    alert('Aprender você ainda precisa :(')
}

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

GitHub

12 respostas

Gostei da resposta modo Meste Yoda :D

Obrigada! :)

Super criativa Ausiane, muito legal!

Obrigada, Ronaldo! :D

Bom dia! Amei seu projeto Ausiane. Tenho uma pergunta, como você alterou a imagem para o Yoda? Consegue me explicar?

Oie Letícia, fico feliz que tenha gostado. Claro, posso sim!Fui na pasta de imagens e abri todas as imagens que tinha, daí achei a imagem que estava no lugar (aquele robôzin), olhei qual nome estava na imagem e logo em seguida fui no arquivo index.html e procurei em quais partes do código tinha essa imagem. Te mostrarei abaixo:

Como eu sabia que o nome da imagem era "robot.png", suspeitei que aqui que eu precisaria alterar pela imagem que eu gostaria

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Depois como eu não estava conseguindo jogar a minha imagem pelo o vscode, então fui lá na pasta de imagens e joguei meu Mestre Yoda

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Agora com a imagem na pasta eu precisava descobrir como mudar no código pra imagem aparecer la. Lembra que lá aparece "./img/robot.png", fui apagando aos poucos até fica "./img" e coloquei a barra "./img/". Abriu as opções de imagens que estão dentro dessa pasta de imagem, ai tive só que clicar.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Aí por fim você atualiza e abre pra testar. :) Fui testando isso com tudo que dava pra ver se minha suposição estava correta. Modificava, atualizava e testava. No arquivo Style.css também tem coisa pra brincar. Tem como mudar as cores, a imagem de background e o tamanho das coisas. Só num me arrisquei muito nos tamanhos que ainda acho mais complicado. kkkkkk É isso, espero ter te ajudado. Bons Estudos!!

Mulher! Que lindo, parabéns! Amei kkkk Já quero o do Senhor dos Anéis também rsrsrs...

Uma explanação no momento do preenchimento do caminho para o arquivo, para melhorar a experiência durante o desenvolvimento de projetos/aplicações:

Quando se coloca ./ ele mostrará uma lista dos arquivos (se tiver), e também pastas se houver, naquela pasta atual do arquivo que você está editando.

Quando se coloca ../ ele mostrará o que há na pasta superior, se fosse ../../ seriam dois níveis acima.

Daí, com o valor vazio entre as aspas, aperte CTRL + barra de espaço e ele mostrará o conteúdo da pasta atual, se o arquivo estiver dentro de uma outra pasta você seleciona ela e clica/enter. Confesso que uso muito mais esse recurso, pois assim vou navegando para o arquivo que quero inserir ali no campo entre as aspas.

Olá Shara, boa ideia ein?!kkkk´ Obrigada!

Ronaldo, obrigada pelas dicas. Será de grande ajuda.

Olá Ausiane, que topp, obrigada pela explicação vou me aventurar também kkkkkkk e Ronaldo, obrigada também!

Oiie Letícia, por nada!! :) Boa aventura nos estudos! ! kkkk´ Abraço!