thiagoBet

by thvinic

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div id="button-container">
  <button id="newLD" class="myButton">Jogos de Hoje</button>
  <button id="newVC" class="myButton">Classificação e dados Série A/ B</button>
  <button id="newFD" class="myButton">Fechar guias</button>
</div>

<div id="createLD" style="display: none">
  <p><script src="https://webmasters.onlinebettingacademy.com/assets/js/webmasters.js" data-lang="br" data-timezone="America/Sao_Paulo" data-widget="livescores" data-color="3b5998|8b9dc3|dfe3ee|f7f7f7|ffffff|333333|5f7ec1|263961|d0d0d0|7b7b7b" type="text/javascript"></script></p>
</div>

<div id="createVC" style="display: none">
  <p><script src="https://webmasters.onlinebettingacademy.com/assets/js/webmasters.js" data-competition_id="26" data-lang="br" data-timezone="America/Sao_Paulo" data-widget="comp_tables" data-color="3b5998|8b9dc3|dfe3ee|f7f7f7|ffffff|333333|5f7ec1|263961|d0d0d0|7b7b7b" type="text/javascript"></script></p>
</div>

<div id="createFD" style="display: none">
  <p>suas guais foram fechadas.</p>
</div>

<h2>Quem joga a partida?</h2><br>
<h3>
<input type="text" style="border: 1px dashed black; overflow: visible; font-size: 18px;" placeholder="time1" class="time1 copy">
VS
<input type="text" style="border: 1px dashed black; overflow: visible; font-size: 18px;" placeholder="time2" class="time2 copy"></h3>
<br><br>

<div class="perguntas">Ambos times Marcam?</div><br>
  <div class="all">
<form class="formiAmbosMarcamSim"> Sim, acredito que ambas equipes marcam.
 </form><details><summary onclick="hello(this)" class="apostaAmbosMarcamSim">Fazer Aposta</summary>  <p style="color:green;">Aposta Adicionada!</p>
</details>
</div><br>

<div class="all">
<form class="formiAmbosMarcamNao"> Não, não acredito que...

CSS

body{
  font-size: 18px;
  font-family: roboto;
}
.all {
 border: 0.7px solid #006100;
 background-color: #ffd8004a;
}
.prontuario-aposta {
 border: 0.3px solid #006100;
 background-color: green;
 color: white;
border-radius:5px;
padding: 5px;
}
.relatorio1 {
 border: 0.3px solid #006100;
 background-color: yellow;
 color: green;
border-radius:5px;
padding: 5px;
}

.perguntas {
font-family: 'roboto',sans-serif;
color: white;
background-color: hsl(206deg 100% 50%);
padding: 10px;
width: 90%;
border-radius: 5px;
}
input {
border:0;outline:0;
    background-color: green;
border-radius: 5px;
     text-align: center;
     color: white;
     
}
input:focus {outline:none!important;}
::placeholder {
  color: white;
  opacity: 1; /* Firefox */
}

JavaScript

const hello = (element) => {
    element.hidden = true;
  }
  
$(function(){
    $('.copy').on('keyup blur', function(){
        var time1 = $(".time1").val();
        $('.placar').val(time1);
     }).blur();
});

$(function(){
    $('.copy').on('keyup blur', function(){
        var time2 = $(".time2").val();
        $('.placar2').val(time2);
     }).blur();
});

$('.myButton').click(function(){
  $('div[id^=create]').hide(); //hide all
  var id = $(this).attr('id'); //get the id of the clicked button
  var end = id.slice(-2);      //get last 2 character (LD/VC/FD) from id
  $(`div[id$=${end}]`).show(); //match the div with id ends with the character and show
});

$(document).ready(function(){
    $(".Add").click(function(){
		$(".formi:nth-child(1)").clone().insertAfter(".formi:last");

    });
});

$(document).ready(function(){
    $(".aposta0x0").click(function(){
		$(".formi0x0:nth-child(1)").clone().insertAfter(".formi0x0:last");

    });
});
$(document).ready(function(){
    $(".aposta1x1").click(function(){
		$(".formi1x1:nth-child(1)").clone().insertAfter(".formi1x1:last");

    });
});

$(document).ready(function(){
    $(".aposta2x2").click(function(){
		$(".formi2x2:nth-child(1)").clone().insertAfter(".formi2x2:last");

    });
});

$(document).ready(function(){
    $(".aposta3x3").click(function(){
		$(".formi3x3:nth-child(1)").clone().insertAfter(".formi3x3:last");

    });
});

$(document).ready(function(){
    $(".aposta4x4").click(function(){
		$(".formi4x4:nth-child(1)").clone().insertAfter(".formi4x4:last");

    });
});

$(document).ready(function(){
    $(".aposta5x5").click(function(){
		$(".formi5x5:nth-child(1)").clone().insertAfter(".formi5x5:last");

    });
});

$(document).ready(function(){
    $(".aposta1x0").click(function(){
		$(".formi1x0:nth-child(1)").clone().insertAfter(".formi1x0:last");

    });
});

$(document).ready(function(){
   ...