Html

[yahyagokmen51-ship-it]

<script> function myFunction() { document.getElementById("demo").innerHTML = "slm; } </script>

Script in head tag

nbr

hihi <title>Sana Bir Sorum Var!</title> <style> body { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; margin: 0; /* Renkli Arka Plan */ background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; text-align: center; overflow: hidden; } #soru { font-size: 2.5em; margin-bottom: 40px; color: #444; text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5); z-index: 1; } #resim { /* Eğer resim kullanmak isterseniz bu kısmı açabilirsiniz */ /* margin-bottom: 30px; width: 80%; max-width: 500px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); z-index: 1; */ display: none; /* Bu örnekte resmi gizledik, isterseniz kaldırabilirsiniz */ } .cevap-butonu { padding: 15px 30px; margin: 10px; font-size: 1.3em; cursor: pointer; border: 2px solid #fff; border-radius: 50px; /* Yuvarlak butonlar */ transition: all 0.3s ease; font-weight: bold; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); z-index: 100; } #evetBtn { background-color: #00b894; /* Turkuaz/Canlı Yeşil */ color: white; } #evetBtn:hover { transform: scale(1.05); background-color: #00a082; } #hayirBtn { background-color: #ff6b6b; /* Canlı Kırmızı */ color: white; position: absolute; /* Yer değiştirme için mutlak konumlandırma */ transition: transform 0.1s ease-out; /* Hızlı hareket */ } #mesaj-alani { position: fixed; top: 0; left: 0; width: 95%; height: 100%; display: none; flex-direction: column; justify-content: center; align-items: center; background-color: rgba(255, 255, 255, 0.95); /* Yarı saydam beyaz */ z-index: 999; } #sonMesaj { font-size: 3em; color: #e84393; /* Canlı Pembe */ text-align: center; padding: 20px; border-radius: 15px; background-color: #fff; box-shadow: 0 0 30px rgba(255, 105, 180, 0.6); animation: bounceIn 1s forwards; }

    /* Kalp ve Animasyonlar */
    .kalp {
        position: absolute;
        font-size: 4em;
        color: #ff6b6b; 
        animation: float 4s ease-in forwards;
        opacity: 0;
    }

    @keyframes bounceIn {
        0% { transform: scale(0.5); opacity: 0; }
        95% { transform: scale(1); opacity: 1; }
    }
    @keyframes float {
        0% { transform: translateY(0) rotate(0deg); opacity: 1; }
        100% { transform: translateY(-500px) rotate(30deg); opacity: 0; }
    }
</style>

<div id="soru">Benimle date'e çikarmısın👉👈?</div>

<div id="butonlar" style="position: relative; width: 80vw; height: 100px; display: flex; justify-content: center; align-items: center;">
    <button id="evetBtn" class="cevap-butonu" onclick="evetCevabi()">EVET</button>
    <button id="hayirBtn" class="cevap-butonu" onclick="hayirCevabi()">HAYIR</button>
</div>

<div id="mesaj-alani">
    <div id="sonMesaj"></div>
</div>

<script>
    const hayirBtn = document.getElementById('hayirBtn');
    const evetBtn = document.getElementById('evetBtn');
    const mesajAlani = document.getElementById('mesaj-alani');
    const sonMesajDiv = document.getElementById('sonMesaj');
    const body = document.body;
    const butonlarDiv = document.getElementById('butonlar');

    // "Hayır" butonuna tıklandığında çalışan fonksiyon
    function hayirCevabi() {
        // Butonun bulunduğu 'butonlar' div'inin boyutlarını al
        const containerRect = butonlarDiv.getBoundingClientRect();
        const btnRect = hayirBtn.getBoundingClientRect();

        // Yeni rastgele x ve y pozisyonları hesapla
        // Yeni konum, butonlar div'inin sınırları içinde kalmalı
        const maxX = containerRect.width - btnRect.width;
        const maxY = containerRect.height - btnRect.height;
        
        // Rastgele pozisyonları hesapla (0'dan maxX/maxY'a kadar)
        const newX = Math.random() * maxX; 
        const newY = Math.random() * maxY;
        
        // Butonu yeni konuma taşı (css transform kullanmak daha akıcıdır)
        // Butonun yer değiştirme animasyonu kısa ve hızlı görünecektir.
        hayirBtn.style.transform = `translate(${newX}px, ${newY}px)`;
    }

    // Kalp animasyonu oluşturan fonksiyon
    function kalpOlustur(sayi) {
        for (let i = 0; i < sayi; i++) {
            const kalp = document.createElement('div');
            kalp.textContent = '🫶';
            kalp.className = 'kalp';
            
            // Kalp başlangıç pozisyonunu rastgele ayarla
            kalp.style.left = Math.random() * 100 + 'vw';
            kalp.style.bottom = '-50px'; // Ekranın altından başlasın
            kalp.style.animationDelay = Math.random() * 1 + 's'; // Rastgele gecikme

            mesajAlani.appendChild(kalp);
        }
    }

    // "Evet" butonuna basıldığında çalışan fonksiyon
    function evetCevabi() {
        // Butonları ve soruyu gizle
        evetBtn.style.display = 'none';
        hayirBtn.style.display = 'none';
        document.getElementById('soru').style.display = 'none';

        // Mesaj alanını göster
        mesajAlani.style.display = 'flex';

        // Kalp animasyonunu başlat
        kalpOlustur(20); 

        // Cevap mesajını göster
        sonMesajDiv.innerHTML = 'ufak bir şaka yapmak istedim gül diye🌹! 🥰<br><br> (Anlayışın için teşekkür ederim) 😉';

        // Animasyon bittikten sonra kalpleri temizle
        setTimeout(() => {
            // Kalpleri silmek yerine sadece ana mesajı tutabiliriz
            // Amaç mesajın ve kalplerin görünmesiydi.
        }, Int32Array);
    }

</script>

Hey This is my JavaScript Learning Highlight! Try yours from: https://play.google.com/store/apps/details?id=com.pkj.javascript

[Kurva-Pravalika]

Hi! @yahyagokmen51-ship-it I’d like to contribute and fix this issue. I noticed a few syntax and structure errors in the HTML/JS, and I can submit a corrected version. Can I go ahead and work on this?