Panduan Lengkap Belajar Menaip

KOD SUMBER

<!DOCTYPE html>

<!--

=============================

Program Latihan Menaip v1.0

=============================

Jika ada kemusykilan, sila hubungi mfauzy:

https://sites.google.com/view/mfauzy/

https://facebook.com/ebuku.mfauzy/

https://youtube.com/@mfauzy

-->

<head>

<style>

h1

{

color: white;

padding: 20px;

font-size: 4vw;

font-family: "Noto Mono";

background-color: #bb0000;

}

p

{

font-size: 4vw;

font-family: "Noto Mono";

}

button

{

border-radius:2px;

box-shadow: 5px 5px 6px grey;

}

label

{

color: #191970;

font-size: 3vw;

padding-top: 25px;

font-weight: bold;

font-family: "Noto Mono";

}

textarea

{

resize:none;

outline:none;

}

textarea::placeholder

{

color: #cccccc;

font-size: 4vw;

font-family: "Tahoma";

}

.ruang-utama

{

margin: 0 auto;

max-width: 90%;

}

#teks-contoh

{

color: white;

margin: 2em 0;

font-weight: bold;

text-align: center;

border-radius:20px;

border: 2px solid #222222;

background-color: #191970;

}

.ruang-menaip

{

display: flex;

align-content: center;

}

.ruang-menaip textarea

{

flex: 1;

font-size: 4vw;

padding-top: 30px;

text-align: center;

}

fieldset

{

padding: 15px;

color: yellow;

padding-top: 15px;

background-color: black;

}

.paparan-masa

{

color: black;

display: flex;

flex-wrap: wrap;

margin-top: 1em;

font-size: 3.5vw;

justify-content: space-between;

}

#butang-semula

{

padding: 15px;

color: #191970;

font-size: 3vw;

margin: 0.1em 0;

font-weight: bold;

border-color: #B0E0E6;

font-family: "Noto Mono";

background-color: #B0E0E6;

}

#butang-semula:hover

{

color: white;

border-radius:2px;

border-color: blue;

background-color: #0000CD;

}

</style>

</head>

<body>

window.onload = function()

{

const RuangMenaip = document.querySelector(".ruang-menaip");

const TeksLatihan = document.querySelector("#teks-latihan");

const ButangSemula = document.querySelector("#butang-semula");

var TeksContoh = document.querySelector("#teks-contoh p").innerHTML;

var SelangMasa;

var offset = 0;

var MasaBerjalan = false;

TeksLatihan.value = "";

function format(value, scale, modulo, padding)

{

value = Math.floor(value / scale) % modulo;

return value.toString().padStart(padding, 0);

}

function Pemasa()

{

var masa = Date.now() + offset;

var nilaims = format(masa, 1, 1000, 3);

document.querySelector('#minit').textContent = format(masa, 60000, 60, 2);

document.querySelector('#saat').textContent = format(masa, 1000, 60, 2);

document.querySelector('#milisaat').textContent = nilaims.substring(0,2);

}

function PeriksaTeks()

{

let TeksDitaip = TeksLatihan.value.toLowerCase();

let Sepadan = TeksContoh.substring(0,TeksDitaip.length);

if (TeksDitaip == TeksContoh)

{

clearInterval(SelangMasa);

RuangMenaip.style.boxShadow = "0px 1px 8px 5px green";

}

else

if (TeksDitaip == Sepadan)

RuangMenaip.style.boxShadow = "0px 2px 8px 5px grey";

else

RuangMenaip.style.boxShadow = "0px 1px 8px 5px #FF0000";

}

function Mula()

{

let PanjangTeks = TeksLatihan.value.length;

if (PanjangTeks === 0 && !MasaBerjalan)

{

MasaBerjalan = true;

SelangMasa = setInterval(Pemasa, 50);

offset -= Date.now();

}

console.log(PanjangTeks);

}

function Semula()

{

clearInterval(SelangMasa);

MasaBerjalan = false;

offset = 0;

TeksLatihan.value = "";

RuangMenaip.style.boxShadow = "0px 1px 5px 5px white";

document.querySelector('#minit').textContent = "00";

document.querySelector('#saat').textContent = "00";

document.querySelector('#milisaat').textContent = "00";

}

function Susunan() {

var rentetan = "";

var huruf = "";

var abjad = "abcdefghijklmnopqrstuvwxyz";

if (pilihan[0].checked)

{

document.querySelector('#teks-contoh p').textContent = "abcdefghijklmnopqrstuvwxyz";

TeksContoh = "abcdefghijklmnopqrstuvwxyz";

}

else if (pilihan[1].checked)

{

document.querySelector('#teks-contoh p').textContent = "zyxwvutsrqponmlkjihgfedcba";

TeksContoh = "zyxwvutsrqponmlkjihgfedcba";

}

else

{

for (var i = 0; i < 26; i++)

{

huruf = abjad[Math.floor(Math.random() * abjad.length)];

rentetan += huruf;

abjad = abjad.replace(huruf,'');

}

document.querySelector('#teks-contoh p').textContent = rentetan;

TeksContoh = rentetan;

}

Semula();

}

var pilihan = document.getElementsByName("susunan");

pilihan[0].addEventListener('click', Susunan, false);

pilihan[1].addEventListener('click', Susunan, false);

pilihan[2].addEventListener('click', Susunan, false);

pilihan[0].addEventListener('touchstart', Susunan, false);

pilihan[1].addEventListener('touchstart', Susunan, false);

pilihan[2].addEventListener('touchstart', Susunan, false);

TeksLatihan.addEventListener("keypress", Mula, false);

TeksLatihan.addEventListener("keyup", PeriksaTeks, false);

ButangSemula.addEventListener("click", Semula, false);

TeksLatihan.addEventListener("touchstart", Mula, false);

TeksLatihan.addEventListener("touchend", PeriksaTeks, false);

ButangSemula.addEventListener("touchstart", Semula, false);

};

</script>

<br>

<center><h1><b>PROGRAM LATIHAN MENAIP</b></h1></center>

<p>abcdefghijklmnopqrstuvwxyz</p>

</div>

</div>

</fieldset>

<label><input type="radio" name="susunan" /> rawak</label>

<button id="butang-semula">Semula</button>

</div>

</section>

</main>

<br>

     <font size=4><b>PANDUAN</b></font>

<br/>

<ul>

<li>Latihan ini memerlukan <b>papan kekunci</b> fizikal.

<li>Taip huruf mengikut <b>turutan</b> seperti yang dipaparkan.

<li>Terdapat tiga <b>pilihan</b> susunan iaitu mengikut abjad, mengundur atau rawak.

<li>Catatan masa bermula sebaik sahaja kekunci ditekan.

<li>Warna <b>merah</b> akan kelihatan jika turutan tidak dipatuhi.

<li>Padam kemudian taip huruf yang <b>betul</b> hingga selesai.

<li>Klik <b>[Semula]</b> untuk mula dari awal.

<li>Latihan boleh dilakukan tanpa perlu masuk ke laman sesawang.

<li>Salin <b>kod sumber</b> kemudian simpan ke dalam fail baru di dalam komputer anda.

<li>Nama fail mesti mempunyai penambahan <b>html</b> misalnya <b>latihan.html</b>.

<li>Klik dua kali fail ini atau buka dengan sebarang pelayar internet.

</ul>

</font>

</body>

</html>

Muat Turun Kod Sumber

[Home] [Gambar] [E-Buku] [Video]