Executando verificação de segurança...
Em resposta a Pedido De Namoro🌹♥️💘 (estilo-programador);
3
felipet65

Gostei bastante!

Fiz algumas alterações no texto e enviei pra minha namorada!
Hospedei no S3 da AWS e enviei o link pra ela, ela amou!

<!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">
  <link rel="stylesheet" href="styles.css">
  <title>Casa comigo?</title>
 </head>
 <header>
  <div class="cabeçalho">
   <h3>Não aceito "não" como resposta 😔</h3>
  </div>
</header>
<body>
  <h1>Você aceita casar comigo?</h1>
  <div class="yes-or-no">
  <button class="yes" onclick="tanks()">Sim :)</button>
  <button class="no" onclick="not()">Não :(</button>
  </div>
</body>
<script src="script.js"></script>
</html>

E deixei interativo para celular também.

var btn = document.querySelector(".no");
var position

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
    btn.addEventListener("touchstart", function() {
        position ? (position = 0) : (position = 150);
        btn.style.transform = `translate(${position}px,0px)`;
        btn.style.transition = "all 0.3s ease";
      });
      
      btn.addEventListener("touchend", function() {
        position ? (position = 0) : (position = 150);
        btn.style.transform = `translate(${position}px,0px)`;
        btn.style.transition = "all 0.3s ease";
      });
  } else {
    btn.addEventListener("mouseover", function() {
        position ? (position = 0) : (position = 150);
        btn.style.transform = `translate(${position}px,0px)`;
        btn.style.transition = "all 0.3s ease";
        });
  }

function tanks() {
alert("Eu também te amo e aceito casar com vc! :)")
}  

function not() {
alert("Você nem ta maluca de não aceitar, volte lá e clique no sim! :/")
}

Aqui eu deixei o texto mais responsivo pra tela de celular.

body {
    margin: 0;
    padding: 0;
    background: rgb(241, 23, 23);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100vh;
    font-family: Arial, Helvetica, sans-serif;
    }
    
    header {
    position: fixed;
    top: 0;
    padding: 5px;
    align-items: center;
    text-align: center;
    background: #121212;
    color: white;
    width: 50%;
    font-size: 1rem;
    font-weight: bold;
    }
    
    .yes-or-no {
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    }
    
    .yes-or-no .yes {
    font-weight: bold;
    margin-right: 5px;
    background: rgb(132, 207, 132);
    color: white;
    font-size: 1rem;
    border: 2px solid black;
    border-radius: 8px;
    padding: 5px;
    text-transform: uppercase;
    }
    
    .yes-or-no .no {
    margin-left: 5px;
    font-weight: bold;
    background: rgb(216, 106, 106);
    color: white;
    font-size: 1rem;
    border-radius: 8px;
    border: 2px solid black;
    padding: 5px;
    text-transform: uppercase;
    }
    
    
    h1 {
    color: #fff;
    display: block;
    font-size: 2em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 10%;
    margin-inline-end: 10%;
    font-weight: bold;
    }
1
1
BrunoCamargo

nao conhecia addEventListener("touchend" vivendo e aprendendo kakakak eu tambem fiz algumas modificações quando peguei esse codigo.. vou adpatar ele pra mobile tambem agora.

1
1
0
1
wil01

Olá felipe , vi que você atualizou o código JS para ter melhor interação com celulares touch e testei ele,ficou muito bom sinal!
Porém está com um erro de position ao carregar o alerta , como se tivesse um reload na página,por isso atualizei o codigo anterior e deixarei aqui para você testar com o celular. Abraço!!

add um id no botão que está escrito não chamado "

Js

var btn = document.querySelector(".no");
var position
btn.addEventListener("click", function() {
position ? (position = 0) : (position =     150);
btn.style.transform =    `translate(${position}px,0px)`;
btn.style.transition = "all 0.3s ease";
});
function tanks() {
alert("tanks :)")
}  
function not() {
document.getElementsByClassName('no').style.translateX = ("150px");
}
1
1