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

Bu konuyu okuyanlar

fatihege

Doçent
Katılım
27 Nisan 2020
Mesajlar
661
Reaksiyon puanı
398
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 Nisan 2020
Mesajlar
661
Reaksiyon puanı
398
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ı.
 

GhosT57

Müdavim
Katılım
27 Temmuz 2020
Mesajlar
4,009
Reaksiyon puanı
4,914
Puanları
113
Yaş
23
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.
 

Son mesajlar

Üst