Guilherme Alves

Fevereiro 5, 2022

19 horas atrás, wash disse:

Entendi.
É porque você faz a matemática no php
Nem precisava. Pode ser resolvido somente com js.
mas segue sugestão:
arquivo .php

<?php
$trab = 0;
$apost = 0;
$prova = 0;
$trilha1 = 0;
$trilha2 = 0;
$med = 0;
$showModal = false;

if (isset($_POST['acao'])) {
    $trab = $_POST['trab'] * 8;
    $apost = $_POST['apost'] * 2;
    $prova = $_POST['prova'] * 6;
    $trilha1 = $_POST['trilha1'] * 1;
    $trilha2 = $_POST['trilha2'] * 1;

    $peso1 = (($trilha1 + $trilha2) / 2) * 1;
    $peso3 = (($trab + $apost) / 10) * 3;
    $peso6 = $prova;
    $med = ($peso1 + $peso3 + $peso6) / 10;
    $rec = (($med * 0.6) - 6) / (0.4 * (-1));

    $showModal = true;
}
?>
<!DOCTYPE html>
<html lang="pt=br">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fundamental I e II - Cálculo de notas</title>
    <link rel="stylesheet" type="text/css" href="assets/css/fundamentaal.css">
</head>

<body>
    <section id="fund_I_II">
        <div class="container">

            <div class="box_form">
                <div class="title texto">
                    <h1>Média Ensino Fundamental I e II</h1>
                </div>
                <div class="form_inputs">
                    <form method="POST" action="">

                        <label>Nota de trabalho</label>
                        <input type="number" name="trab" required autofocus min="0" max="10" step=".01"></input>

                        <label>Nota de apostila</label>
                        <input type="number" name="apost" required min="0" max="10" step=".01"></input>

                        <label>Nota de prova</label>
                        <input type="number" name="prova" required min="0" max="10" step=".01"></input>

                        <label>Nota de trilha 1</label>
                        <input type="number" name="trilha1" required min="0" max="10 step=" .01"></input>

                        <label>Nota de trilha 2</label>
                        <input type="number" name="trilha2" required min="0" max="10" step=".01"></input>

                        <input class="enviar " type="submit" name="acao" />

                    </form>
                </div>
            </div>

            <div id="modal-notas-aprovacao" class="modal-container<?= $showModal ? ' mostrar' : '' ?>">
                <div class="modal">
                    <button class="fechar">x</button>
                    <div class="aprovacao">
                        <?php
                        if (isset($_POST['acao']) && $med >= 6) {
                            echo 'Sua média do bimestre é: '
                                . number_format($med, 2)
                                . '<br>'
                                . 'Você foi aprovado';
                        }
                        ?>
                    </div>

                    <div class="reprovacao">
                        <?php
                        if (isset($_POST['acao']) && $med < 6) {
                            echo 'Sua média do bimestre é: '
                                . number_format($med, 2)
                                . '<br>'
                                . 'Você está de RECUPERAÇÃO!'
                                . ' É necessário tirar ' . number_format($rec, 2) . ' na prova de recuperação.';
                        }
                        ?>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script>
        const modalID = 'modal-notas-aprovacao'
        const modal = document.getElementById(modalID);
        modal.addEventListener('click', (e) => {
            if (e.target.id == modalID || e.target.className == 'fechar') {
                modal.classList.remove('mostrar');
            }

        });
    </script>

</body>

</html>

Arquivo .css


*{
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  font-family: Arial;
  background-color: #0344f7;
  overflow: hidden;
}
h1 {
  margin: 0;
  padding: 0;
}
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;  
  align-items: center;
}
.box_form {
  width: 420px;
  background-color: #0095cf;
  border: 1px solid white ;
  border-radius: 15px;
}
.title {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  color: #FFF;
  height: 80px;
}
.form_inputs form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 330px;
}
.form_inputs label {
  text-align: center;
  color: white;
}
.form_inputs input {
  text-align: center;
  width: 200px;
  margin-top: 5px;
  padding: 5px;
  border:none;
  border-radius: 5px;
}
.form_inputs .enviar {
  width: 100px;
  margin-top: 8px;
  border-radius: 7px;
  padding: 10px;
  color: white;
  font-weight: bold;
  font-size: 16px;
  border:0;
  background-color: green;
}
.aprovacao,
.reprovacao {
  color: #000;
  text-align: center;
}
.aprovacao {
  padding: 10px;
}
.modal-container{
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, .5);
  position: fixed;
  top: 0 ;
  left: 0;
  z-index: 2000;
  display: none;
  justify-content: center;
  align-items: center;
}
.modal {
  background-color: white;
  max-width: 60%;
  min-width: 300px;
  padding: 40px;
  box-shadow: 5px 5px 6px 4px #000;
  border-radius: 10px;
  position: relative;
}
@keyframes modal {
  from {
      opacity: 0;
      transform: translate3d(0,-60px, 0);
  }
  to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
  }
}
.mostrar .modal {
  animation: modal .3s;
}
.modal-container.mostrar {
  display: flex;
}
.fechar {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 0;
  background-color: white;
  font-size: 25px;
  cursor: pointer;
}

