2020 18:18

Tecnologia

PanoDeChao 7º

em 05/03/20 11:12

comentada em 07/03/2020 18:18

ver comentários do moderador

tópicos e FAQs relacionados

Comentários

Último comentário 1º comentário do autor Só moderadores Só os meus Só quem eu sigo Ordenar por gostei

Mohammed 181º
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.

Ajuda aí pow!

Chat[5] - Tecnologia - Introdução à linguagem JavaScript - #1 de 11

PanoDeChao 7º

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;
  }
}

Ajuda aí pow!

Chat[5] - Tecnologia - Introdução à linguagem JavaScript - #2 de 11

PanoDeChao 7º

em 05/03/2020 12:57

@Mohammed ah, esqueci de disponibilizar as imagens, quando pegar o pc mais tarde subo as imagens aqui tb

Ajuda aí pow!

Chat[5] - Tecnologia - Introdução à linguagem JavaScript - #3 de 11

Mohammed 181º
em 05/03/2020 13:08

Muito obrigado, meu caro!

Ajuda aí pow!

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?

Ajuda aí pow!

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

PanoDeChao 7º

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

Ajuda aí pow!

Chat[5] - Tecnologia - Introdução à linguagem JavaScript - #6 de 11

PanoDeChao 7º

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.