Yeni Baslayanlar Icin Javascript Ile Adim Adim Basit Anket Olusturma

Yeni Başlayanlar İçin JavaScript ile Adım Adım Basit Anket Oluşturma

Günümüz dijital dünyasında kullanıcı geri bildirimleri, herhangi bir web sitesinin veya uygulamanın başarısı için hayati öneme sahiptir. Kullanıcılarınızın ne düşündüğünü anlamak, içeriğinizi geliştirmek, hizmetlerinizi optimize etmek ve hatta pazarlama stratejilerinizi belirlemek için eşsiz bir fırsat sunar. Bu geri bildirimleri toplamanın en etkili ve doğrudan yollarından biri de anketlerdir. Ancak bir anket oluşturmak düşündüğünüzden daha kolay olabilir, özellikle de JavaScript anket becerilerinizi kullanarak adım adım ilerlediğinizde. Bu makalede, yeni başlayanlar için JavaScript kullanarak nasıl basit bir anket oluşturacağınızı adım adım, kod detaylarına boğulmadan, mantığını kavrayarak inceleyeceğiz.

Giriş: Neden Basit Bir Anket?

Basit bir anket, karmaşık veritabanı entegrasyonlarına veya gelişmiş sunucu tarafı programlamaya ihtiyaç duymadan, hızlıca geri bildirim almanızı sağlar. Özellikle içeriğinizle ilgili belirli sorular sormak, kullanıcı deneyimi hakkında anlık nabız yoklamak veya basit tercihlerini öğrenmek istediğinizde idealdir. Google AdSense gibi reklam platformlarından gelir elde eden yayıncılar için de kullanıcı etkileşimi çok önemlidir. Yüksek etkileşimli içerik, kullanıcıların sitenizde daha uzun süre kalmasına ve reklamları görme olasılıklarının artmasına yardımcı olur.

Kullanıcı Geri Bildiriminin Önemi

Kullanıcı geri bildirimi, sitenizin güçlü ve zayıf yönlerini anlamanın en doğrudan yoludur. Bir blog yazısı sonrası okuyucuların konuyu ne kadar anladığını veya hangi ek bilgileri istediğini soran basit bir anket, gelecekteki içerik stratejinizi şekillendirmede altın değerinde bilgiler sunabilir. Bu, aynı zamanda sitenizin otoritesini artırır ve kullanıcıların kendilerini değerli hissetmelerini sağlar.

JavaScript'in Rolü ve Avantajları

JavaScript, bir web sayfasını interaktif hale getiren programlama dilidir. Anketler söz konusu olduğunda, JavaScript; soruları dinamik olarak gösterme, kullanıcı yanıtlarını toplama, temel doğrulamalar yapma ve sonuçları anında kullanıcıya sunma gibi görevleri üstlenir. Web geliştirme dünyasında JS'in bu esnekliği, anketlerinizi sadece statik bir form olmaktan çıkarıp, canlı ve dinamik bir deneyime dönüştürmesini sağlar. En büyük avantajı, sunucuya her soru için git-gel yapmaya gerek kalmadan tüm işlemlerin istemci tarafında (kullanıcının tarayıcısında) gerçekleşebilmesidir.

Anket Oluşturmaya Başlamadan Önce Temel Bilgiler

Basit bir anket oluşturmak için derinlemesine programlama bilgisine sahip olmanıza gerek yok. Ancak bazı temel web teknolojileri hakkında fikir sahibi olmak işinizi oldukça kolaylaştıracaktır.

Gerekli Araçlar ve Ön Bilgiler

Başlamak için ihtiyacınız olanlar:
1. Bir Metin Editörü: VS Code, Sublime Text gibi bir metin editörü.
2. Bir Web Tarayıcısı: Chrome, Firefox gibi herhangi bir tarayıcı.
3. Temel HTML Bilgisi: Web sayfasının yapısını oluşturmak için.
4. Temel CSS Bilgisi (İsteğe Bağlı ama Şart): Anketin görsel olarak hoş görünmesini sağlamak için.
5. Temel JavaScript Bilgisi: Sayfayı interaktif hale getirmek için.
HTML ve CSS temelleri hakkında daha fazla bilgi edinmek isterseniz, '/makale.php?sayfa=html-css-temelleri' adresindeki makalemize göz atabilirsiniz.

HTML Yapısının Temelleri

