1
resposta

sobre novo projeto!

bom eu estou fazendo um formulário usando html e css, mais também queria integrar java script, bom o projeto é para saber a entrada e saída de funcionário da empresa, e o que eu estava pensando é a partir da hora que for colocado a hora de chegada e saída do funcionário e ele clicar no botão de enviar, o sistema calcular a hora de entrada e saída dele para o outro entrar, mais também queria exibir uma mensagem com a poupup alert avisando pro funcionário que está na hora do outro entrar, mais estou fazendo o curso de java script e não sei ainda como fazer isso, alquem pode me ajudar?

html:

         <!DOCTYPE html>
<html lang="pt.br">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="troca-de-turno.css">
    <link href="https://fonts.googleapis.com/css?family=Dancing+Script&display=swap" rel="stylesheet">
    <title>calculadora inteligente</title>
  </head>
  <body>
    <header>
      <h1>ensira seus dados</h1>
    </header>

    <main>
      <div>
        <form>
          <tbody>
            <table>
                <th>horario de paola</th>

                <th>horario de paula</th>

            </table>
        </tbody>
          <div class="caixa">
            <label for="paula">paula </label>
            <input type="text" id="paula" required placeholder="horario de chegada">
            <input type="text" id="paula" required placeholder="horario de saida" >
          <div class="bau">
            <label for="paola">paola</label>
            <input type="text" id="paola" required placeholder="horario de chegada">
            <input type="text" id="paola" required placeholder="horario de saida">
          </div>
            <input type="submit"  value="calcular" class="calcular">
          </div>
        </form>
      </div>
    </main>
    <script src="troca.js"></script>
  </body>
</html>

1 resposta

css:

h1 {
  text-align: center;
  font-family: 'Dancing Script', cursive;
  font-size: 60px;
}

th {
  border: 2px solid pink;
  padding: 0 30px 0;
  margin: 0 4px 0;
  text-align: center;
  font-family: 'Dancing Script', cursive;


}
input {
  padding: 0 20px 0;
  border: 2px solid pink;
  border-radius: 4px;
}
 .calcular {
  display: block;
  margin: 15px 0 0;
  font-family: 'Dancing Script', cursive;
  padding: 0 12px 0;

}
.caixa{
  margin: 12px 0 0;
}
.bau {
  margin: 12px 0 0
}
input:hover {
  cursor: pointer;
}