Rastgele Arka Plan Rengini Değiştiren JavaScript Kodu
50 Günde JavaScript Projeleri Arka Plan Rengi Değiştirme -2
Arka Plan Rengini Değiştirme
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
Color Flipper
</title>
<!-- styles -->
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main>
<div class="container">
<h2>Background Color : <span class="color">#000000</span></h2>
<button class="btn btn-hero" id="btn">Click Me</button>
</div>
</main>
<!-- Javascript -->
<script src="hex.js"></script>
</body>
</html>
Gerekli bir buton ve butona tıklandığında rastgele oluşacak rengin hex kodu ekranda gösterilecektir.
<span class="color">#000000</span> etiketleri arasında rengin hes kodunu html kısmında bu şekilde gösteriyoruz.
<button class="btn btn-hero" id="btn">Click Me</button> Tıkladığımızda arka plan rengini değiştireceğimiz için html dosyamızda bir buton ekledik.
CSS
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap");
:root {
--clr-grey-10:black;
--clr-black: blue;
--ff-primary: "Roboto", sans-serif;
--ff-secondary: "Open Sans", sans-serif;
--spacing: 0.1rem;
--radius: 0.25rem;
--max-width: 1170px;
--fixed-width: 620px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--ff-secondary);
background: var(--clr-grey-10);
line-height: 1.5;
font-size: 0.875rem;
}
main {
min-height: calc(100vh - 3rem);
display: grid;
place-items: center;
}
Google Fonts'dan bir font ekledik. sizlerde bu siteye girip istediğiniz fontu ekleyebilirsiniz.
:root
:root sözde sınıfı, en üst düzey ebeveyn öğesini temsil eder. Html etiketi anlamına gelir.
Not: Fakat xml ve ve svg'de kullanılırken, :root sözde sınıfı başka bir öğeyi temsil ediyor olabilir.
:root sözde sınıfı oluşturduktan sonra global değişken tanımladık.
Global Değişkenler
Öncellikle değişken oluştururken iki tane -- işareti koyulması gerekiyor.
--clr-white= Yazı rengi
--clr-grey-10 = Arka plan rengi için kulanıldı.
--clr-black = Yazı rengi için kullanıldı.
--ff-primary = Yazı fontu
--ff-secondary = Yazı fontu
--transition= Sitil özelliklerini geçişli bir şekilde gösterilmesini sağlayacak.
--spacing= Harfler arasındaki boşuk için
--radius= Kenarları yuvarlak yapmak için
Oluşturduğumuz değişkenleri kullanırkan var() fonksiyonunu kullanacağız.
Tüm body'nin içerisindeki etiketlerimizde geçerli olmasını istediğimiz özellikler;
--ff-secondary: "Open Sans", sans-serif; ==> Fontunu belirlemiştik.
Bu fontu tüm body elemanlarında kullanmak istediğimizde yukarıda da belirtiğimiz gibi var() fonksiyonu ile kullanmamız gerekiyor.
body{
font-family: var(--ff-secondary);
}
Arka plan rengi için belirlediğimiz rengide aynı şekilde tanımlıyoruz
background: var(--clr-grey-10);
Font büyüklüğünü ve satır arası genişliği belirlemek için
line-height: 1. 5;
font-size: 0.875rem;
main tagının içerisinde bulunan tüm elemanlar için
Oluşturduğumuz kutu yüksekliğinin minimum yüksekliği için 500px oluşturduk.
Yatay ve dikey olarak ortalı olmasını istiyoruz onun için esnek kutu modelinden oluşturduk.
display:flex;
Dikeyde ortalanması için align-items
Yatayda ortalanması için jusitfy-content
text-align: center;
}
.container h2 {
background: var(--clr-black);
color: var(--clr-white);
padding: 1rem;
border-radius: var(--radius);
margin-bottom: 2.5rem;
}
container classının içerisinde bulunan yazıların ortalanması için text-align:center;
h2 Başlık Etiketi
.container h2 {
background: var(--clr-black); ==> Oluşturduğumuz global özelliğimizi burada arka plan rengi için kullandık.
color: var(--clr-white); ==> Oluşturduğumuz global özelliğimizi burada yazı rengi için kullandık.
padding: 1rem; ==> İç boşluk
border-radius: var(--radius); ==> Kutu kenarlarının yuvarlak olması için
margin-bottom: 2.5rem; ==> Dış ve alltan boşluk bırakmak için
}
.btn-hero {
font-family: var(--ff-primary);
text-transform: uppercase;
color: var(--clr-black);
letter-spacing: var(--spacing);
font-weight: 700;
transition: var(--transition);
border: 2px solid var(--clr-black);
cursor: pointer;
border-radius: var(--radius);
font-size: 1rem;
padding: 0.75rem 1.25rem;
}
.btn-hero:hover {
color: var(--clr-white);
background: var(--clr-black);
}
Buton için css özelliklerinde ise font özelliğiniz :root sözde sınıfta belirtmiştik.
--ff-primary: "Roboto", sans-serif; özelliğini burada kullanmak için font-family: var(--ff-primary);
Buton içerisindeki tüm harflerin büyük olmasını istersek, text-transform:uppercase;
--clr-black: blue; yazı rengini değiştirmek için color: var(--clr-black);
Harfler arasındaki boşluğu ayarlamak için letter-spacing: var(--spacing);
JavaScript
const hex = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"];
const btn = document.getElementById("btn");
const color = document.querySelector(".color");
btn.addEventListener("click", function () {
let hexColor = "#";
for (let i = 0; i < 6; i++) {
hexColor += hex[getRandomNumber()];
}
color.textContent = hexColor;
document.body.style.backgroundColor = hexColor;
});
function getRandomNumber() {
return Math.floor(Math.random() * hex.length);
}
Hex renk kodunu ekranda göstereceğimiz için bu renk kodunun ilk başta nasıl gösterildiğinden bahsedeceğim
Hex renk kodları pound işareti veya hashtag(#) ile başlar. Ardından 6 harf veya 6 rakam gelir. İlk iki harf / rakam kırmızıya, sonraki ikisi yeşile ve son ikisi maviye karşılık gelir. Renk değerleri, 00 ile FF arasındaki değerlerde tanımlanır.
Değer 0-9 arasında olduğunda rakamlar kullanılır. Değer 9'dan büyük olduğunda harf kullanılır.
Bizde bu yüzden bir dizi içerisinde değerlerimizi döndüreceğimiz için rakamları ve harfleri bir diziye alıyoruz.
const hex = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"];
Butonun id property'si "btn" HTML elemanları içerisinde id property'sine getElementById sahip elemanlarını seçmemize imkan sağlamaktadır.
const btn = document.getElementById("btn");
Tek bir seçici ile id,class veya direkt etiketi seçme seçme işlemini querySelector() ile yapılabilir.
Burada color classını, const color = document.querySelector(".color"); ile seçiyoruz.
Şimdi kullancının bir düğmeye tıkladığında yapmasını istediğimiz kodları yazacağız bunun için addEventListener yöntemi kullancağız.
addEventListener yönetimi, kullanıcı düğmeye tıkladığında, belirli bir olay gerçekleştiğinde çağrılacak işlevleri ayarlamanıza olanak tanır.
btn.addEventListener("click", function () { Butona click özelliğini verdik.
let hexColor = "#"; Burada ekranda ilk kısmında hex(renk kodunun) ön kısmına "#" eklenmesini istiyoruz.
for (let i = 0; i < 6; i++) { hex renginde 6 rakam ve 6 harf geliyordu burda for döngüsünde belirtiyoruz.
hexColor += hex[getRandomNumber()]; "#" sonra rastgele oluşturulan rengi ekliyoruz.
}
color.textContent = hexColor; textContentin içerisine hex kod rengini yazdırıyoruz.
document.body.style.backgroundColor = hexColor; Arka plan rengini değiştiriyoruz.
});
function getRandomNumber() {
return Math.floor(Math.random() * hex.length);
}
oluşturduğumuz hex dizisinden rasgele içerisindeki değişkenleri döndürmek için bir fonksiyon yazdık.
Ondalıklı sayı üretmek için Math.random kulllanıyoruz. Ondalıklı sayıyı tam sayıya çevirmek için Math.floor fonksiyonunu kullanıyoruz.
return Math.floor(Math.random() * hex.length); hex dizisi uzunluğunda tam sayı olarak rastgele döndürmesini söyledik.
Kısaca özetleyecek olursak ;
Dizi oluşturduk 0-9 arasında rakam alıyordu daha sonra 6 harf belirtitk bu dizi içerisinden 0 ile 6 arasında döngü dönüyordu çünkü hex renk kodu 0 ile 6 arasında dönerek sayı ve harflerden oluşur. Döngü döndükten sonra ilk olarak hashtag ekliyor daha sonra rastgele oluşan rengi text kutusunun içerisine yazdırıp arka plan rengini değiştiriyor butona her tıkladığımızda döngümüz bu şekilde arka plan rengini değiştiriyor.
Drive bağlantısı üzerinden bu projenin kaynak kodlarına ulaşabilirsiniz.
https://drive.google.com/file/d/1avPC1gNZoiw7fJGl63XyM-ArXVmnlStk/view?usp=sharing