JavaScript İle Bir Web Sayfasında Rastgele Sözler Göstermek

Bu konuyu okuyanlar

fatihege

Doçent
Katılım
27 Nis 2020
Mesajlar
661
Reaksiyon puanı
395
Puanları
63
Merhaba, bu yazımda sizlere, bir web sayfasını her yenilediğinizde karşınıza rastgele sözler çıkarmak için ne gibi yol izleniyor bundan bahsedeceğim.

NOT: Bu yazıda HTML, CSS ve JavaScript dilleri kullanılmıştır. Rahatlıkla anlamanız için giriş seviyede HTML, orta seviyede CSS ve JavaScript bilmeniz gerekmektedir.

HTML kodlarımızdan başlayalım.
HTML:
<div id="container">
    <div id="random-promise-container">
        <div id="promise"></div>
        <small id="promiser">― <span></span></small>
    </div>
</div>
Kısaca açıklamak gerekirse; ID’si "container" olan taşıyıcı bir element oluşturduk ve bunun içinde rastgele sözleri göstereceğimiz, ID’si "random-promise-container" olan bir element oluşturduk. Bu elementin içine de ID’si "promise" olan ve göstereceğimiz sözün yer alacağı elementi oluşturduk. Onun altına da gösterilen sözün söyleyenini göstereceğimiz, ID’si "promiser" olan bir "<small>" etiketi oluşturduk.

Şimdi CSS kodlarımızı parça parça, anlatarak yazayım.

CSS:
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');

* {
    margin: 0;
    padding: 0;
    outline: none;
    box-sizing: border-box;
}

body {
    font-family: "Inter", sans-serif;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
Bu CSS kodları ile; “Inter” fontunu dahil ettik ve bütün elementlerin "margin", "padding", "outline" değerlerini sıfırlayıp, kutuların boyutlandırmasında kenar çizgilerinin de dahil edileceğini yazdık. Altında; dökümanın yazı tipini belirledik ve metin seçimlerini engelledik.

CSS:
#container {
    width: 100vw;
    height: 100vh;
    background: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
}
Bu blokta; taşıyıcı elementimizin "width", "height", "background" (color) ve "display" özelliklerini belirleyip; bütün alt elementleri ortaladık.

CSS:
#random-promise-container {
    padding: 20px;
    background: #fff;
    border-radius: 15px;
    font-size: 20px;
    max-width: 80%;
    position: relative;
    padding-bottom: 30px;
    border-bottom: 1px solid #1166fa;
    overflow: auto;
    animation: fadeIn 1s;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
 
    70% {
        opacity: 0;
    }
 
    100% {
        opacity: 1;
    }
}
Bu kodlarda; rastgele sözlerimizi göstereceğimiz elementimizin görünüş özelliklerini ve sayfa yüklendikten sonra opaklık değerinin artarak gelmesi için "fadeIn"animasyonunu yazdık.

BİLGİ: Animasyon belirlememizin sebebi; JavaScript kodlarımızda bulunan ve sözlerin bulunduğu dizinin uzun olmasından dolayı, sözler yüklenirken elementin içinin boş olarak görünmesini engellemek için ekledik. Eğer farkı görmek istiyorsanız; kodları yazarken @keyframes bloğunu silip/yorum satırına alıp deneyebilirsiniz.

CSS:
#random-promise-container::before {
    content: "";
    border-radius: 100ch;
    width: 10%;
    height: 10px;
    background: linear-gradient(90deg, #1e72fa, #091ce8);
    position: absolute;
    top: 0;
    left: 60px;
    transition: 0.35s ease-out;
    transition-property: width, left;
    min-width: 37px;
}

#random-promise-container:hover::before {
    left: 80px;
    width: 13%;
}
Bu kodlarda; ID’si "random-promise-container" olan elementimizin üzerine geldiğimizde kayarak güzel bir efekt oluşturacak olan küçük çizgiyi "before" pseudo class’ı ile oluşturuyoruz.

CSS:
#random-promise-container #promise {
    width: 100%;
    height: max-content;
    text-align: center;
    color: #181818;
}
Bu blokta; sayfa yüklendiğinde gösterilecek sözün bulunacağı elemente gereken, basit özellikleri tanımlıyoruz.

CSS:
#random-promise-container #promiser {
    font-size: 15px;
    color: #707070;
    position: absolute;
    right: 30px;
}
Bu blokta ise; sayfa yüklendiğinde gösterilecek olan sözü söyleyen kişinin adının yazacağı elementin görünüm özelliklerini belirliyoruz.

Şimdi gelelim JavaScript kodlarımıza.