Muito obrigado mano, funcionou perfeitamente. Obrigado pela ajuda!!!!!!!

Fevereiro 4, 2022

1 hora atrás, lowys disse:

Testei aqui e a modal ficou amostrada o tempo todo na tela.
talvez seu css tenha alguma animação de show e autohide

Poderia me ajudar a achar essa animação, já tentei e não achei

*{

box-sizing: border-box;

}

body {

margin: 0;

padding: 0;

font-family: Arial;

background-color: #0344f7;

overflow: hidden;

}

h1 {

margin: 0;

padding: 0;

}

.container {

height: 100vh;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

}

.box_form {

width: 420px;

background-color: #0095cf;

border: 1px solid white ;

border-radius: 15px;

}

.title {

display: flex;

align-items: flex-end;

justify-content: center;

color: #FFF;

height: 80px;

}

.form_inputs form {

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

height: 330px;

}

.form_inputs label {

text-align: center;

color: white;

}

.form_inputs input {

text-align: center;

width: 200px;

margin-top: 5px;

padding: 5px;

border:none;

border-radius: 5px;

}

.form_inputs .enviar {

width: 100px;

margin-top: 8px;

border-radius: 7px;

padding: 10px;

color: white;

font-weight: bold;

font-size: 16px;

border:0;

background-color: green;

}

.aprovacao,

.reprovacao {

color: #000;

text-align: center;

}

.aprovacao {

padding: 10px;

}

.modal-container{

width: 100vw;

height: 100vh;

background-color: rgba(0, 0, 0, .5);

position: fixed;

top: 0 ;

left: 0;

z-index: 2000;

display: none;

justify-content: center;

align-items: center;

}

.modal {

background-color: white;

max-width: 60%;

min-width: 300px;

padding: 40px;

box-shadow: 5px 5px 6px 4px #000;

border-radius: 10px;

position: relative;

}

@keyframes modal {

from {

opacity: 0;

transform: translate3d(0,-60px, 0);

}

to {

opacity: 1;

transform: translate3d(0, 0, 0);

}

.mostrar .modal {

animation: modal .3s;

}

.modal-container .mostrar {

display: flex;

}

.fechar {

position: absolute;

top: 5px;

left: 5px;

width: 30px;

height: 30px;

border-radius: 50%;

border: 0;

background-color: white;

font-size: 25px;

cursor: pointer;

}

Fevereiro 4, 2022

Galera quando vou enviar o submit do php ele aparece o pop-up rapidamente e não fica fixo na tela para exibir o resultado do cálculo. Alguém consegue me ajudar?

<!DOCTYPE html>

<head>

<title>Fundamental I e II - Cálculo de notas</title>

</head>

<body>

<h1>Média Ensino Fundamental I e II</h1>

</div>

<label>Nota de trabalho</label>

<label>Nota de apostila</label>

<label>Nota de prova</label>

<label>Nota de trilha 1</label>

<label>Nota de trilha 2</label>

</form>

<?php

$trab = 0;

$apost = 0;

$prova = 0;

$trilha1 =0;

$trilha2 = 0;

$med = 0;

if(isset($_POST['acao'])){

$trab = $_POST['trab'] * 8;

$apost = $_POST['apost'] * 2;

$prova = $_POST['prova'] * 6;

$trilha1 = $_POST['trilha1'] * 1;

$trilha2 = $_POST['trilha2'] * 1;

$peso1 = (($trilha1 + $trilha2) / 2) * 1;

$peso3 = (($trab + $apost) / 10) * 3;

$peso6 = $prova;

$med = ($peso1 + $peso3 + $peso6) / 10;

$rec = (($med *0.6)-6) / (0.4 * (-1));

}

?>

</div>

<?php

if(isset($_POST['acao']) && $med>=6){

echo 'Sua média do bimestre é: '; echo number_format($med,2); echo '<br>';

echo 'Você foi aprovado';

}

?>

</div>

<?php

if(isset($_POST['acao']) && $med < 6){

echo 'Sua média do bimestre é: '; echo number_format($med,2); echo '<br>';

echo 'Você está de RECUPERAÇÃO!';

echo ' É necessário tirar '.number_format($rec,2). ' na prova de recuperação.';

}

?>

</div>

</section>

function iniciaModal (modalID) {

const modal = document.getElementById(modalID);

console.log(modal);

modal.classList.add('mostrar');

modal.addEventListener('click', (e) => {

if(e.target.id == modalID || e.target.className =='fechar') {

modal.classList.remove('mostrar');

}

});

}

const enviar= document.querySelector('.enviar');

enviar.addEventListener('click', () => iniciaModal('modal-notas-aprovacao'));

</script>

</body>

</html>

Entrar

Guilherme Alves

Total de itens

Registro em

Última visita

Tipo de Conteúdo

Perfis

Fóruns

Posts postados por Guilherme Alves

ABRIR POP-UP EM UM SUBMIT PHP

ABRIR POP-UP EM UM SUBMIT PHP

ABRIR POP-UP EM UM SUBMIT PHP

Navegação

Atividades