Javascript 30 - Gün 12

4 Mayıs 2023

Bugünkü challenge Javascript ile klavye tuşlarını takip ederek gizli bir kelime girildiğinde sayfaya bir element eklemekten ibaret.

Projenin demosu(gizli kelime "merhaba") : Demo

Başlangıç dosyalarını bulabileceğiniz repom: js-30 | github

Çözümüm

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Key Detection</title>
<link rel="icon" href="https://fav.farm/✅" />
</head>
<body>
<h1>Gizli kelimeyi gir!</h1>    
<script>
const secret = "merhaba"
const pressed = []
 
function checkSecret(e){
// basılan tuşu arrayin sonuna ekleyelim
pressed.push(e.key)
 
// arrayin uzunlugunu gizli kelimenin uzunlugu kadar sınırlandıralım ki gereksiz yere büyümesin
pressed.splice(-secret.length -1 , pressed.length - secret.length)
 
 
// arraydeki son 7 karakteri(çünkü gizli kelimemiz 7 karakter) alıp gizli kelime ile karşılaştıralım
const word = pressed.slice(-secret.length).join('')
 
if(word === secret){
  // eğer girilen kelime gizli kelimeyse DOM'a bir h1 ekler
  const message = document.createElement('h1')
  message.innerText = "Gizli kelimeyi girdiniz! Tebrikler 👍!"
  document.body.appendChild(message)
}
 
}
 
window.addEventListener("keyup",checkSecret)
 
</script>
</body>
</html>

Bu sayfayı düzenle