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 709

Share On:

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

Post zinazofanana:

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 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...
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 22: Jinsi ya ku set time na tarehe

Katika somo hili tutakwenda kujifunza kuhusu ku set time. Yaani tutaweka muda ambao code zinatakiwa ndio zilete matokeo.

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...
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 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 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 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 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...