JavaScript:
var promises = [
    [
        "Nerede olursanız olun, elinizdekilerle yapabileceğinizi yapın.",
        "Theodore Roosevelt"
    ],
    [
        "İnsan sahip olduklarının toplamı değil, fakat henüz gerçekleştiremediklerinin toplamıdır.",
        "Jean Paul Sartre"
    ],
    [
        "Herkes dünyayı değiştirmeyi düşünür, ama kimse kendini değiştirmeyi düşünmez.",
        "Lev Tolstoy"
    ],
    [
        "İnsanlar öğrenme dürtüsüyle doğarlar. Öğrenmeye karşı merak ve bundan duyulan zevk insanın doğasında vardır. Bunlar bebeklikten başlayarak zamanla yok edilir.",
        "W.E.Deming"
    ],
    [
        "Düşünmek ve söylemek kolay, fakat yaşamak, hele başarı ile sonuçlandırmak çok zordur.",
        "Ziya Gökalp"
    ],
    [
        "Engeller beni durduramaz, her bir engel kararlılığımı daha da güçlendirir.",
        "Leonardo da Vinci"
    ]
];
Bu array ile sayfa yüklendiğinde gösterilecek olan sözün ve sözü söyleyen kişinin bulunduğu, "promises" dizisinin alt dizisi olan dizileri tanımladık.

JavaScript:
var promiseElem = document.querySelector("#random-promise-container #promise");
var promiserElem = document.querySelector("#random-promise-container #promiser span");
Bu satırlarda; sayfa yüklendiğinde gösterilecek olan sözün gösterileceği elementi ve sözü söyleyenin gösterileceği elementi JavaScript’in "querySelector()" fonksiyonu ile belirliyoruz.

JavaScript:
var selectedPromise = promises[Math.floor(Math.random() * promises.length)];
Bu satırda; "Math" nesnesinin "random()" fonksiyonunu kullanarak rastgele bir sayı üretiyor, ve bu sayıyı dizimizin eleman sayısı ile çarpıyoruz ve "Math" nesnesinin "floor()" fonksiyonu ile oluşturulan sayının taban değerini alıyoruz. Bunları; "promises" dizisinden bir değer çekmek için köşeli parantezlerin içerisinde tanımlayarak rastgele bir alt diziyi çekiyoruz. Burada dikkatinizi çekmek istiyorum; biz, bir sözü değil, sözün ve sözü söyleyenin bulunduğu diziyi çekiyoruz.

JavaScript:
var promise = selectedPromise[0];
var promiser = selectedPromise[1];
Burada; yukarıda çektiğimiz alt diziden sözü ve sözü söyleyeni 2 farklı değişkene atıyoruz.

JavaScript:
promiseElem.innerText = promise;
promiserElem.innerText = promiser;
Bu satırlarda; yukarıda tanımladığımız, seçilen sözün ve seçilen sözü söyleyenin bulunacağı elementlerin içerisine; seçilen sözü ve seçilen sözü söyleyen kişinin adını yazdırıyoruz.

Hepsi bu kadar. :) Eğer çıktıyı görmek istiyorsanız;
https://codepen.io/fatihege/pen/RwGBvwa

Kodları inceleyerek ve üzerinde değişiklikler yaparak anlattıklarımı daha net anlayabilirsiniz. Sayfayı yenilerseniz her seferinde farklı sözün geldiğini görebilirsiniz.
İnşallah faydalı olmuştur. :)

Bu özellik SDN Forum'a da gelirse iyi olur diye düşünüyorum. "Footer" bölümünde veya üzerinde gösterilebilir. En azından insanımız kültürlenir. :D
 
Son düzenleme:

fatihege

Doçent
Katılım
27 Nis 2020
Mesajlar
661
Reaksiyon puanı
395
Puanları
63
Ya abi amma konuyu öne çıkardılar ya. O kadar rehber yaptım yok. Neyse Linux ile ilgili dev bir rehber çıkartıyorum. Eğer o da öne çıkmazsa pü.
Moderatörler ile iletişime geçersen belki kabul edebilirler.
NOT: @Dora bana özelden haber verdi öne çıkarılacağını.
 

Alparslan57

Profesör
Katılım
27 Tem 2020
Mesajlar
4,005
Reaksiyon puanı
4,926
Puanları
113
Yaş
12
Moderatörler ile iletişime geçersen belki kabul edebilirler.
Mesaj otomatik birleştirildi:

NOT: @Dora bana özelden haber verdi öne çıkarılacağını.
Bilmiyorum. Hem o atığım rehberlerde hem etiketledim hem raporladım ama nafile. Ama Linux ile ilgili aşırı dev bir rehber çıkartıyorum. O da sabitlenmezse ne bilm.
 

Emre Nas

Profesör
Katılım
6 Nis 2020
Mesajlar
2,347
Çözümler
1
Reaksiyon puanı
2,259
Puanları
113
Yaş
121
çok güzel çalışmaların var
 

epsilon06

Profesör
Katılım
19 Ocak 2016
Mesajlar
2,151
Reaksiyon puanı
2,089
Puanları
113
Yaş
25
Çok yorgunum beni bekleme kaptan.
 
Üst