HTML e CSS duvida com tabela

[MARCEL MENDES 0]

Boa noite

Gostaria de uma ajuda, sou iniciante, estou tentando fazer uma tabela que eu fiz em Excel, só que eu queria fazer em PHP ou Java script, alguém pode me ajudar a dar o pontapé inicial por onde começo! Sei que vai precisar de um banco de dados,

O que eu gostaria de fazer é o seguinte, o usuário admin entra na área restrita, que eu já fiz o login e sistema de cadastro em php, ele lança o time que vai competir e colocar gerar volante, ai o usuário normal quando abrir o volante no login dele faz o jogo e coloca enviar ou validar jogo, depois em uma data especifica o admin lança o resultado por uma outra página e coloca gerar vai gerar uma página de classificação de quem fizer mais pontos, assim colocação 1º João 2º Rafael etc... quantos mais resultados você acertar mais ponto você vai obter!

 

Segue a tabela abaixo, para melhor visualização.

Assim coluna 1 flamengo x botafogo eu marquei que botafogo vai ganhar, aonde você visualiza por um (X) se eu marcasse no meio seria empate e no lado esquerdo seria que o flamengo que sairia vitorioso. Bom sou iniciante e está difícil, mais quero aprender e por onde posso começar alguma ajuda desde já agradeço abraço a todos. 

 

[wanderval 19]

Da uma olhada nesse código aproveitei sua duvida pra treinar grid, vai ver nesse código um pouco de "sass" e a utilização de template e o uso dos elementos " dl, dd, dt " junto com grid layout. basicamente usei javascript, eu particularmente não gostaria de usar PHP com Javascript, nessa situação tendo em mente que existem muitos frameworks javascript, só usaria javascript no front.

 

https://jsfiddle.net/wanderval/6aLobnwg/2/

[MARCEL MENDES 0]

6 horas atrás, wanderval disse:

Da uma olhada nesse código aproveitei sua duvida pra treinar grid, vai ver nesse código um pouco de "sass" e a utilização de template e o uso dos elementos " dl, dd, dt " junto com grid layout. basicamente usei javascript, eu particularmente não gostaria de usar PHP com Javascript, nessa situação tendo em mente que existem muitos frameworks javascript, só usaria javascript no front.

 

https://jsfiddle.net/wanderval/6aLobnwg/2/

Wandarval, primeiramente queria muito agradecer, não sei quanto tempo levou para fazer isso, mais fico show trabalho incrível. 

[MARCEL MENDES 0]

Você tem e-mail?

tem algum cursos que poderia indicar? algum bizu?

queria muito a aprender a programar

 

[MARCEL MENDES 0]

Em 27/07/2019 at 21:24, wanderval disse:

Da uma olhada nesse código aproveitei sua duvida pra treinar grid, vai ver nesse código um pouco de "sass" e a utilização de template e o uso dos elementos " dl, dd, dt " junto com grid layout. basicamente usei javascript, eu particularmente não gostaria de usar PHP com Javascript, nessa situação tendo em mente que existem muitos frameworks javascript, só usaria javascript no front.

 

https://jsfiddle.net/wanderval/6aLobnwg/2/

Fiz o formularia que o admin vai fazer os jogos.

 

Coloquei os links mais não está puxando ! 

<script src="volante_user.js"></script>

<link rel="stylesheet" type="text/css" href="volante_user.css">

[wanderval 19]

eu tenho e-mail, mas acho mais fácil você me mandar mensagem privadas por aqui facilita eu sempre entro aqui.

eu aconselho você estudar pela plataforma udemy, o código que fiz foi utilizado apenas javascript sem uso de jquery, mas poderia ter cido construido usando framework ai iria ficar show, mas tudo ao seu tempo.

 

1- faça um curso de java script puro

2- faça um curso de algum framework javascript ex: (Angular +2 ou acima, Vue.js ou React)

 

geralmente eu não peço mas da um joinha na minha resposta ai ninguém da pra dar como resolvido o problema kkk

 

sobre o css o problema e que eu escrevi usando o formato scss que é sass tem que converter pra css comum pra poder utilizar!

 

 

o codigo css puro seria esse aqui:

 

.table-game dd:hover input ~ .checkmark, input[type="radio"]:checked ~ .checkmark {
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
  background: #0080000d;
}
.table-game dd:hover input ~ .draw.checkmark, input[type="radio"]:checked ~ .draw.checkmark, .table-game dd:hover input ~ .draw.checkmark:hover, input[type="radio"]:checked ~ .draw.checkmark:hover {
  color: darkred;
  background: #8b000012;
}

dl {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid #eee;
  margin: 0 auto;
}
dl dt, dl dd, dl .header-table {
  display: flex;
  margin: 0 auto;
  min-width: 40px;
  position: relative;
  place-content: center;
  width: 100%;
  height: 40px;
  justify-content: center;
  align-items: center;
}
dl dd:first-child,
dl dt:first-child {
  margin-left: 20px;
}
dl dd:nth-child(even) {
  font-size: 1.2em;
}
dl dd:nth-child(even),
dl dt:nth-child(even) {
  place-content: center;
  max-width: 20px;
}

.table-game {
  font-family: sans-serif;
  font-size: 12px;
  background: #fff;
}
.table-game .header-table {
  background: yellow;
  font-size: 1.2em;
  font-weight: 600;
}
.table-game dl:hover {
  background: #f8f8f8;
  cursor: pointer;
}
.table-game dl input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  margin: auto auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.checkmark {
  color: green;
  text-align: center;
  display: none;
}
.checkmark.draw {
  color: darkred;
}

 

[wanderval 19]

e o +1 na minha resposta amigo pra fechar esse post!

[MARCEL MENDES 0]

aonde eu clico ?

[MARCEL MENDES 0]

ta dando erro quando clico no +1

agora foi 

[Thalles Rangel 0]

Cara estuda a base primeiro da linguagem, não adianta querer sair criando  o Facebook se você não sabe nem a sintaxe básica da linguagem.