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;
}
Oláa, alguem pode me ajudar é a primeira vez que tento algo do tipo kkkk
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.
peguei a ideia desse post e fiz um projeto bem elaborado, Muito bom
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");
}
Olá gostei muito da ideia, mas sou bem iniciante, alguem pode me ajudar. eu colei no vscode mas não funcionou