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.
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.
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.
Bu blokta; taşıyıcı elementimizin "width", "height", "background" (color) ve "display" özelliklerini belirleyip; bütün alt elementleri ortaladık.
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.
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.
Bu blokta; sayfa yüklendiğinde gösterilecek sözün bulunacağı elemente gereken, basit özellikleri tanımlıyoruz.
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.
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.
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.
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.
Burada; yukarıda çektiğimiz alt diziden sözü ve sözü söyleyeni 2 farklı değişkene atıyoruz.
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.
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>Ş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;
}
CSS:
#container {
width: 100vw;
height: 100vh;
background: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
}
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;
}
}
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%;
}
CSS:
#random-promise-container #promise {
width: 100%;
height: max-content;
text-align: center;
color: #181818;
}
CSS:
#random-promise-container #promiser {
font-size: 15px;
color: #707070;
position: absolute;
right: 30px;
}Ş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"
]
];
JavaScript:
var promiseElem = document.querySelector("#random-promise-container #promise");
var promiserElem = document.querySelector("#random-promise-container #promiser span");
JavaScript:
var selectedPromise = promises[Math.floor(Math.random() * promises.length)];
JavaScript:
var promise = selectedPromise[0];
var promiser = selectedPromise[1];
JavaScript:
promiseElem.innerText = promise;
promiserElem.innerText = promiser;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.
Son düzenleme:
