Chat[5] - Tecnologia - Introdução à linguagem JavaScript

Tecnologia
ThiagoDV  
em 05/03/20 11:12

Comentários

Último comentário 1º comentário do autor Só moderadores Só quem eu sigo Ordenar por gostei
Mohammed  
em 05/03/2020 11:46
Thiago, estarei acompanhando. Vc pode disponibilizar o teu index.html? O burrão aqui fez algo diferente e não tou encontrando o erro do meu arquivo.
; 1; ; 0;
0 '; 0';
Chat[5] - Tecnologia - Introdução à linguagem JavaScript - #1 de 11
ThiagoDV  
em 05/03/2020 11:57
@Mohammed vish, esqueci de disponibilizar, né. Copia esses aqui:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css">
    <title>Pedra Papel e Tesoura</title>
  </head>
  <body>
    <header id="titulo-container">
      <h1 id="titulo">Pedra, Papel e Tesoura</h1>
    </header>
    <div id="placar-container">
      <div id="jogador-placar" class="label">Jogador</div>
      <div id="computador-placar" class="label">Computador</div>
      <div id="pontuacao">
        <span id="pontuacao-jogador">0</span>:<span>0</span>
      </div>
    </div>
    <div id="container-resultado">
      <p id="mensagem-resultado">Aguardando primeira jogada...</p>
    </div>
    <div id="jogadas">
      <div id="pedra" class="opcao"><img src="img/rock.png" alt="Pedra" /></div>
      <div id="papel" class="opcao"><img src="img/paper.png" alt="Papel" /></div>
      <div id="tesoura" class="opcao"><img src="img/scissor.png" alt="Tesoura" /></div>
    </div>
    <div id="mensagem-clique">
      <p>Clique para jogar!</p>
    </div>
  </body>
</html>

style.css

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

:root {
  --main-color: #092952;
  --green-border: #49a83d;
  --bg-red: #d4223a;
  --regular-border: #93a4bf;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  width: 120px;
}

body {
  background-color: var(--main-color);
  font-family: "Roboto", sans-serif;
  color: #fff;
}

#titulo-container {
  background-color: #fff;
  text-align: center;
  padding: 10px;
  color: var(--main-color);
}

#placar-container {
  border: 3px solid var(--green-border);
  width: 200px;
  margin: 20px auto;
  position: relative;
  border-radius: 5px;
  padding: 10px;
}

#pontuacao {
  font-size: 36px;
  text-align: center;
}

.label {
  background-color: var(--bg-red);
  position: absolute;
  padding: 5px;
  font-size: 14px;
  border-radius: 5px;
  top: 30%;
}

#jogador-placar {
  left: -15%;

}

#computador-placar {
  right: -20%;
}

#mensagem-resultado {
  text-align: center;
  font-size: 30px;
  padding-bottom: 25px;
  font-weight: bold;
}

#jogadas {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.opcao {
  margin: 0 30px;
  border: 2px solid var(--regular-border);
  border-radius: 50%;
  padding: 20px;
  cursor: pointer;
  transition: 0.5s background-color;
}

.opcao:hover {
  background-color: #3a5374;
}

#mensagem-clique {
  text-align: center;
  font-weight: bold;
  font-size: 24px;
}

@media (max-width: 375px) {
  #jogadas {
    flex-direction: column;
  }
}
; 1; ; 0;
0 '; 0';
Chat[5] - Tecnologia - Introdução à linguagem JavaScript - #2 de 11
ThiagoDV  
em 05/03/2020 12:57
@Mohammed ah, esqueci de disponibilizar as imagens, quando pegar o pc mais tarde subo as imagens aqui tb
; 1; ; 0;
0 '; 0';
Chat[5] - Tecnologia - Introdução à linguagem JavaScript - #3 de 11
Mohammed  
em 05/03/2020 13:08
Muito obrigado, meu caro!
; 2; ; 0;
0 '; 0';
Chat[5] - Tecnologia - Introdução à linguagem JavaScript - #4 de 11
naoEhJorel  
em 05/03/2020 14:44
Fala thiago. Po, eu nunca vi seus videos e vou começar a acompanhar agora ... os códigos que vc desenvolve nos chats estão versionados no github?
; 1; ; 0;
0 '; 0';
Chat[5] - Tecnologia - Introdução à linguagem JavaScript - #5 de 11
ThiagoDV  
em 05/03/2020 16:48
@IvanNetto cara eu ia versionar mais para o final dessa série que tou fazendo mas posso começar o chat de hoje versionando. Fica mais fácil mandar o link do repo para a galera do que ficar enviando código aqui. 

Chega lá. Se não me engano você já programa, né. De vez em quando eu dou umas patinadas lá e a galera mais experiente dá uns toques interessantes hahaha
; 1; ; 0;
0 '; 0';
Chat[5] - Tecnologia - Introdução à linguagem JavaScript - #6 de 11
ThiagoDV  
em 05/03/2020 20:00
Pelo visto não teve chat do Thiago hoje, se teve já terminou. Então vou começar o nosso chat logo agora. Vou só preparar o ambiente aqui e já começamos. 
; 1; ; 0;
0 '; 0';
Chat[5] - Tecnologia - Introdução à linguagem JavaScript - #7 de 11
ThiagoDV  
em 05/03/2020 20:12
Ih, a ferramenta de streaming que eu costumo usar agora é paga (e muito cara ) vou tentar resolver aqui pra ver se ainda tem chat hoje. 
; 1; ; 0;
0 '; 0';
Chat[5] - Tecnologia - Introdução à linguagem JavaScript - #8 de 11
naoEhJorel  
em 05/03/2020 21:27
Ai caramba. Vou ver se pego alguma coisa ao vivo ainda... 
; 1; ; 0;
0 '; 0';
Chat[5] - Tecnologia - Introdução à linguagem JavaScript - #9 de 11
Abra  
em 07/03/2020 00:11
@ThiagoDV já viu a apresentação "A brief history of JavaScript" do Brendan Eich?

; 1; ; 0;
0 '; 0';
Chat[5] - Tecnologia - Introdução à linguagem JavaScript - #10 de 11
ThiagoDV  
em 07/03/2020 18:18
@Abra não. Vou dar uma olhada depois. Obrigado pela recomendação. 
; 2; ; 0;
0 '; 0';
Chat[5] - Tecnologia - Introdução à linguagem JavaScript - #11 de 11

4 usuários comentaram este tópico.
Clique para ir para o primeiro comentário do usuário.

Ações Pesquisa Videos Livros Análise de Carteira Desconto FAQs Orientação Esportiva Ofertas e Serviços Bastter System Boletim IR Podcasts Revista Tecnologia - Ajuda Eu Assinar Ações Pesquisa Videos Livros Análise de Carteira Desconto FAQs Ofertas e Serviços Orientação Esportiva Boletim BS Podcasts IR Tecnologia Ajuda eu Revista Assinar Assinar

BastterZap