Yeni Baslayanlar Icin Javascript Ile Ilk Basit Anketinizi Nasil Yapars

Yeni Başlayanlar İçin JavaScript ile İlk Basit Anketinizi Nasıl Yaparsınız?

İnternet dünyasında kullanıcılarla etkileşim kurmanın, onların fikirlerini almanın ve ürün/hizmet geliştirmenin en etkili yollarından biri anketlerdir. İster yeni bir blog yazarı olun, ister küçük bir işletme sahibi, isterse sadece web geliştirme dünyasına adım atan bir meraklı; kendi basit anketinizi oluşturmak, hem teknik becerilerinizi geliştirecek hem de değerli geri bildirimler toplamanıza olanak sağlayacaktır. Bu rehberde, JavaScript kullanarak sıfırdan ilk basit anketinizi nasıl yapacağınızı adım adım, kod kalabalığına girmeden ve anlaşılır bir dille ele alacağız. Amacımız, HTML ve CSS ile desteklenen JavaScript'in gücünü kullanarak interaktif bir anket oluşturmanın temel prensiplerini öğretmektir.

Neden Kendi Anketinizi Yapmalısınız?

Piyasada birçok hazır anket aracı bulunurken, kendi anketinizi sıfırdan yapmanın pek çok avantajı vardır. Öncelikle, tam kontrol sizde olur. Anketin görünümünden, soruların sırasına, veri toplama şekline kadar her detayı kendi ihtiyaçlarınıza göre şekillendirebilirsiniz. Bu, markanızın kimliğine tam olarak uyan ve kullanıcılarınıza özgün bir deneyim sunan bir araç yaratmanızı sağlar.
Hazır platformlar genellikle belirli limitlere sahiptir (soru sayısı, yanıt sayısı, özellik kısıtlamaları). Kendi çözümünüzle bu kısıtlamaları ortadan kaldırırsınız. Ayrıca, web geliştirme becerilerinizi pratikte uygulayarak, JavaScript'in gücünü ve interaktif web uygulamaları oluşturmadaki rolünü daha iyi kavrarsınız. Bu süreç, sadece bir anket oluşturmaktan çok daha fazlasını öğretir; tarayıcının nasıl çalıştığını, kullanıcı etkileşimini nasıl yönettiğinizi ve dinamik içerik oluşturmanın temellerini anlamanızı sağlar.

Temel Bileşenler: HTML, CSS ve JavaScript

Basit bir anket oluşturmak için üç temel web teknolojisine ihtiyacımız var:
* HTML (HyperText Markup Language): Anketimizin iskeletini, yani soruları, yanıt seçeneklerini ve 'Gönder' butonunu tanımladığımız dildir. Bir bina düşünün, HTML onun taşıyıcı duvarları ve katlarıdır.
* CSS (Cascading Style Sheets): Anketimizin nasıl görüneceğini, yani renklerini, yazı tiplerini, boyutlarını ve düzenini belirlediğimiz dildir. Binanın boyası, iç dekorasyonu ve dış cephe giydirmesidir.
* JavaScript: Anketimize interaktiflik katan, kullanıcının seçimlerini yakalayan, doğrulamalar yapan ve sonuçları işleyen programlama dilidir. Binanın elektrik tesisatı, su boruları ve akıllı otomasyon sistemleri gibidir; binayı işlevsel hale getirir.
Bu üç teknoloji bir araya geldiğinde, statik bir sayfadan öteye geçerek kullanıcılarla etkileşime giren dinamik bir deneyim sunabiliriz. Özellikle kullanıcı deneyimi açısından, bu üçlünün uyumu kritik öneme sahiptir.

HTML İle Anketin İskeletini Oluşturma

