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
Rajabu 
Tarehe 2024-05-10 14:53:23 Topic: JavaScript
Main: Project
File: Download PDF
Share On
Facebook
or
Whatsapp
Imesomwa mara 449
Sponsored links
👉1 Kitabu cha Afya
👉2 Kitau cha Fiqh
👉3 Sira ya Mtume Muhammad (s.a.w)
👉4 Simulizi za Hadithi Audio
👉5 Madrasa kiganjani
👉6 kitabu cha Simulizi
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 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...
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 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 12: Function zinazotumika kwenye namba
Katika somo hili utajifunz kuhusu baadhi ya function ambazo hutumika kwenye namba Soma Zaidi...
JAVASCRIPT - somo la 16: Jinsi ya kutumia html form kwenye javascript
Katika somo hili utakwenda kujifunza jinsi ya ku dili na html form kwenye javascript. Javascript inaweza kufanya mengi kwenye html form. 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 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...
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 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 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 6: Jinsi ya kufanya mahesabu kwenye javascript
Katika somo hili utajifunza kuhusu matendo ya hesabu ambayo ni kugawanya, kujumlisha, kuzidisha na kutoa Soma Zaidi...