JAVASCRIPT İLE BASİT SAAT UYGULAMASI

Selamlar..

Javascript ile date nesnesi ve setInterval zamanlayıcısı kullanarak basitçe saniye, dakika ve saatin gösterileceği bir saat uygulaması yapalım.  Javascript Date nesnesi ile tüm zaman bilgilerine ulaşabilidiğimize göre , bir zamanlayıcı ve basit bir fonksiyon ile saatimizi tasarlayabilriiz. 

BU UYGULAMADA NELER VAR?

• Javascript date nesnesi
• setInterval kullanımı
• if yapısı
• Text değiştirme
• Css Özelliği Değiştirme
• Seçici Kullanımı (querySelector)
• Funksiyon Oluşturma

HTML & CSS

Saatin tasarım kısmı için , zaman bilgilerini (saat-saniye-dakika) gösterecek 3 adet div , aralarda kullanılan ":" işaretleri için 2 div ve bunları içine alan bir kapsayıcı kullanıyoruz.  

<div class="container"> 
		<div  class="box" id="saat">0</div>
		<div  class="dot">:</div>
		<div  class="box" id="dakika">0</div>
		<div  class="dot">:</div>
		<div  class="box" id="saniye">0</div>  
</div>

Biçim (renkler , yerleşim, yazı boyutu, tipi vs) özellikleri tabiki keyfe keder ancak küçük ekranlarda da düzgün görünebilmesi için bir @media düzenlemeside ekleyelim. 

body {
			padding: 0; margin: 0;
			height:100vh;
			color:#dd3a00;
			background: #000; 
			font-family: calibri; 
			display: flex;
			justify-content: center;
			align-items: center;
			align-content: center;
			flex-direction: column; 
		}		 
.container{
			width:50%;
			margin: 2rem auto;
			margin-bottom: 0;
			display: flex;
			justify-content: center;
			align-items: center; 
			gap:5%;
			border:10px solid #dd3a00;
			border-radius:15px;
			padding: 80px 50px; 
		}  
.box,.dot { 
			color:#eee;
			padding: 0;
			width:25%; 
			font-size:6rem; 
			display: flex;
			justify-content: center;
			align-items: center;
			font-weight: bold;
			background-color: #222;
			border-radius: 1rem; 
}
.dot {width:3%;background:none; }
		
/* zaman isimleri*/
#saniye,#dakika,#saat  { position: relative;}
#saniye:after,#dakika:after,#saat:after { 
			position: absolute;
			top:-2.5rem;
			font-size:1.3rem;
			color:#aaa;
}
#saniye:after { content:"saniye"; }
#dakika:after { content:"dakika"; }
#saat:after { content:"saat"; }

/*diğer ekranlar*/
@media (max-width:1200px) {
		.container {width:70%;}
		html {font-size:12px}
}

@media (max-width:600px) {
		.container {width:300px!important;}
		html {font-size:8px}
		.box,.dot {  font-size:2rem;  }
}

Container div'in sayfaya yatay ve dikey ortalanabilmesi için body'ye ve  yine zaman bilgilerininin container içerisinde ortalanması için container div'e flex yapısı ekledik. Zaman isim bilgileri içinde ayrıca etiket oluşturmak yerine , after sözde sınıflarını kullandık.

JAVASCRIPT

Saati görüntülemek  içini saniye bir zaman bilgilerini alıp , div'lere yazxdırıyoruz. Ayrıca tek haneli sayılar için , 10'dan küçükse kontolü ile başlarına 0 ekliyoruz.

// saniyede bir saat fonksiyonu çalışacak
setInterval(saat,1000); 

function saat() {

			// zaman bilgilerini alıyoruz
			zaman=new Date();
			saniye=zaman.getSeconds();
			dakika=zaman.getMinutes(); 
			saat=zaman.getHours(); 
			
			// tek haneli olduğunda başına 0 ekleme
			if (saniye<10) { saniye="0"+saniye;}
			if (dakika<10) { dakika="0"+dakika;}
			if (saat<10) { saat="0"+saat;}

			document.getElementById("saat").innerText=saat;
			document.getElementById("dakika").innerText=dakika;
			document.getElementById("saniye").innerText=saniye; 

}  

// güncelleniyor