KOD SUMBER
KOD SUMBER
<!DOCTYPE html>
<html lang="ms-MY">
<!--
=============================
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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<script>
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>
<main class="utama">
<section class="ruang-utama">
<div id="teks-contoh">
<p>abcdefghijklmnopqrstuvwxyz</p>
</div>
<div class="ruang-menaip">
<textarea id="teks-latihan" name="textarea" maxlength="26" placeholder="Taip semua huruf di atas"></textarea>
</div>
<div class="paparan-masa">
<fieldset>
<span id="minit">00</span>:<span id="saat">00</span>.<span id="milisaat">00</span>
</fieldset>
<label><input type="radio" name="susunan" checked /> a-z</label>
<label><input type="radio" name="susunan" /> z-a</label>
<label><input type="radio" name="susunan" /> rawak</label>
<button id="butang-semula">Semula</button>
</div>
</section>
</main>
<br><br>
<hr width=95%>
<br>
<font face="Mulish">
<font size=4><b>PANDUAN</b></font>
<br/>
<ul>
<li>Latihan ini memerlukan <b>papan kekunci</b> fizikal.
<br/><br/>
<li>Taip huruf mengikut <b>turutan</b> seperti yang dipaparkan.
<br/><br/>
<li>Terdapat tiga <b>pilihan</b> susunan iaitu mengikut abjad, mengundur atau rawak.
<br/><br/>
<li>Catatan masa bermula sebaik sahaja kekunci ditekan.
<br/><br/>
<li>Warna <b>merah</b> akan kelihatan jika turutan tidak dipatuhi.
<br/><br/>
<li>Padam kemudian taip huruf yang <b>betul</b> hingga selesai.
<br/><br/>
<li>Klik <b>[Semula]</b> untuk mula dari awal.
<br/><br/>
<li>Latihan boleh dilakukan tanpa perlu masuk ke laman sesawang.
<br/><br/>
<li>Salin <b>kod sumber</b> kemudian simpan ke dalam fail baru di dalam komputer anda.
<br/><br/>
<li>Nama fail mesti mempunyai penambahan <b>html</b> misalnya <b>latihan.html</b>.
<br/><br/>
<li>Klik dua kali fail ini atau buka dengan sebarang pelayar internet.
<br/><br/>
</ul>
</font>
</body>
</html>