JAVASCRIPT - somo la 24: Jinsi ya kutengeneza online keyboard

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>

 

 


 

...

Download App Yetu

Jifunze zaidi, na wasiliana nasi ukiwa na App yetu. Bofya link hapo chini kuweza kuipakua.

Download Now Bongoclass

Nyuma Endelea


Umeionaje Makala hii.. ?

Nzuri            Mbaya            Save
Author: Rajabu image Tarehe: 1970-01-01 03:33:44 Topic: JavaScript Main: ICT File: Download PDF Views 615

Share On:

Facebook WhatsApp
Sponsored links
👉1 Kitau cha Fiqh    👉2 Bongolite - Game zone - Play free game    👉3 Simulizi za Hadithi Audio    👉4 Sira ya Mtume Muhammad (s.a.w)    👉5 kitabu cha Simulizi    👉6 Kitabu cha Afya   

Post zinazofanana:

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 7: Jinsi ya kutumia logical operator kwenye javascript

Katika somo hili utakwenda kujifunza jinsi ya kutumia logical operator kwenye javascript. Katika somo hili tutakwenda kutumia mahesabu.

Soma Zaidi...
JAVASCRIPT - somo la 17: condition statement za if else, else if kwenye javascript

Katika somo hili tutakwenda kujifunza kuhusu condition statemant. Darasa hili ni moja katika madarasa muhimu programming. Katika somo hili tutajifunza kwa vitendo zaidi. Tutatumia mifano ya somo lililo tangulia.

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...
Game 3: Mchezo wa kufikiria namba kwa kutumia javascript

Hii ni game ambayo utafikiria namba, ambayo inatakiwa iwe sawa na namba ambayo game imeiweka.

Soma Zaidi...
JAVASCRIPT - somo la 9: Jinsi ya kuandika function kwenye javascript

Katika somo hili utakwenda kujifunza jinsi ya kuandika function kwenye javascript. Utajifunz apia namna ya kuitumia function hiyo

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 8: Aina za data zinazotumika kwenye javascript

Katika somo hili utakwenda kujifunza kuhusu aina za data ambazo hutumika kwenye 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...