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. Bunun gibi yardımcı olacağını düşündüğüm gönderiler gelmeye devam edecektir. 🙂
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. 😊
<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. 😊
@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.
#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.
#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.
#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.
#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.
#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.
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.
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.
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.
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.
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. 🙂