Bir anket, temelde bir HTML formları yapısı üzerine kurulur. Bu form, soruları, seçenekleri ve bir "gönder" düğmesini barındırır. Her soru için ayrı bir bölüm, kullanıcının yanıtını gireceği veya seçeceği giriş alanları (``, `

`) ve bu alanları açıklayan etiketler (`<label>`) kullanırız.<br><h2>Adım 1: HTML ile Anket Yapısını Oluşturma</h2><br>İlk adım, anketinizin temel iskeletini HTML ile kurmaktır. Bu iskelet, anket sorularınızı ve yanıt seçeneklerinizi içerecektir.<br><h3>Başlangıç HTML Çatısı</h3><br>Bir `<div>` elementi içine anketinizi yerleştirmek iyi bir pratik olabilir. Bu, anketinizi diğer sayfa içeriklerinden ayırmanıza ve daha kolay stilize etmenize yardımcı olur. Her bir soru için ayrı bir `<div>` veya `<section>` kullanmak, yapıyı daha düzenli hale getirir.<br>```html<br><div id="anketKapsayici"><br><h2>Sitemiz Hakkında Kısa Bir Anket</h2><br><br><button id="anketGonder">Anketi Gönder</button><br></div><br><div id="anketSonuclari" style="display:none;"><br><h3>Anket Sonuçlarınız:</h3><br><br></div><br>```<br>Bu yapı, anketin kendisini ve sonuçların gösterileceği bir alanı belirtir. Sonuç alanı başlangıçta gizlenmiş (display:none) olacaktır.<br><h3>Soru Tipleri ve HTML Karşılıkları</h3><br>Basit bir anket için genellikle şu soru tiplerini kullanırız:<br>*   <strong>Tek Seçenekli Sorular (Radio Buttons):</strong> Kullanıcının birden fazla seçenek arasından yalnızca birini seçmesine izin verir. Her seçenek için aynı `name` niteliğine sahip `<input type="radio">` elemanları kullanılır.<br>*   <strong>Çok Seçenekli Sorular (Checkboxes):</strong> Kullanıcının birden fazla seçenek arasından istediklerini seçmesine izin verir. Her seçenek için farklı `name` niteliğine sahip `<input type="checkbox">` elemanları kullanılır.<br>*   <strong>Kısa Cevaplı Sorular (Text Input):</strong> Kullanıcının kısa metin yanıtları girmesini sağlar. `<input type="text">` elemanı kullanılır.<br>*   <strong>Uzun Cevaplı Sorular (Textarea):</strong> Kullanıcının daha uzun metin yanıtları girmesini sağlar. `<textarea>` elemanı kullanılır.<br>Her giriş elemanı için anlamlı `id` değerleri ve açıklayıcı `<label>` etiketleri kullanmak, hem erişilebilirlik hem de JavaScript ile bu elemanlara erişim kolaylığı açısından kritik öneme sahiptir.<br><h2>Adım 2: CSS ile Anketinizi Şekillendirme (Opsiyonel Ama Şart)</h2><br>HTML, anketin yapısını oluştururken, CSS anketin görsel görünümünü belirler. Anketinizin sadece işlevsel olması yeterli değildir; aynı zamanda görsel olarak da çekici olması, <strong>kullanıcı deneyimi</strong>ni büyük ölçüde etkiler. Basit renkler, uygun font boyutları, boşluklar ve hizalamalar kullanarak anketinizi daha okunaklı ve kullanılabilir hale getirebilirsiniz. CSS kullanarak, her bir soruyu, yanıt seçeneklerini ve gönder düğmesini daha belirgin ve hoş görünümlü yapabilirsiniz. Bu adım, kullanıcıların anketi tamamlamaya teşvik edilmesinde önemli bir rol oynar.<br><h3>Estetiğin Önemi</h3><br>İyi tasarlanmış bir anket, kullanıcıların daha isteyerek yanıt vermesini sağlar. Karmaşık veya kötü tasarlanmış bir form, kullanıcıların anketi yarıda bırakmasına neden olabilir. Temiz bir düzen, uyumlu renkler ve yeterli boşluk, göz yorgunluğunu azaltır ve katılım oranlarını artırır.<br><h3>Temel CSS İpuçları</h3><br>*   `margin` ve `padding` kullanarak elemanlar arasında boşluk bırakın.<br>*   `border` ve `box-shadow` ile düğmeleri ve giriş alanlarını belirginleştirin.<br>*   `font-family`, `font-size` ve `color` ile metinleri okunaklı hale getirin.<br>*   Duyarlı tasarım için `max-width` ve `flexbox` gibi özelliklerden faydalanın, böylece anketiniz mobil cihazlarda da iyi görünür.<br><h2>Adım 3: JavaScript ile Anket Mantığını Ekleme</h2><br>Şimdi işin en heyecanlı kısmına geldik: JavaScript kullanarak anketimize etkileşim katmak. Bu bölümde, kod yazmadan, JavaScript'in anketinizde hangi görevleri üstleneceğini adım adım açıklayacağız.<br><h3>Anket Verilerini Toplama</h3><br>JavaScript'in temel görevlerinden biri, kullanıcının seçtiği veya girdiği yanıtları toplamaktır. Bu genellikle şu adımlarla gerçekleşir:<br>1.  <strong>Elementleri Seçme:</strong> JavaScript, `document.getElementById()`, `document.querySelector()` gibi yöntemler kullanarak HTML sayfasındaki belirli elementlere (örneğin, anket gönder düğmesi, tüm radyo düğmeleri, metin giriş alanları) erişir.<br>2.  <strong>Olay Dinleyicileri Ekleme:</strong> "Anketi Gönder" düğmesine tıklandığında ne olacağını belirlemek için bir "olay dinleyicisi" (event listener) eklenir. Bu, düğmeye tıklandığında belirli bir fonksiyonun çalışmasını sağlar.<br>3.  <strong>Değerleri Alma:</strong> Fonksiyon çalıştığında, JavaScript her bir soruya karşılık gelen giriş elemanlarının değerlerini alır. Örneğin, seçilen radyo düğmesinin değeri, girilen metnin içeriği gibi. Bu süreçte, tüm ilgili elemanları döngüye alarak veya tek tek erişerek <strong>veri toplama</strong> işlemini gerçekleştiririz.<br><h3>Sonuçları Gösterme ve İşleme</h3><br>Kullanıcı yanıtları toplandıktan sonra, bu verileri işlemek ve kullanıcıya bir geri bildirim sunmak isteyebilirsiniz:<br>1.  <strong>Basit Doğrulama:</strong> Yanıtların toplanmasından önce, kullanıcının tüm gerekli soruları yanıtlayıp yanıtlamadığını kontrol edebilirsiniz. Eksik yanıt varsa, kullanıcıya bir uyarı gösterebilirsiniz.<br>2.  <strong>Sonuçları Görüntüleme:</strong> Toplanan yanıtları, anketin sonunda hazırladığınız `anketSonuclari` div'ine HTML içeriği olarak ekleyerek kullanıcıya gösterebilirsiniz. Örneğin, "En sevdiğiniz renk: Mavi" şeklinde bir özet sunabilirsiniz. Bu süreç, <strong>DOM manipülasyonu</strong> olarak bilinir; yani JavaScript ile HTML içeriğini dinamik olarak değiştirmek.<br>3.  <strong>Anketi Gizleme:</strong> Sonuçlar gösterildikten sonra, orijinal anket formunu gizleyerek kullanıcıya sadece sonuçları göstermek, daha temiz bir deneyim sağlar.<br><h3>Kullanıcı Deneyimini Zenginleştirme</h3><br>JavaScript ile anketinize daha birçok özellik ekleyebilirsiniz:<br>*   <strong>Form Sıfırlama:</strong> Kullanıcının anketi yeniden doldurmak istemesi durumunda, tüm seçenekleri varsayılan değerlerine döndüren bir düğme ekleyebilirsiniz.<br>*   <strong>Dinamik İçerik:</strong> Belirli bir yanıta bağlı olarak ek soruları dinamik olarak gösterebilir veya gizleyebilirsiniz. Bu, anketinizin daha kişiselleştirilmiş ve akıllı olmasını sağlar.<br><h2>Anketinizi Daha İleri Taşımak</h2><br>Yukarıdaki adımlarla oluşturduğunuz anket, istemci tarafında çalışır ve sonuçları sadece kullanıcıya gösterir. Gerçek dünya uygulamalarında, bu verileri bir yerde saklamak istersiniz.<br><h3>Veritabanı Entegrasyonu (Gelecek İçin)</h3><br>Eğer anket yanıtlarını kalıcı olarak saklamak ve daha sonra analiz etmek isterseniz, bu verileri bir sunucuya göndermeniz ve bir veritabanında saklamanız gerekir. Bu genellikle PHP, Python, Node.js gibi sunucu tarafı bir dil ve MySQL, PostgreSQL gibi bir veritabanı gerektirir. Ancak bu, başlangıç seviyesinin ötesindedir ve bu makalenin kapsamı dışındadır.<br><h3>Gelişmiş Özellikler ve Kütüphaneler</h3><br>Daha karmaşık anketler için (çok adımlı anketler, ilerleme çubukları, görsel zenginleştirmeler), React, Vue.js gibi JavaScript kütüphaneleri veya jQuery gibi yardımcı kütüphaneler kullanılabilir. Bu araçlar, geliştirme sürecini hızlandırır ve daha sofistike kullanıcı arayüzleri oluşturmanıza olanak tanır.<br><h2>Performans ve Kullanıcı Deneyimi İçin İpuçları</h2><br>Bir SEO editörü olarak, anketinizin sadece işlevsel değil, aynı zamanda arama motorları ve kullanıcılar için optimize edilmiş olması gerektiğini vurgulamak isterim.<br><h3>Hızlı Yükleme ve Duyarlılık</h3><br>Anketinizin bulunduğu sayfanın hızlı yüklenmesi çok önemlidir. Büyük JavaScript dosyaları veya gereksiz CSS, sayfa yükleme süresini yavaşlatabilir. <strong>Basit anket oluşturma</strong> hedefiyle ilerlerken, kodunuzu minimal ve optimize tutmaya çalışın. Ayrıca, anketinizin tüm cihazlarda (masaüstü, tablet, mobil) düzgün görünmesi ve çalışması için duyarlı tasarıma özen gösterin. Mobil uyumluluk, hem kullanıcı deneyimi hem de SEO açısından kritik bir faktördür. Eğer web sitenizin performansını artırmak istiyorsanız, '/makale.php?sayfa=web-site-performans-ipuçları' adlı yazımızda daha detaylı bilgilere ulaşabilirsiniz.<br><h3>Erişilebilirlik (Accessibility)</h3><br>Anketinizin tüm kullanıcılar için erişilebilir olduğundan emin olun. Bu, görme engelli kullanıcıların ekran okuyucularıyla formu doldurabilmesi veya klavye ile navigasyon yapabilmesi anlamına gelir. `label` etiketlerini doğru kullanmak, uygun `aria` nitelikleri eklemek ve yeterli kontrast oranına sahip renkler seçmek bu konuda yardımcı olacaktır.<br><h2>Sonuç: JavaScript ile Anket Oluşturmanın Gücü</h2><br>Gördüğünüz gibi, <strong>JavaScript anket</strong> oluşturmak karmaşık bir süreç olmak zorunda değil. HTML ile yapıyı kurup, CSS ile estetik bir dokunuş ekledikten sonra, JavaScript ile anketinize hayat verebilirsiniz. Bu, kullanıcılarınızla etkileşim kurmak, değerli geri bildirimler toplamak ve web sitenizin değerini artırmak için harika bir başlangıç noktasıdır. Unutmayın, basit başlamak ve adım adım ilerlemek, yeni beceriler kazanmanın ve başarılı projeler ortaya çıkarmanın anahtarıdır. Bu bilgi birikimiyle kendi web projelerinizi daha interaktif hale getirme yolunda önemli bir adım atmış olacaksınız!</p><style>
.author-box {
 margin-top: 25px; background:#f5f5f5; border-radius:12px; padding:20px;
 display:flex; gap:20px; align-items:flex-start; box-shadow:0 5px 15px rgba(0,0,0,0.05);
}
.author-box img{width:80px;height:80px;border-radius:50%;object-fit:cover;border:3px solid #007bff;}
.author-info h4{margin:0 0 10px 0;}
.author-info p{margin:0;font-size:0.95rem;line-height:1.6;color:#444;}
</style>
<div class="author-box">
 <img src="https://picsum.photos/150/150?random=848" alt="Serkan Çelik">
 <div class="author-info">
   <h4>Yazar: Serkan Çelik</h4>
   <p>Ben Serkan Çelik, bir Dijital Pazarlama Uzmanı. Platformumuzda teknolojiyi herkes için anlaşılır kılmak, karmaşık konuları basitleştirerek okuyucularımızın günlük yaşamında pratik olarak kullanabileceği bilgiler sunmak, yeni beceriler kazandırmak, farkındalık oluşturmak ve teknoloji dünyasındaki gelişmeleri anlaşılır bir dille aktarmak amacıyla yazıyorum.</p>
 </div>
</div>    </div>
    <div class="makale-sidebar">
        <h3>Diğer Makaleler</h3>
        <a class='sidebar-item' href='makale.php?sayfa=adim-adim-basit-javascript-anket-projesi-birden-fazla-soruyu-tek-bir-a'><img src='https://picsum.photos/seed/adim-adim-basit-javascript-anket-projesi-birden-fazla-soruyu-tek-bir-a/80/50' alt='Adim Adim Basit Javascript Anket Projesi Birden Fazla Soruyu Tek Bir A'><span>Adim Adim Basit Javascript Anket Projesi Birden Fazla Soruyu Tek Bir A</span></a><a class='sidebar-item' href='makale.php?sayfa=javascript-ile-olusturdugum-basit-anketi-mobil-cihazlarda-nasil-respon'><img src='https://picsum.photos/seed/javascript-ile-olusturdugum-basit-anketi-mobil-cihazlarda-nasil-respon/80/50' alt='Javascript Ile Olusturdugum Basit Anketi Mobil Cihazlarda Nasil Respon'><span>Javascript Ile Olusturdugum Basit Anketi Mobil Cihazlarda Nasil Respon</span></a><a class='sidebar-item' href='makale.php?sayfa=sunucuya-gerek-duymadan-basit-javascript-anket-sonuclarini-aninda-ekra'><img src='https://picsum.photos/seed/sunucuya-gerek-duymadan-basit-javascript-anket-sonuclarini-aninda-ekra/80/50' alt='Sunucuya Gerek Duymadan Basit Javascript Anket Sonuclarini Aninda Ekra'><span>Sunucuya Gerek Duymadan Basit Javascript Anket Sonuclarini Aninda Ekra</span></a><a class='sidebar-item' href='makale.php?sayfa=basit-javascript-anketini-tamamladiktan-sonra-kullaniciya-ozel-tesekku'><img src='https://picsum.photos/seed/basit-javascript-anketini-tamamladiktan-sonra-kullaniciya-ozel-tesekku/80/50' alt='Basit Javascript Anketini Tamamladiktan Sonra Kullaniciya Ozel Tesekku'><span>Basit Javascript Anketini Tamamladiktan Sonra Kullaniciya Ozel Tesekku</span></a><a class='sidebar-item' href='makale.php?sayfa=mevcut-html-sayfasina-basit-javascript-anketini-kopyala-yapistir-ile-n'><img src='https://picsum.photos/seed/mevcut-html-sayfasina-basit-javascript-anketini-kopyala-yapistir-ile-n/80/50' alt='Mevcut Html Sayfasina Basit Javascript Anketini Kopyala Yapistir Ile N'><span>Mevcut Html Sayfasina Basit Javascript Anketini Kopyala Yapistir Ile N</span></a><a class='sidebar-item' href='makale.php?sayfa=javascript-kullanarak-coktan-secmeli-ve-tek-secimli-basit-anket-sorula'><img src='https://picsum.photos/seed/javascript-kullanarak-coktan-secmeli-ve-tek-secimli-basit-anket-sorula/80/50' alt='Javascript Kullanarak Coktan Secmeli Ve Tek Secimli Basit Anket Sorula'><span>Javascript Kullanarak Coktan Secmeli Ve Tek Secimli Basit Anket Sorula</span></a><a class='sidebar-item' href='makale.php?sayfa=kullanici-bos-birakirsa-basit-javascript-anketini-gondermesini-engelle'><img src='https://picsum.photos/seed/kullanici-bos-birakirsa-basit-javascript-anketini-gondermesini-engelle/80/50' alt='Kullanici Bos Birakirsa Basit Javascript Anketini Gondermesini Engelle'><span>Kullanici Bos Birakirsa Basit Javascript Anketini Gondermesini Engelle</span></a><a class='sidebar-item' href='makale.php?sayfa=basit-bir-javascript-anketinden-kullanici-cevaplarini-sayfa-yenilemede'><img src='https://picsum.photos/seed/basit-bir-javascript-anketinden-kullanici-cevaplarini-sayfa-yenilemede/80/50' alt='Basit Bir Javascript Anketinden Kullanici Cevaplarini Sayfa Yenilemede'><span>Basit Bir Javascript Anketinden Kullanici Cevaplarini Sayfa Yenilemede</span></a><a class='sidebar-item' href='makale.php?sayfa=web-sitenize-hizlica-entegre-edebileceginiz-basit-javascript-anket-kod'><img src='https://picsum.photos/seed/web-sitenize-hizlica-entegre-edebileceginiz-basit-javascript-anket-kod/80/50' alt='Web Sitenize Hizlica Entegre Edebileceginiz Basit Javascript Anket Kod'><span>Web Sitenize Hizlica Entegre Edebileceginiz Basit Javascript Anket Kod</span></a><a class='sidebar-item' href='makale.php?sayfa=sifirdan-baslayanlar-icin-vanilla-javascript-ile-basit-anket-formu-nas'><img src='https://picsum.photos/seed/sifirdan-baslayanlar-icin-vanilla-javascript-ile-basit-anket-formu-nas/80/50' alt='Sifirdan Baslayanlar Icin Vanilla Javascript Ile Basit Anket Formu Nas'><span>Sifirdan Baslayanlar Icin Vanilla Javascript Ile Basit Anket Formu Nas</span></a><a class='sidebar-item' href='makale.php?sayfa=kullanici-dostu-ve-hizli-yuklenen-bir-js-anketi-icin-performans-optimi'><img src='https://picsum.photos/seed/kullanici-dostu-ve-hizli-yuklenen-bir-js-anketi-icin-performans-optimi/80/50' alt='Kullanici Dostu Ve Hizli Yuklenen Bir Js Anketi Icin Performans Optimi'><span>Kullanici Dostu Ve Hizli Yuklenen Bir Js Anketi Icin Performans Optimi</span></a><a class='sidebar-item' href='makale.php?sayfa=anket-sonuclarini-sayfayi-yenilemeden-aninda-gostermek-icin-javascript'><img src='https://picsum.photos/seed/anket-sonuclarini-sayfayi-yenilemeden-aninda-gostermek-icin-javascript/80/50' alt='Anket Sonuclarini Sayfayi Yenilemeden Aninda Gostermek Icin Javascript'><span>Anket Sonuclarini Sayfayi Yenilemeden Aninda Gostermek Icin Javascript</span></a><a class='sidebar-item' href='makale.php?sayfa=tek-sayfalik-bir-web-uygulamasina-javascript-ile-basit-bir-anket-biles'><img src='https://picsum.photos/seed/tek-sayfalik-bir-web-uygulamasina-javascript-ile-basit-bir-anket-biles/80/50' alt='Tek Sayfalik Bir Web Uygulamasina Javascript Ile Basit Bir Anket Biles'><span>Tek Sayfalik Bir Web Uygulamasina Javascript Ile Basit Bir Anket Biles</span></a><a class='sidebar-item' href='makale.php?sayfa=mobil-uyumlu-ve-hafif-javascript-anketi-icin-minimal-kod-gereksinimler'><img src='https://picsum.photos/seed/mobil-uyumlu-ve-hafif-javascript-anketi-icin-minimal-kod-gereksinimler/80/50' alt='Mobil Uyumlu Ve Hafif Javascript Anketi Icin Minimal Kod Gereksinimler'><span>Mobil Uyumlu Ve Hafif Javascript Anketi Icin Minimal Kod Gereksinimler</span></a><a class='sidebar-item' href='makale.php?sayfa=sifirdan-baslayarak-javascript-ile-css-stilli-basit-anket-formu-yapimi'><img src='https://picsum.photos/seed/sifirdan-baslayarak-javascript-ile-css-stilli-basit-anket-formu-yapimi/80/50' alt='Sifirdan Baslayarak Javascript Ile Css Stilli Basit Anket Formu Yapimi'><span>Sifirdan Baslayarak Javascript Ile Css Stilli Basit Anket Formu Yapimi</span></a><a class='sidebar-item' href='makale.php?sayfa=ziyaretcilerden-aninda-veri-toplamak-icin-dinamik-anket-elemanlarini-j'><img src='https://picsum.photos/seed/ziyaretcilerden-aninda-veri-toplamak-icin-dinamik-anket-elemanlarini-j/80/50' alt='Ziyaretcilerden Aninda Veri Toplamak Icin Dinamik Anket Elemanlarini J'><span>Ziyaretcilerden Aninda Veri Toplamak Icin Dinamik Anket Elemanlarini J</span></a><a class='sidebar-item' href='makale.php?sayfa=ucuncu-parti-araca-gerek-duymadan-javascript-ile-sadece-evethayir-tipi'><img src='https://picsum.photos/seed/ucuncu-parti-araca-gerek-duymadan-javascript-ile-sadece-evethayir-tipi/80/50' alt='Ucuncu Parti Araca Gerek Duymadan Javascript Ile Sadece Evethayir Tipi'><span>Ucuncu Parti Araca Gerek Duymadan Javascript Ile Sadece Evethayir Tipi</span></a><a class='sidebar-item' href='makale.php?sayfa=html-ve-saf-javascript-ile-coktan-secmeli-basit-anket-kodu-yazimi-icin'><img src='https://picsum.photos/seed/html-ve-saf-javascript-ile-coktan-secmeli-basit-anket-kodu-yazimi-icin/80/50' alt='Html Ve Saf Javascript Ile Coktan Secmeli Basit Anket Kodu Yazimi Icin'><span>Html Ve Saf Javascript Ile Coktan Secmeli Basit Anket Kodu Yazimi Icin</span></a><a class='sidebar-item' href='makale.php?sayfa=backend-olmadan-sadece-javascript-kullanarak-hizli-bir-geri-bildirim-f'><img src='https://picsum.photos/seed/backend-olmadan-sadece-javascript-kullanarak-hizli-bir-geri-bildirim-f/80/50' alt='Backend Olmadan Sadece Javascript Kullanarak Hizli Bir Geri Bildirim F'><span>Backend Olmadan Sadece Javascript Kullanarak Hizli Bir Geri Bildirim F</span></a><a class='sidebar-item' href='makale.php?sayfa=kendi-web-sitenize-javascript-ile-basit-anket-eklemenin-en-hizli-yolu-'><img src='https://picsum.photos/seed/kendi-web-sitenize-javascript-ile-basit-anket-eklemenin-en-hizli-yolu-/80/50' alt='Kendi Web Sitenize Javascript Ile Basit Anket Eklemenin En Hizli Yolu '><span>Kendi Web Sitenize Javascript Ile Basit Anket Eklemenin En Hizli Yolu </span></a><a class='sidebar-item' href='makale.php?sayfa=basit-javascript-anketinizin-gorsel-tasarimini-css-ile-kisisellestirme'><img src='https://picsum.photos/seed/basit-javascript-anketinizin-gorsel-tasarimini-css-ile-kisisellestirme/80/50' alt='Basit Javascript Anketinizin Gorsel Tasarimini Css Ile Kisisellestirme'><span>Basit Javascript Anketinizin Gorsel Tasarimini Css Ile Kisisellestirme</span></a><a class='sidebar-item' href='makale.php?sayfa=javascript-anket-gonderimi-sonrasi-basari-mesaji-veya-yonlendirme-nasi'><img src='https://picsum.photos/seed/javascript-anket-gonderimi-sonrasi-basari-mesaji-veya-yonlendirme-nasi/80/50' alt='Javascript Anket Gonderimi Sonrasi Basari Mesaji Veya Yonlendirme Nasi'><span>Javascript Anket Gonderimi Sonrasi Basari Mesaji Veya Yonlendirme Nasi</span></a><a class='sidebar-item' href='makale.php?sayfa=mevcut-web-sitenize-kolayca-entegre-edilebilen-minimalist-javascript-a'><img src='https://picsum.photos/seed/mevcut-web-sitenize-kolayca-entegre-edilebilen-minimalist-javascript-a/80/50' alt='Mevcut Web Sitenize Kolayca Entegre Edilebilen Minimalist Javascript A'><span>Mevcut Web Sitenize Kolayca Entegre Edilebilen Minimalist Javascript A</span></a><a class='sidebar-item' href='makale.php?sayfa=mobil-uyumlu-ve-duyarli-bir-javascript-anket-bileseni-nasil-kodlanir'><img src='https://picsum.photos/seed/mobil-uyumlu-ve-duyarli-bir-javascript-anket-bileseni-nasil-kodlanir/80/50' alt='Mobil Uyumlu Ve Duyarli Bir Javascript Anket Bileseni Nasil Kodlanir'><span>Mobil Uyumlu Ve Duyarli Bir Javascript Anket Bileseni Nasil Kodlanir</span></a><a class='sidebar-item' href='makale.php?sayfa=kullanicilarin-tum-alanlari-doldurmasini-saglayan-javascript-anket-dog'><img src='https://picsum.photos/seed/kullanicilarin-tum-alanlari-doldurmasini-saglayan-javascript-anket-dog/80/50' alt='Kullanicilarin Tum Alanlari Doldurmasini Saglayan Javascript Anket Dog'><span>Kullanicilarin Tum Alanlari Doldurmasini Saglayan Javascript Anket Dog</span></a><a class='sidebar-item' href='makale.php?sayfa=harici-kutuphane-bagimliligi-olmadan-saf-javascript-ile-hafif-anket-ta'><img src='https://picsum.photos/seed/harici-kutuphane-bagimliligi-olmadan-saf-javascript-ile-hafif-anket-ta/80/50' alt='Harici Kutuphane Bagimliligi Olmadan Saf Javascript Ile Hafif Anket Ta'><span>Harici Kutuphane Bagimliligi Olmadan Saf Javascript Ile Hafif Anket Ta</span></a><a class='sidebar-item' href='makale.php?sayfa=basit-bir-javascript-anketi-icin-katilimcilara-aninda-sonuc-grafigi-go'><img src='https://picsum.photos/seed/basit-bir-javascript-anketi-icin-katilimcilara-aninda-sonuc-grafigi-go/80/50' alt='Basit Bir Javascript Anketi Icin Katilimcilara Aninda Sonuc Grafigi Go'><span>Basit Bir Javascript Anketi Icin Katilimcilara Aninda Sonuc Grafigi Go</span></a><a class='sidebar-item' href='makale.php?sayfa=sunucuya-gerek-duymadan-tarayicida-javascript-ile-anket-sonuclarini-ge'><img src='https://picsum.photos/seed/sunucuya-gerek-duymadan-tarayicida-javascript-ile-anket-sonuclarini-ge/80/50' alt='Sunucuya Gerek Duymadan Tarayicida Javascript Ile Anket Sonuclarini Ge'><span>Sunucuya Gerek Duymadan Tarayicida Javascript Ile Anket Sonuclarini Ge</span></a><a class='sidebar-item' href='makale.php?sayfa=coktan-secmeli-ve-acik-uclu-sorular-icin-dinamik-javascript-anket-form'><img src='https://picsum.photos/seed/coktan-secmeli-ve-acik-uclu-sorular-icin-dinamik-javascript-anket-form/80/50' alt='Coktan Secmeli Ve Acik Uclu Sorular Icin Dinamik Javascript Anket Form'><span>Coktan Secmeli Ve Acik Uclu Sorular Icin Dinamik Javascript Anket Form</span></a><a class='sidebar-item' href='makale.php?sayfa=html-ve-saf-javascript-kullanarak-adim-adim-etkilesimli-anket-olusturm'><img src='https://picsum.photos/seed/html-ve-saf-javascript-kullanarak-adim-adim-etkilesimli-anket-olusturm/80/50' alt='Html Ve Saf Javascript Kullanarak Adim Adim Etkilesimli Anket Olusturm'><span>Html Ve Saf Javascript Kullanarak Adim Adim Etkilesimli Anket Olusturm</span></a><a class='sidebar-item' href='makale.php?sayfa=tek-sayfali-tek-adimli-javascript-anket-uygulamasi-gelistirme-ipuclari'><img src='https://picsum.photos/seed/tek-sayfali-tek-adimli-javascript-anket-uygulamasi-gelistirme-ipuclari/80/50' alt='Tek Sayfali Tek Adimli Javascript Anket Uygulamasi Gelistirme Ipuclari'><span>Tek Sayfali Tek Adimli Javascript Anket Uygulamasi Gelistirme Ipuclari</span></a><a class='sidebar-item' href='makale.php?sayfa=hicbir-backend-bilgisi-olmadan-javascript-ile-ilk-anketimi-nasil-yapar'><img src='https://picsum.photos/seed/hicbir-backend-bilgisi-olmadan-javascript-ile-ilk-anketimi-nasil-yapar/80/50' alt='Hicbir Backend Bilgisi Olmadan Javascript Ile Ilk Anketimi Nasil Yapar'><span>Hicbir Backend Bilgisi Olmadan Javascript Ile Ilk Anketimi Nasil Yapar</span></a><a class='sidebar-item' href='makale.php?sayfa=basit-javascript-ile-kosullu-dinamik-anket-sorulari-nasil-olusturulur'><img src='https://picsum.photos/seed/basit-javascript-ile-kosullu-dinamik-anket-sorulari-nasil-olusturulur/80/50' alt='Basit Javascript Ile Kosullu Dinamik Anket Sorulari Nasil Olusturulur'><span>Basit Javascript Ile Kosullu Dinamik Anket Sorulari Nasil Olusturulur</span></a><a class='sidebar-item' href='makale.php?sayfa=javascript-anket-verilerini-tarayicida-local-storage-kalici-hale-getir'><img src='https://picsum.photos/seed/javascript-anket-verilerini-tarayicida-local-storage-kalici-hale-getir/80/50' alt='Javascript Anket Verilerini Tarayicida Local Storage Kalici Hale Getir'><span>Javascript Anket Verilerini Tarayicida Local Storage Kalici Hale Getir</span></a><a class='sidebar-item' href='makale.php?sayfa=kullanici-dostu-ve-sik-gorunumlu-javascript-anket-tasarim-ipuclari-nel'><img src='https://picsum.photos/seed/kullanici-dostu-ve-sik-gorunumlu-javascript-anket-tasarim-ipuclari-nel/80/50' alt='Kullanici Dostu Ve Sik Gorunumlu Javascript Anket Tasarim Ipuclari Nel'><span>Kullanici Dostu Ve Sik Gorunumlu Javascript Anket Tasarim Ipuclari Nel</span></a><a class='sidebar-item' href='makale.php?sayfa=javascript-anket-cevaplarini-direkt-google-e-tablolara-gonderme-yolu-v'><img src='https://picsum.photos/seed/javascript-anket-cevaplarini-direkt-google-e-tablolara-gonderme-yolu-v/80/50' alt='Javascript Anket Cevaplarini Direkt Google E Tablolara Gonderme Yolu V'><span>Javascript Anket Cevaplarini Direkt Google E Tablolara Gonderme Yolu V</span></a><a class='sidebar-item' href='makale.php?sayfa=kendi-coktan-secmeli-javascript-anketimi-sifirdan-nasil-kodlarim'><img src='https://picsum.photos/seed/kendi-coktan-secmeli-javascript-anketimi-sifirdan-nasil-kodlarim/80/50' alt='Kendi Coktan Secmeli Javascript Anketimi Sifirdan Nasil Kodlarim'><span>Kendi Coktan Secmeli Javascript Anketimi Sifirdan Nasil Kodlarim</span></a><a class='sidebar-item' href='makale.php?sayfa=html-sayfama-hizli-ve-ucretsiz-javascript-anket-formu-eklemek-istiyoru'><img src='https://picsum.photos/seed/html-sayfama-hizli-ve-ucretsiz-javascript-anket-formu-eklemek-istiyoru/80/50' alt='Html Sayfama Hizli Ve Ucretsiz Javascript Anket Formu Eklemek Istiyoru'><span>Html Sayfama Hizli Ve Ucretsiz Javascript Anket Formu Eklemek Istiyoru</span></a><a class='sidebar-item' href='makale.php?sayfa=javascript-anket-sonuclarini-sunucusuz-nasil-toplar-ve-saklarim'><img src='https://picsum.photos/seed/javascript-anket-sonuclarini-sunucusuz-nasil-toplar-ve-saklarim/80/50' alt='Javascript Anket Sonuclarini Sunucusuz Nasil Toplar Ve Saklarim'><span>Javascript Anket Sonuclarini Sunucusuz Nasil Toplar Ve Saklarim</span></a><a class='sidebar-item' href='makale.php?sayfa=veritabani-gerektirmeyen-javascript-anket-olusturucu-kodu-ariyorum'><img src='https://picsum.photos/seed/veritabani-gerektirmeyen-javascript-anket-olusturucu-kodu-ariyorum/80/50' alt='Veritabani Gerektirmeyen Javascript Anket Olusturucu Kodu Ariyorum'><span>Veritabani Gerektirmeyen Javascript Anket Olusturucu Kodu Ariyorum</span></a>    </div>
</div>
<footer class="site-footer">
    <div class="container mx-auto px-4 py-6">
        <p>© 2025 Basit Anket Oluşturucu JS İle. Tüm hakları saklıdır.</p>
        <p>
			<a href="https://riyy.online/">🏠 Anasayfa</a> |
            <a href="https://riyy.online/pages/gizlilik-politikasi.php">🔒 Gizlilik Politikası</a> |
            <a href="https://riyy.online/blog.php">📜 Blog</a> |
            <a href="https://riyy.online/pages/hakkimizda.php">ℹ️ Hakkımızda</a> |
            <a href="https://riyy.online/pages/iletisim.php">📞 İletişim</a>
			<a href="https://riyy.online/pages/kullanim-sartlari.php">🚩 Kullanım Şartları</a> </p>
    </div>

.site-footer a {
            color: #111827; /* linkler koyu */
            text-decoration: none;
            margin: 0 0.5rem;
            transition: color 0.3s;
        }

.site-footer a:hover {
            color: var(--secondary-color, #f97316); /* hover turuncu veya tanımlı secondary-color */
        }
    </style>

<div id="cookie-popup">
  Bu site çerezleri kullanıcı deneyimini geliştirmek için kullanır. 
  <a href="/pages/gizlilik-politikasi.php" target="_blank">Daha fazla bilgi</a>.
  <button id="accept-cookies">Kabul Ediyorum</button>
</div>

/* Gösterim */
#cookie-popup.show {
  opacity: 1;
  transform: translateY(0);
}

/* Linkler */
#cookie-popup a {
  color: #4cc9f0;
  text-decoration: underline;
}

/* Buton */
#cookie-popup button {
  float: right;
  background: #4cc9f0;
  border: none;
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.3s, transform 0.3s;
  animation: pulse 2s infinite;
}

/* Hover efekti */
#cookie-popup button:hover {
  background: #3ab0d9;
}

/* Pulse animasyonu */
@keyframes pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(76,201,240,0.5); }
  50% { transform: scale(1.05); box-shadow: 0 0 10px 5px rgba(76,201,240,0.3); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(76,201,240,0); }
}

/* Mobil uyumlu */
@media (max-width: 500px) {
  #cookie-popup {
    right: 5%;
    left: 5%;
    bottom: 15px;
    width: auto;
    font-size: 13px;
    padding: 12px 15px;
  }
  #cookie-popup button {
    padding: 5px 10px;
  }
}
</style>

</footer>