Executando verificação de segurança...
5
wil01
2 min de leitura ·

Pedido De Namoro🌹♥️💘 (estilo-programador);

CodeOfLove 💻❤️

Descrição

Olá! Se você está aqui, provavelmente se deparou com o título intrigante deste post e está se perguntando sobre o que se trata essa loucura, certo? 😄 Não se preocupe, se estivesse no seu lugar, também faria a mesma pergunta. Mas, aqui vai uma pergunta para você: já pensou em sair da frente da tela do computador para pedir a pessoa amada em namoro? 😏

Bem, claro que para isso você não precisa sair da frente do seu PC. E é por isso que estamos aqui!

O software abaixo é simples, mas o que realmente importa é a intenção, hehe 😊. Você pode personalizá-lo ainda mais, deixando-o do jeito que preferir, então a imaginação é o limite!

Repositório para baixar os arquivos: Clique aqui

Resultado: CodeOfLove 💻❤️

Resultado

Personalização

Se desejar personalizar a experiência, você pode modificar o código-fonte facilmente. Os principais pontos de interesse estão na manipulação do botão e na animação.

// Trecho de código para animar o botão (JavaScript)
document.addEventListener("DOMContentLoaded", () => {
  const btn = document.querySelector(".no");
  let position = 0;
  let isAnimating = false;

  function moveButton() {
    if (!isAnimating) {
      isAnimating = true;
      position = position === 0 ? -120 : 0; 
      btn.style.transform = `translateY(${position}px)`;
      btn.style.transition = "all 0.2s ease";

      setTimeout(() => {
        isAnimating = false;
      }, 200);
    }
  }

  btn.addEventListener("click", moveButton);
  btn.addEventListener("mouseover", moveButton);
});

Tem mais uma coisinha que não contei antes, com este código JS vai ser um pouco difícil ela recusar, pois ele não permite que o mouse fique em cima do botão nem que seja clicado, caso o usuário seja mobile hehe 🤠.

alert('Abraço!');

Repositório para baixar os arquivos: Clique aqui

Resultado: CodeOfLove 💻❤️

Carregando publicação patrocinada...
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
  • Autor
    Autor

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
1
1
1
1
wil01
  • Autor
    Autor

boa noite, só você rodar o código fonte na sua máquina, não sabe como? me chama no Discord e compartilha a tela "pit_pranks"

1
0
1
1
1
0
1
1
1
1
1
1
vickyy

Opa, queria saber como faço pra executar esses codigos no vscode, nao sei nada de programação mas achei super legal esse pedido e queria tentar, por favor me ajudar

1
1
1
1
1
1
1
1
0
2
2
1
1
0
1
gaguta123

Olá, tudo bem? Eu queria mudar a frase do pedido de namoro e fazer refletir num linkzinho como você fez do datemew.netlify.app. Como eu faço isso? Tentei rodar de algumas formas no VSCode, mas não consigo gerar um link e refletir em web.

1
1
1
0
1
0
1
0
-1
0
-1
-1
-1
-1