Altın Konu Html Css Ve JavaScript Kullanarak Karakter Sayısı Oluşturun!

[ByMoDuS]

HERAKLES Otomatik Avlı kalıcı sunucu. 19 Haziran'da açılıyor. Atius & Wizard güvencesiyle hemen kayıt ol, ön kayıt ödülleri aktif. HEMEN TIKLA!

Html Css Ve JavaScript Kullanarak Karakter Sayısı Oluşturun!​

Karakter sayısı temel olarak metin kutusuna yazdığınız kelimeleri sayan bir şeydir. Örneğin Microsoft Word'de sol alt köşede yazdığınız kelimenin sayıldığını görmüşsünüzdür. Burada, girilecek her kelimeyi sayacak bir karakter sayısı oluşturacağız. Bu projeyi yapmak için hepinizin HTML5, CSS3 ve temel JavaScript bilgisine sahip olmanız gerekir, çünkü projemizi duyarlı ve projenizin önemli bir parçası haline getirecektir.​

[CODE lang="html" title="Karakter Sayısı için HTML Kodu:"]<div id="container">
<h1 id="title">Count Your Characters</h1>
<textarea id="textbox" cols="80" rows="15"></textarea>
<p id="charCount">Character Count: <span id="count">0</span></p>
</div>[/CODE]

Verdiğimiz çok küçük bir HTML kodu. Belirli uzunlukta satır ve sütun içeren bir metin alanı ekledik. Ve karakter Sayısı olarak etiketlenmiş bir p etiketi ve daha sonra kullanılacak olan count kimliğine sahip bir span etiketi tanımlandı.​

[CODE lang="css" title="Karakter Sayısı için CSS Kodu:"]* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}

#container {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 10px solid #0065a3;
background: hsla(203, 100%, 78%, 1);
}

#title {
margin-bottom: 20px;
color: #0065a3;
}

#textbox {
margin-bottom: 20px;
font-size: 16px;
letter-spacing: 0.8px;
padding: 10px;
}

#charCount {
font-size: 20px;
color: #0065a3;
font-weight: bold;
}[/CODE]

Stil bölümünde, HTML Kodunda belirtilen etiketleri ve id'yi stilize ettik. Temel olarak, sadece yazı tipi boyutunu, yazı tipi ağırlığını, kenar boşluğunu, kenarlığı, öğeleri hizalamayı vb. ayarladık. Böylece yapı oluşturuldu, şekillendirme yapıldı, şimdi duyarlı hale getirmek için Java Dilinde komut dosyası yazmamız gerekiyor.​

[CODE lang="javascript" title="Karakter Sayısı için JavaScript Kodu:"]let textbox = document.getElementById("textbox");
let count = document.getElementById("count");

function updateCount() {
count.innerHTML = textbox.value.length;
}

textbox.oninput = updateCount;[/CODE]

Sadece temel JavaScript bilgisine ihtiyacınız var çünkü bu proje yeni başlayanlar ve ön uç geliştirmeyi sıfırdan öğrenenler için en iyisidir. Bu scriptte textbox'a isim verdik ve document.getElementById'de saydık Şimdi sloganımız bir sayım oluşturmak ve bunun için Karakter Sayısı etiketi biz karakter girdikçe güncellenmelidir. Bunun için updatecount() fonksiyonunu yazdık ve bu fonksiyon karakteri girdiğimiz anda sayıyı artırıyor.

​

 

[EJDER]

Paylaşım için teşekkürler.

 

[ByMoDuS]

Paylaşım için teşekkürler.

Değerli yorumunuz için teşekkür ederim.

 

[DN Angel]

eline sağlık

 

[Kehanet]

Paylaşım için teşekkürler, eline sağlık