Sıfırdan ileriye Javascriptin yeni konusuna hoş geldiniz. Bugün sizlerle karanlık/gündüz temasına sahip podomoro uygulaması geliştireceğiz. Podomoro aslında bir çalışma tekniğidir. 25 dakika iş 5 dakika molalar halinde çalışmanızın devamlılığını sağlayan bir tekniktir. Bugün biz de aslında bunu yapacağız. Uygulamamızda 4 adet buton yer alacak. Başlatma düğmesine bastığımız an 25 dakikalık sayacımız geriye doğru başlayacak. Durdurma butonumuza bastığınız an süre duracaktır. Tekrar başlatma düğmesine basıldığında kaldığımız yerden devam edeceğiz. Bir de kullanıcı gündüz modundayken ay simgesine tıklarsa ekran siyah olacak ve ay simgesi yerine güneş simgesi gelecektir. Eğer kullanıcı tekrar güneş simgesine basarsa ekran beyaz olacak ve ay simgesi ortaya çıkacaktır. Uygulamamız temelde böyle, sizler dilerseniz daha çok özellik de ekleyebilirsiniz geliştirmek size bağlı. Ek olarak Css tasarımına pek özen göstermedim dilerseniz siz daha şık görünümlü bir uygulama da tasarlayabilirsiniz. Buradaki amacım seri boyunca gördüğümüz şeyleri projelerde nasıl kullanıldığını göstermek olduğu için buralara pek takılmayın. Şimdi konumuza Html kodlarıyla başlayalım.
Öncelikle font awesome üzerinden icon alacağımız için cdn linkini direkt html head etiketi arasına yapıştırın. Eğer yapmaz iseniz simgeler görünmeyecektir.
Daha sonra html kodlarına bakalım.
Öncelikle font awesome üzerinden icon alacağımız için cdn linkini direkt html head etiketi arasına yapıştırın. Eğer yapmaz iseniz simgeler görünmeyecektir.
HTML:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />Daha sonra html kodlarına bakalım.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="index.css">
</head>
<body class="body">
<div class="screen">
<i class="fa-solid fa-moon" id="karanlik"></i>
<i class="fa-solid fa-sun" id="gunduz"></i>
</div>
<div class="main">
<div class="timeCircle">
<div class="time"></div>
</div>
<div class="button">
<div class="startCircle">
<div class="start"><i class="fa-solid fa-play"></i></div>
</div>
<div class="pauseCircle">
<div class="pause"><i class="fa-solid fa-pause"></i></div>
</div>
<div class="nextToCircle">
<div class="nextTo" id="nexTo"><i class="fa-solid fa-angles-right"></i></div>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>Divlerimiz var bu divler içinde kullanacağımız buton ve iconlar var. Ek olarak sayacın olacağı divler mevcut üzerinde çok durmaya gerek yok css kodlarına geçelim şimdi
CSS:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
height: 100vh;
background-color: #f4f4f4;
}
.main {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 150px;
}
.button {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 20px;
width: 300px;
}
.timeCircle {
width: 400px;
height: 200px;
border: 1px solid #858585;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
.time {
font-size: 24px;
font-weight: bold;
color: black;
}
.startCircle,
.pauseCircle {
width: 200px;
height: 100px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin-right: 20px;
cursor: pointer;
}
.nextToCircle {
width: 200px;
height: 100px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
cursor: pointer;
background-color: #d4e518;
}
.startCircle {
background-color: #2ecc71;
}
.pauseCircle {
background-color: #e74c3c;
}
.start i,
.pause i,
.nextTo i {
font-size: 30px;
color: #fff;
}
.start i:hover,
.pause i:hover,
.nextTo i:hover {
font-size: 35px;
color: #fff;
}
.screen {
display: flex;
align-items: center;
justify-content: flex-end;
margin-right: 150px;
margin-top: 50px;
}
.screen i {
font-size: 30px;
cursor: pointer;
}Konunun başında dediğim gibi bu tasarımla yetinmeyip daha kaliteli bir tasarım yapabilirsiniz benim amacım sadece öğrendiklerimizi pekiştirebilecek bir proje hazırlamak olduğu için çok da üstünde durmadım. Şimdi asıl olayımıza yani Javascript'e geçelim.
İlk olarak işlem yapacağımız buton ve ikonları bir Javascripte tanıtalım.
JavaScript:
let baslat = document.querySelector(".start")
let durdur = document.querySelector(".pause")
let ileri = document.querySelector("#nexTo")
let yazdir = document.querySelector(".time")
let karanlik = document.querySelector("#karanlik")
let gunduz = document.querySelector("#gunduz")
let body = document.querySelector(".body")Burada sırayla işlem yapacağımız elemanları seçtik ve Javascripte tanımladık. Şimdi değişkenlerimizi tanımlayalım.
JavaScript:
let saniye = 0
let dakika = 25
let interval = null
let bitti = false
let ekranDurumu = falseSırayla önce saniye ve dakikayı tanımladık. Saniye 0'dan başlarken dakika ise 25'ten başlayacaktır. Daha sonra interval kısımı birnevi sayaç diyebiliriz. 25,24,23,22 diye dakikamız geriye gidecek şimdilik null yani boş olarak belirtiyoruz ama daha sonra atama yapılacak. Bitti değişkeni ise aslında dakika ve saniyenin 0 olmasıyla birlikte true olarak dönüp sayacı sıfırdan başlatacak bir değişken. Şimdilik false çünkü sayaç 25 : 00 olarak gözüküyor. Ne zaman her iki değişken de 0:00 olursa True dönecektir. En son olarak ekranDurumu değişkenimiz var bu da aslında uygulamaya gece/gündüz modunu ayarlamak için kullanılıyor. Şu an değerimiz false yani gündüz modunda kullanıcı ne zaman simgeye basarsa bu değer true olup arka plan siyah olacak. Tekrar basarsa true değerinden false dönüp arka plan yine beyaz olacak.
Temel değişkenlerimiz bu şekilde şimdi gece/gündüz moduyla alakalı küçük bir değişiklik yapalım.
JavaScript:
if (ekranDurumu == false) {
gunduz.style.display = "none"
}Burada eğer ekranDurumu false ise yani gündüz modundaysak gunduz yani güneş emojisini bize gösterme sadece ay kalsın. Eğer Ay'a basarsak ise de Güneş gözüksün diye ayarlayacağız. Şimdilik tema modumuz böyle kalsın biz süre ve buton işlemlerine yoğunlaşalım daha sonra tekrar geri döneceğiz buraya.
JavaScript:
yazdir.innerHTML = `${dakika}:${saniye < 10 ? "0" + saniye : saniye}`Burada kutunun tam ortasına dakika ve saniyeyi yazdık ayrıca eğer saniye 10'dan küçükse başına bir sıfır ekle dedik. saniye < 10 ? (saniye 10'dan küçükse) 0 ekle (true değeri) eğer değilse (false değeri) ekleme. Mantık tamamen bundan ibaret.
Böylece zamanımızı kutuya ekledik. Şimdi sıra zaman fonksiyonunu yazalım.
JavaScript:
const zaman = () => {
if (saniye === 0) {
if (dakika > 0) {
dakika--
saniye = 59;
} else {
clearInterval(interval)
bitti = true;
}
} else {
saniye--
}
yazdir.innerHTML = `${dakika}:${saniye < 10 ? "0" + saniye : saniye}`
}Burada yaptığımız işlem temelde dakika 0'dan büyük olduğu sürece saniye 0 olduğu an dakika değerinden 1 eksilt ve 0 olan saniyeyi 59 yap diyoruz. Aslında burada !dakika == 0 da diyebiliriz. Aynı sonucu alacağız. Else blokları içinde zamanı sıfırlama için clearInterval diyoruz ve bitti değerini true yaparak sürenin bittiğini belirtiyoruz. Eğer saniye 0'a eşit değilse 1'er 1'er azaltmaya devam diyoruz. En sonda ise bu değişen değerleri kutunun içine yazdırıyoruz. Böylece sayaç işlemi tamamlanıyor. Artık butonlara basıp bunları çalıştırmamamız gerekiyor.
JavaScript:
baslat.addEventListener("click", () => {
if (bitti || dakika === 25) {
saniye = 0
dakika = 25
bitti = false
yazdir.innerHTML = `${dakika}:00`
}
interval = setInterval(zaman, 1000)
})Başlat butonuna tıkladığımız an aslında üsteki yazdıklarımızı tekrar ediyoruz. Mesela burada tekrar etmemek için hepsinin tek bir fonksiyona toplayıp da yapabilirsiniz. Birçok yöntem mevcut.
En sonda ise interval değerini zaman fonksiyonuyla her 1000 milisaniyede bir kez (1 saniyede bir kez) çalışmasını söylüyoruz. Böylece 25'ten geriye doğru sayımı başlatma işlememiz tamamlanıyor. Şimdi zamanı durdurmaya bakalım.
JavaScript:
durdur.addEventListener("click", () => {
clearInterval(interval)
})Burada durdurma tuşuna bastığımız an clearInterval(interval) yani zamanı olduğu yerde durduracak method çalışıyor. Pek bir olayı yok interval özelliklerinden biri bu.
Şimdi mola zamanını ayarlamaya gelelim. Bunu siz şöyle olarak da geliştirebilirsiniz mesela 25 dakika bittiği an tekrar başlamasın da direkt molaya geçsin. Biraz üstüne düşünürseniz çok kolay bir iş olduğunu anlarsınız ama ben 25 dakika bittikten sonra kullanıcı isteğiyle molaya geçmesini istiyorum o yüzden bunu anlatalım şimdi.
JavaScript:
ileri.addEventListener("click", () => {
clearInterval(interval)
saniye = 0
dakika = 5
yazdir.innerHTML = `${dakika}:00`
interval = setInterval(zaman, 1000)
})Burada ileri olarak adlandırmamım sebebi bir sonraki adımdan kaynaklanıyor isterseniz değişkenin adını kendi adınız koyun anladığınız sürece problem yok. Burada sarı butona bastığımız an 25 dakikalık süreyi silip saniye değerini 0, dakika değerini ise 5 olarak kutunun içine yazdırıp interval ile zaman fonksiyonunu çağırıyor ve her 1000 milisaniyede bir (1 saniyede 1) bu fonksiyonun çalışmasını söylüyoruz. Böylece 5'den geriye geri sayım başlıyor.
Aslında temel olarak Podomoro uygulaması bu kadar biraz daha uzatmak adına başta hafiften adım attığımız karanlık/gündük modunu yapalım ve konuyu bitirelim.
İlk olarak karanlık için event listener ekleyelim.
JavaScript:
karanlik.addEventListener("click", () => {
if (ekranDurumu == false) {
body.style.backgroundColor = "Black"
yazdir.style.color = "white"
body.style.color = "white"
karanlik.style.display = "none"
gunduz.style.display = "block"
gunduz.style.color = "white"
ekranDurumu = true
}
})Ay simgesine bastığımız an aşağıdaki kodların çalışmasını söylüyoruz. Eğer ekranDurumu false ise yani gündüz modundaysak arka planı siyah ve diğer öğeleri beyaz yapmasını söylüyoruz. Ek olarak ay ikonunu görünmez yapıp onun yerine güneş ikonun gelmesi için displayleri ile oynuyoruz. En sonda ise artık arka plan karanlık mod olduğu için ekranDurumunu true olarak değiştiriyoruz.
Şimdi gündüz modunu yapalım.
JavaScript:
gunduz.addEventListener("click", () => {
if (ekranDurumu == true) {
body.style.backgroundColor = "white"
yazdir.style.color = "black"
body.style.color = "black"
karanlik.style.display = "block"
ekranDurumu = false
}
})
Burada ise güneş simgesine tıkladığımız an ekranDurumu true ise arka planı beyaz diğer elemanları beyaz yapmasını, ay simgesinin displayini block yaparak ay simgesini kullanıcıya göstermesini ve ekran durumunu false yapmasını söylüyoruz. Böylece gece-gündüz modumuzu da bitirmiş oluyoruz.
Bugünlük bu kadardı. Bu proje daha da geliştirilebilir. Bunu yapmak sizin elinizde konuyu okuduğunuz için teşekkürler ve başka bir konuda görüşmek üzere.
, daha ayrıntılısı gelir mi ?