Bir anketin ilk adımı, temel HTML yapısını kurmaktır. Genellikle bir `

` etiketi içine yerleştirilir. Bu `form` etiketi, anketin tüm içeriğini kapsar. Her bir soru için `` etiketini kullanarak soruyu belirtir ve ardından kullanıcının yanıtını girebileceği `` veya `

` gibi öğeleri kullanırız.<br>Örneğin, çoktan seçmeli bir soru için `<input type="radio">`, birden fazla seçeneğin işaretlenebildiği bir soru için `<input type="checkbox">` veya kısa bir metin yanıtı için `<input type="text">` kullanabiliriz. Her bir seçeneğin bir `id` ve `name` özelliği olmalı, özellikle radyo butonları için `name` özelliğinin aynı olması, kullanıcının yalnızca bir seçenek belirleyebilmesini sağlar. Son olarak, kullanıcı anketini bitirdiğinde yanıtlarını gönderebileceği bir `<button type="submit">` veya `<input type="submit">` eklemeliyiz. Bu temel yapı, anketimizin omurgasını oluşturur ve <strong>veri toplama</strong> için ilk adımı atmamızı sağlar.<br><h3>CSS İle Anketi Güzelleştirme</h3><br>HTML ile iskeletini kurduğumuz anketin okunabilir ve çekici olması, katılım oranını doğrudan etkiler. İşte burada CSS devreye girer. CSS ile anketimize estetik bir dokunuş katabiliriz.<br>*   <strong>Renkler ve Fontlar:</strong> Okunabilir fontlar seçmek ve markanızla uyumlu renk paletleri kullanmak, anketinize profesyonel bir görünüm kazandırır.<br>*   <strong>Boşluklar ve Hizalama:</strong> `margin` ve `padding` gibi CSS özellikleri ile öğeler arasında yeterli boşluk bırakarak anketin daha düzenli ve ferah görünmesini sağlayabilirsiniz. Soruları ve seçenekleri düzgün bir şekilde hizalamak da önemlidir.<br>*   <strong>Etkileşimli Öğeler:</strong> Fare üzerine gelindiğinde (hover) veya tıklandığında (active) değişen buton stilleri ekleyerek <strong>kullanıcı deneyimi</strong>ni zenginleştirebilirsiniz.<br>*   <strong>Responsive Tasarım:</strong> Anketinizin farklı ekran boyutlarında (mobil, tablet, masaüstü) iyi görünmesini sağlamak için basit responsive CSS tekniklerini (örneğin, `max-width`, `flexbox` veya `grid`) kullanmak modern web standartları için önemlidir. Bu, anketinizin her cihazda erişilebilir ve kullanılabilir olmasını garantiler.<br>CSS ile sadece anketin güzel görünmesini sağlamakla kalmaz, aynı zamanda kullanıcıların soruları daha kolay anlamasına ve yanıtlamasına yardımcı olarak genel <strong>kullanıcı deneyimi</strong>ni iyileştiririz. Bu konuda daha derinlemesine bilgi edinmek isterseniz, '/makale.php?sayfa=responsive-tasarim-ilkeleri' adresindeki makalemize göz atabilirsiniz.<br><h3>JavaScript İle Sihri Gerçekleştirme</h3><br>Anketimizi dinamik hale getiren ve interaktif özellikler kazandıran dil <strong>JavaScript</strong>'tir. HTML ve CSS ile anketimizin yapısını ve görünümünü belirledikten sonra, JavaScript ile şu temel işlemleri gerçekleştiririz:<br>1.  <strong>HTML Elemanlarına Erişim:</strong> JavaScript, Document Object Model (DOM) adı verilen bir arayüz aracılığıyla HTML elemanlarına erişmemizi sağlar. `document.getElementById()`, `document.querySelector()` gibi metotlar kullanarak anket formumuza, sorulara ve gönder butonuna ulaşabiliriz.<br>2.  <strong>Olay Dinleyicileri Ekleme:</strong> `Gönder` butonuna tıklanması gibi olayları yakalamak için olay dinleyicileri (event listeners) kullanırız. Bu sayede, kullanıcı butona bastığında belirli bir fonksiyonun çalışmasını sağlayabiliriz.<br>3.  <strong>Kullanıcı Girişini Yakalama:</strong> `Gönder` butonu tıklandığında, JavaScript seçilen radyo butonlarını, işaretlenen onay kutularını veya girilen metinleri okur. Her bir input elementinin `value` özelliğini veya `checked` durumunu kontrol ederek kullanıcının yanıtlarını alabiliriz.<br>4.  <strong>Doğrulama (Opsiyonel ama Önemli):</strong> Anket formunun gönderilmeden önce bazı alanların doldurulmuş olup olmadığını veya belirli formatlara uyup uymadığını kontrol edebiliriz. Bu basit doğrulamalar, eksik veya hatalı <strong>veri toplama</strong>nın önüne geçmeye yardımcı olur. Örneğin, tüm soruların yanıtlandığından emin olmak gibi.<br>5.  <strong>Sonuçları İşleme ve Gösterme:</strong> Kullanıcı yanıtlarını topladıktan sonra, JavaScript bu verileri işleyebilir. Örneğin, her bir seçenek için kaç oy verildiğini sayabilir veya basit bir yüzde hesaplaması yapabilir. Ardından, bu sonuçları veya bir "Teşekkür ederiz!" mesajını anketin altında veya ayrı bir bölümde dinamik olarak gösterebiliriz.<br>Bu adımlar, basit bir <strong>anket</strong>in nasıl interaktif hale getirileceğinin temelini oluşturur. JavaScript, kullanıcı ile web sayfası arasındaki köprüyü kurarak, statik bir içeriği canlı bir uygulamaya dönüştürür.<br><h2>Adım Adım Basit Bir Anket Nasıl Yapılır?</h2><br>Şimdiye kadar bahsettiğimiz prensipleri bir araya getirerek, nasıl basit bir anket oluşturacağınızı adım adım açıklayalım:<br><h3>1. HTML Dosyasını Hazırlama</h3><br>İlk olarak, `index.html` gibi bir dosya oluşturun. Bu dosyanın içinde temel bir HTML yapısı olmalıdır (`<!DOCTYPE html>`, `<html>`, `<head>`, `<body>`). `<head>` etiketi arasına anketinizin başlığını (`<title>`) ve stil dosyanızı bağlamak için `<link rel="stylesheet" href="style.css">` etiketini ekleyin. `<body>` etiketinin içine ise anket formunuzu ve sonuçların gösterileceği bir `div` elementi yerleştirin.<br><h3>2. Anket Formunu Ekleme</h3><br>`<body>` içine bir `div` veya `section` etiketi ekleyerek anketinizi kapsayacak bir alan oluşturun. İçine bir `<form>` etiketi koyun. Formun içine ise sorularınızı ve yanıt seçeneklerinizi ekleyin. Örneğin:<br>```html<br><div id="anketKapsayici"><br><h2>Sitemiz Hakkında Ne Düşünüyorsunuz?</h2><br><form id="basitAnket"><br><div class="soru"><br><p>1. Sitemizin genel tasarımını nasıl buluyorsunuz?</p><br><input type="radio" id="tasarimHarika" name="tasarim" value="Harika"><br><label for="tasarimHarika">Harika</label><br><br><input type="radio" id="tasarimIyi" name="tasarim" value="İyi"><br><label for="tasarimIyi">İyi</label><br><br><input type="radio" id="tasarimOrtalama" name="tasarim" value="Ortalama"><br><label for="tasarimOrtalama">Ortalama</label><br><br></div><br><br><button type="submit">Anketi Gönder</button><br></form><br><div id="sonucAlani" style="display: none;"><br><h3>Teşekkürler!</h3><br><p>Geri bildiriminiz bizim için çok değerli.</p><br><p id="anketOzeti"></p><br></div><br></div><br>```<br>Bu örnekte, `id`'leri kullanarak <strong>JavaScript</strong> ile kolayca erişebileceğimiz öğeler oluşturduk. Her soruyu bir `div` içinde gruplandırmak, stil uygulamayı kolaylaştırır.<br><h3>3. CSS Stilini Tanımlama</h3><br>`style.css` dosyanızı açın ve anket kapsayıcısına, formuna, sorularına, etiketlerine ve butonuna stil tanımlayın. Örneğin, `anketKapsayici` div'ine bir genişlik, kenarlık ve ortalama stil verebilirsiniz. Sorular ve seçenekler arasındaki boşlukları ayarlayarak okunaklılığı artırın. Butonunuzu da biraz renklendirip boyutlandırarak daha çekici hale getirebilirsiniz. Unutmayın, iyi bir <strong>kullanıcı deneyimi</strong> için görsel çekicilik şarttır.<br><h3>4. JavaScript Dosyasını Bağlama</h3><br>HTML dosyanızın `<body>` etiketinin kapanışından hemen önce `<script src="script.js"></script>` etiketini ekleyerek <strong>JavaScript</strong> dosyanızı bağlayın. Bu, sayfa yüklenmeden önce tüm HTML elemanlarının erişilebilir olmasını sağlar. Ayrıca performans için de tercih edilen bir yöntemdir.<br><h3>5. JavaScript Mantığını Yazma</h3><br>`script.js` dosyanızda, anketin interaktifliğini sağlayacak kodları yazın.<br>*   İlk olarak, `basitAnket` formuna ve `sonucAlani` ile `anketOzeti` div'lerine erişin.<br>*   Formun `submit` olayını dinleyen bir olay dinleyici (`addEventListener`) ekleyin. Bu olay dinleyicisi, form gönderildiğinde çalışacak bir fonksiyonu tetikleyecektir.<br>*   Bu fonksiyonun içinde, `event.preventDefault()` çağrısını yaparak formun varsayılan gönderilme davranışını (sayfayı yenileme) durdurun.<br>*   Daha sonra, her bir soru grubundaki seçili yanıtı yakalayın. Örneğin, `document.querySelector('input[name="tasarim"]:checked')` ile "tasarım" sorusunun seçili yanıtına ulaşabilirsiniz.<br>*   Yanıtları topladıktan sonra, `sonucAlani` div'ini görünür hale getirin (`style.display = 'block'`) ve `anketOzeti` paragrafına topladığınız yanıtları veya bir teşekkür mesajını yazdırın. Örneğin, "Sitemizin tasarımını 'Harika' olarak değerlendirdiniz." gibi. Bu adım, kullanıcının <strong>veri toplama</strong> sürecine katılımını onaylar ve onlara bir geri bildirim sunar.<br>Bu basit adımlarla, kendi <strong>JavaScript</strong> tabanlı anketinizi oluşturmuş olacaksınız. Bu, <strong>web geliştirme</strong> yolculuğunuzda önemli bir kilometre taşıdır ve gelecekte daha karmaşık etkileşimler için bir temel oluşturur.<br><h2>Anket Sonuçlarını Yorumlama ve Kullanma</h2><br>Basit bir anketle bile değerli <strong>veri toplama</strong> mümkündür. Kullanıcılarınızdan gelen yanıtları analiz etmek, içerik stratejinizi, ürün geliştirmenizi veya hizmet kalitenizi iyileştirmeniz için size yol gösterebilir. Örneğin:<br>*   <strong>En Popüler Seçenekler:</strong> Hangi yanıtların daha sık verildiğini belirleyerek kullanıcı tercihlerini anlayın.<br>*   <strong>Gelişim Alanları:</strong> En az tercih edilen veya olumsuz yanıtların yoğunlaştığı alanları tespit ederek iyileştirme fırsatlarını görün.<br>*   <strong>Trendler:</strong> Zaman içindeki anket sonuçlarını karşılaştırarak kullanıcı davranışlarındaki değişimleri gözlemleyin.<br>Unutmayın, toplanan veriler bir amaca hizmet etmelidir. Bu basit <strong>anket</strong> uygulamasından elde ettiğiniz bilgilerle, hedef kitlenizin beklentilerini daha iyi anlayacak ve onlara daha iyi hizmet sunabileceksiniz. <strong>JavaScript</strong> sadece anketi oluşturmakla kalmaz, aynı zamanda bu verilerin ön analizini yapmanıza da olanak tanır.<br><h2>Karşılaşılabilecek Zorluklar ve İpuçları</h2><br><strong>JavaScript</strong> ile anket oluştururken bazı yaygın zorluklarla karşılaşabilirsiniz. İşte size birkaç ipucu:<br>*   <strong>Hata Ayıklama:</strong> Tarayıcınızın geliştirici araçlarındaki `console` sekmesini aktif olarak kullanın. `console.log()` ile değişkenlerin değerlerini veya kodunuzun akışını kontrol edebilirsiniz.<br>*   <strong>Modüler Yaklaşım:</strong> Karmaşık fonksiyonlar yazmak yerine, her biri belirli bir görevi yerine getiren daha küçük fonksiyonlar oluşturun. Bu, kodunuzu daha okunabilir ve yönetilebilir hale getirir.<br>*   <strong>Tarayıcı Uyumluluğu:</strong> Modern <strong>JavaScript</strong> özellikleri çoğu tarayıcıda sorunsuz çalışsa da, eski tarayıcıları hedefliyorsanız uyumluluk konularını göz önünde bulundurmalısınız.<br>*   <strong>Güvenlik:</strong> Bu basit <strong>anket</strong> örneği istemci tarafında çalışır ve verileri sunucuya göndermez. Gerçek dünya uygulamalarında, kullanıcıdan alınan verileri bir sunucuya göndermek ve veritabanına kaydetmek için ek backend teknolojilerine ihtiyacınız olacaktır. Bu durumda güvenlik ve <strong>veri toplama</strong>nın doğru şekilde yapılması daha kritik hale gelir. Bu konuda daha fazla bilgi için '/makale.php?sayfa=backend-gelistirme-temelleri' başlıklı yazımıza bakabilirsiniz.<br><h2>Sonuç</h2><br>Tebrikler! Artık <strong>JavaScript</strong> ile ilk basit anketinizi nasıl oluşturacağınızın temel prensiplerine hakimsiniz. Bu rehberde, <strong>HTML</strong> ile anketin iskeletini kurmayı, <strong>CSS</strong> ile görsel çekiciliğini artırmayı ve <strong>JavaScript</strong> ile interaktifliği sağlamayı öğrendiniz. Bu süreç, sadece teknik bir uygulama olmanın ötesinde, <strong>web geliştirme</strong> dünyasına attığınız sağlam bir adımdır.<br>Kendi anketinizi yapma becerisi, size esneklik, kontrol ve değerli <strong>veri toplama</strong> imkanı sunar. Unutmayın, bu sadece bir başlangıç. <strong>JavaScript</strong>'in sunduğu olanaklar sınırsızdır. Elde ettiğiniz bu temel bilgilerle, daha karmaşık anketler tasarlayabilir, verileri bir sunucuya gönderebilir veya anketinize görsel grafikler ekleyerek sonuçları daha etkileşimli bir şekilde gösterebilirsiniz. Öğrenmeye devam edin, pratik yapın ve kendi benzersiz web deneyimlerinizi yaratmaktan çekinmeyin!</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>