Katika project hii utakwenda kufunza jinsi utakavyoweza kutengeneza keyboard ya online kwa kutumia javascript
PROJECT YA KUTENGENEZA ONLINE KEYBOARD:
Kama umeshawahi kuona katika huduma za kibenk unaweza kukuta kuwa kuna online keyboard kwa ajili ya kulinda usalama endapo kuna program ambayo inachukuwa taarifa za keyboard kwenye kompyuta ama simu ya mtu.
Program hii tutaitengenza kutokana na program ya calculator ambayo tulishaiona kwenye masomo yaliotangulia.
<html>
<head>
<title>Mafunzo ya javascript</title>
<style>
.button {
font-size: 24px;
padding: 10px;
margin: 5px;
border-radius: 5px;
background-color: #f1f1f1;
color: #333;
border: none;
cursor: pointer;
}
.button2 {
font-size: 24px;
padding: 10px;
margin: 5px;
border-radius: 5px;
background-color: #0bcaec;
color: rgb(0, 0, 0);
border: none;
cursor: pointer;
}
button:hover {
background-color: #ddd;
}
#input {
font-size: 24px;
padding: 10px;
margin: 5px;
border-radius: 5px;
border: 1px solid #ddd;
}
</style>
</head>
</html>
<body>
<textarea id="input"></textarea>
<br />
<button class="button" onclick="addChar('q')">q</button>
<button class="button" onclick="addChar('w')">w</button>
<button class="button" onclick="addChar('e')">e</button>
<button class="button" onclick="addChar('r')">r</button>
<button class="button" onclick="addChar('t')">t</button>
<button class="button" onclick="addChar('y')">y</button>
<button class="button" onclick="addChar('u')">u</button>
<button class="button" onclick="addChar('i')">i</button>
<button class="button" onclick="addChar('o')">o</button>
<button class="button" onclick="addChar('p')">p</button>
<br />
<button class="button" onclick="addChar('a')">a</button>
<button class="button" onclick="addChar('s')">s</button>
<button class="button" onclick="addChar('d')">d</button>
<button class="button" onclick="addChar('f')">f</button>
<button class="button" onclick="addChar('g')">g</button>
<button class="button" onclick="addChar('h')">h</button>
<button class="button" onclick="addChar('j')">j</button>
<button class="button" onclick="addChar('k')">k</button>
<button class="button" onclick="addChar('l')">l</button>
<button class="button2" onclick="addChar('+')">+</button>
<br />
<button class="button" onclick="addChar('z')">z</button>
<button class="button" onclick="addChar('x')">x</button>
<button class="button" onclick="addChar('c')">c</button>
<button class="button" onclick="addChar('v')">v</button>
<button class="button" onclick="addChar('b')">b</button>
<button class="button" onclick="addChar('n')">n</button>
<button class="button" onclick="addChar('m')">m</button>
<button class="button2" onclick="addChar('-')">-</button>
<button class="button2" onclick="addChar('=')">=</button>
<button class="button2" onclick="addChar('/')">/</button>
<br />
<button class="button" onclick="backspace()">Delete</button>
<button class="button" onclick="addChar(' ')">Space</button>
<button class="button" onclick="clearInput()">Clear</button>
<button class="button2" onclick="addChar('?')">?</button>
<button class="button2" onclick="addChar(',')">,</button>
<button class="button2" onclick="addChar('.')">.</button>
<br>
<script>
function addChar(char) {
document.getElementById("input").value += char;
}
function backspace() {
var input = document.getElementById("input");
input.value = input.value.slice(0, -1);
}
function clearInput() {
document.getElementById("input").value = "";
}
</script>
</body>
</html>
...
Je! umeipenda hii post?
Ndio Hapana Save post
Kama unahitaji kuuliza maswali Bofya hapa
Mwandhishi Tarehe 2023-10-20 Download PDF Share On Facebook or Whatsapp Imesomwa mara 186
Download our Apps
👉1 Kitabu cha Afya
👉2 kitabu cha Simulizi
👉3 Kitau cha Fiqh
👉4 Madrasa kiganjani
JAVASCRIPT -somo la 1: Kwa nini ni muhimu kujifunza javascript
Katika somo hili utajifunza kuhusu historia ya javacsript pamoja na kazi za javascript. Pia utayajuwa makampuni makubwa yanayotumia javascript. Soma Zaidi...
JAVASCRIPT - somo la 11: function maalumu zinazotumika kwenye string yaani string method
Katika somo hili utakwenda kujifunza baadhi ya function maaumu zinazotumika kwenye string yaani string method. Soma Zaidi...
JAVASCRIPT - somo la 23: Jinsi ya kutengeneza calculator yaani kikokotoo cha hesabu kwa kutumia javascript
Katika somo hili utakwenda kujifunza jinsi ambavyo utaweza kutumia javascript kutengeneza kikokotoo cha hesabu yaani calculator Soma Zaidi...
JAVASCRIPT - somo la 3: sheria za uandishi wa code za javascript yaani syntax za javascript
Katika somo hili utakwenda kujifunza sheria ama syntax za kuandika javascript. Hii itakuwezesha kuelwa zaidi code za javascript. Soma Zaidi...
JAVASCRIPT - somo la 4: Jinsi ya kuandika variable kwenye javascript
Katika somo hili utajifunza jinsi ya kuandika variable. Hapa utajifunza sheria zinazohusu variable katika javascript Soma Zaidi...
JAVASCRIPT - somo la 18: Jinsi ya kutumia switch case kwenye javascript
Kwa kutumia mfano huu na iliyotangulia unaweza kuweka masharti kadiri uwezavyo. Tukutane somo linalofuata tutajifunza kuhusu switch statement. Soma Zaidi...
JAVASCRIPT - somo la 6: Jinsi ya kufanya mahesabu kwenye javascript
Katika somo hili utajifunza kuhusu matendo ya hesabu ambayo ni kugawanya, kujumlisha, kuzidisha na kutoa Soma Zaidi...
JAVASCRIPT - somo la 15: Jinsi ya kukusanya user input
Katika somo hili tutakwenda kujifunza kuhusu user input. Somo hili litaangalia html form na attribute zake na jinsi zinavyohusiana na user input. Mwisho wa somo hili utaweza kutengeneza simple Calculator kwa kutumia javascript. Soma Zaidi...
Game 1: Jinsi ya kutengeneza game ya tic toc ya wachezaji wawili kwa kutumia html, css na javascript
Katika post hii utakwenda kujifundisha jinsi ya kutengeneza game ya tic toc ya wachezaji wawii kwa utumia html, css na javascript Soma Zaidi...
JAVASCRIPT - somo la 12: Function zinazotumika kwenye namba
Katika somo hili utajifunz kuhusu baadhi ya function ambazo hutumika kwenye namba Soma Zaidi...
Game 2: Jinsi ya kutengeneza tic toc game ya single player kwa kutumia javascript, html na css
Katika post hii utakwenda kujifunza kutengeneza game ya tic toc ya mchezaji mmoja na kompyuta yaani single player Soma Zaidi...
JAVASCRIPT - somo la 13: Function zinazofanya kazi kwenye array.
Katika somo hili tutakwenda kujifunza kuhusu array pamoja na method zinazohusiana na array. Pia nitakujuza tena kuhusu array ni nini. Utajifunza pia jinsi ya kutengeneza array. Soma Zaidi...