HTML, CSS ve JavaScript ile Color Flipper Örneği
Bu yazımızda, HTML, CSS ve JavaScript ile basit bir color flipper (renk çevirici) örneği oluşturmayı ele alacağız.
Color Flipper, sayfa arkaplanını rastgele renklere değiştiren ve mevcut rengi ekranda gösteren basit bir uygulamadır. Bu örnek sayesinde şu konuları pekiştireceğiz:
- ☑️ HTML ile temel sayfa yapısını oluşturma
- ☑️ CSS ile sayfa stilini düzenleme
- ☑️ JavaScript ile sayfa üzerinde etkileşim sağlama
Kodun nasıl bir şey olduğunu görmek için codepen üzerinden inceleyebilirsiniz:
See the Pen Color Flipper by 1kodum (@1kodum) on CodePen.
⭐ HTML kodu
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
// HTML <!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title>Color Flipper</title> </head> <body> <main> <h1>Color Flipper</h1> <button id="colorBtn">Renk Değiştir</button> <h2 id="colorText">Arkaplan Rengi: #ffffff</h2> </main> <script src="script.js"></script> </body> </html> |
⭐ CSS kodu
Arka plan rengi açık pembe ve başlık rengi parlak pembe olarak ayarlanmıştır. Ayrıca beyaz bir kutu ekleyerek içeriği vurguluyor ve butona geçiş efekti ekleyerek etkileşimi daha hoş hale getiriyoruz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
// CSS /* styles.css */ /* Genel Ayarlar */ * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #ffccff; /* Açık pembe arkaplan */ font-family: "Roboto", sans-serif; } main { text-align: center; width: 80%; max-width: 600px; padding: 2rem; background-color: #ffffff; /* Beyaz kutu */ box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Kutu gölge */ border-radius: 10px; } h1 { font-size: 2.5rem; color: #ff69b4; /* Parlak pembe */ margin-bottom: 1rem; } button { background-color: #ff69b4; /* Parlak pembe */ color: #ffffff; border: none; padding: 12px 24px; cursor: pointer; font-size: 18px; border-radius: 5px; margin-top: 20px; transition: all 0.2s ease; /* Düğme geçiş efekti */ } button:hover { background-color: #ff1493; /* Koyu pembe */ } h2 { font-size: 1.5rem; color: #333333; /* Koyu gri */ margin-top: 1.5rem; } |
⭐ JavaScript kodu
JavaScript ile aşağıdaki temel komutları kullanmayı öğreneceğiz:
- ☑️ arrays
- ☑️ document.getElementById()
- ☑️ document.querySelector()
- ☑️ addEventListener()
- ☑️ document.body.style.backgroundColor
- ☑️ Math.floor()
- ☑️ Math.random()
- ☑️ array.length
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
// JavaScript const colorBtn = document.getElementById("colorBtn"); const colorText = document.getElementById("colorText"); const colors = [ "red", "green", "blue", "yellow", "purple", "orange", "pink", "cyan", "lime", "magenta" ]; colorBtn.addEventListener("click", () => { const randomIndex = Math.floor(Math.random() * colors.length); const selectedColor = colors[randomIndex]; document.body.style.backgroundColor = selectedColor; colorText.textContent = "Arkaplan Rengi: " + selectedColor; }); |
JavaScript kodunu adım adım açıklayayım:
➡️ İlk olarak, HTML’deki colorBtn ve colorText elementlerine erişiyoruz ve bunları sabit değişkenlere atıyoruz. Bu, daha sonra bu elementlerle etkileşime girmemize olanak tanır:
|
1 2 3 |
// const colorBtn = document.getElementById("colorBtn"); const colorText = document.getElementById("colorText"); |
➡️ colors adlı bir dizi oluşturarak kullanılabilir renkleri tanımlıyoruz:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// const colors = [ "red", "green", "blue", "yellow", "purple", "orange", "pink", "cyan", "lime", "magenta" ]; |
➡️ colorBtn düğmesine bir “click” olay dinleyicisi (event listener) ekliyoruz. Butona her tıklandığında aşağıdaki işlemleri yapacak olan bir fonksiyon tetiklenecektir:
|
1 2 |
// colorBtn.addEventListener("click", () => { |
➡️ Rastgele bir renk seçebilmek için Math.random() fonksiyonunu kullanıyoruz. Bunu ise 0 ile colors dizisinin uzunluğu arasında rastgele bir sayı üretecek şekilde yazıyoruz. Ardından, Math.floor() fonksiyonuyla bu sayıyı yuvarlayarak tam bir indeks elde ediyoruz:
|
1 2 |
// const randomIndex = Math.floor(Math.random() * colors.length); |
➡️ Rastgele üretilen indeksi kullanarak colors dizisindeki indeksin karışılığı olan rengi eşleştiriyoruz:
|
1 2 |
// const selectedColor = colors[randomIndex]; |
➡️ Seçilen rengi, sayfanın arka plan rengi olarak ayarlayıp colorText elementinin içeriğini güncelleyerek ekranda gösteriyoruz:
|
1 2 3 4 |
// document.body.style.backgroundColor = selectedColor; colorText.textContent = "Arkaplan Rengi: " + selectedColor; }); |
Böylece JavaScript ile kullanıcı etkileşimli color flipper örneğini kodlamış olduk.
