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>

 

 


 

...

Jiunge nasi WhatsApp kupata update zetu

Zoezi la Maswali

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 710

Share On:

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

Post zinazofanana:

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 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 14: Jifunze kuhusu event kwenye javascript

Katika somo hili utakwenda kujifunza kuhusu javascript events. Event ni neno la Kiingereza lenye maana tukio wingi wake events kumaanisha matukio. Natumia ni kila ambacho kinatokea kwenye javascript.

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...
JAVASCRIPT - somo la 19: Jinsi ya kutumia loop kwenye javascript

Katika somo hilibtutakwenda kujifunza kuhusu loop. Katika programming tunaposema loop tunamaanisha ile hali ya program ku excute code zaidi na zaidi. Tofauti na kurudia rudia kuandika statement moja kwa ajili ya kupata matokeoa hayohayo basi unapotumia lo

Soma Zaidi...
JAVASCRIPT - somo la 5: Jinsi ya kupangilia maandishi wakati wa ku output kwenye javascript

Katika somo hili utajifunza jinsi ya kupangilia muonekano wa maandishi (text) wakati wa ku out put matokeo ya code

Soma Zaidi...
JAVASCRIPT - somo la 12: Function zinazotumika kwenye namba

Katika somo hili utajifunz kuhusu baadhi ya function ambazo hutumika kwenye namba

Soma Zaidi...
JAVASCRIPT - somo la 21: Jinsi ya kutumia while loop na do while loop

Katika somo hili tutakwenda kujifunza khusu while loop na do while loop.

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 20 Jinsi ya kutumia foOfloop kwenye javascript

Katika somo hili utajifunza jinsi ya kutumia forOfLoop. Hii ni aina ya loop ambayo yenyewe inahusisha item zote kwenye array.

Soma Zaidi...