Bootstrap Snippet Arabic Keyboard using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div id="app">
        <div class="container">
            <div class="jumbotron">
                <h1>Arabic Keyboard</h1>
                <Screen></Screen>
                <Keyboard 
                    :numerals="numerals"
                    :keys="keys"
                    :special="special"
                    :remaining="remaining"
                    >
                </Keyboard>
            </div>
        </div>
    </div>
    <template id="screen">
        <div id="screen-component">
        <textarea placeholder="...Waiting for input" readonly dir="rtl" class="form-control" rows="5" autofocus>{{letters}}</textarea>
        </div>
    </template>
    <template id="keyboard">
        <div id="keyboard-component">
            <tr>
                <div id="numbers">
                <span v-for="number in numerals">
                    <button id="nums" @click="addLetter(number.l)">{{number.l}}</button>
                </span>
                </div><br>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
textarea{
    resize: none;
}
.form-control{
    cursor: text !important;
    background-color: white !important;
    font-size: 30px !important;
    border: 1px solid darkgray !important;
    box-shadow: 2px 2px 2px gray !important;
}
#keyboard-component{
    margin-top: 15px;
}
h1{
    text-align: center;
    font-family: 'Lato', sans-serif !important;
    color: black !important;
}
#key{
    width: 90px;
    height: 50px;
    margin-left: 5px;
    margin-top: 5px;
    text-shadow: 2 2px 2 lightgray;
    color: white;
    font-size: 25px;
    font-weight: bolder;
    background-color: black;
    border-radius: 5px;
    border: 1px solid darkgray;
    border: 1px solid darkgray;
    box-shadow: 5px 5px 10px gray;
}
#sp{    
    margin-left: 20%;
    margin-top: 10px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
const KEYS = [
    
    {l: 'ض'}, {l: 'ص'}, {l: 'ق'}, {l: 'ف'}, {l: 'غ'}, {l: 'ع'}, {l: 'ه'}, {l: 'خ'}, {l: 'ح'}, {l: 'ج'},
    {l: 'ش'}, {l: 'س'}, {l: 'ي'}, {l: 'ب'}, {l: 'ل'}, {l: 'ا'}, {l: 'ت'}, {l: 'ن'}, {l: 'م'}, {l: 'ك'},
    {l: 'ظ'}, {l: 'ط'}, {l: 'ذ'}, {l: 'د'}, {l: 'ز'}, {l: 'ر'}, {l: 'و'}, {l: 'ة'}, {l: 'ث'}, {l: 'ى'},
    {l: 'Clear'},{l: '!'},{l: '.'},{l: 'ئ'}, {l: 'ء'}, {l: 'ؤ'}, {l: 'لا'}, {l: '،'},{l: '؟'},{l: 'Delete'}
]
const NUMERALS = [
    {l: '١'}, {l: '٢'}, {l: '٣'}, {l: '٤'}, {l: '٥'}, {l: '٦'}, {l: '٧'}, {l: '٨'}, {l: '٩'}, {l: '٠'}
]
const SPECIAL_KEYS = [
      {k: 'Space'}
]
var store = {
    state: {
        words: []
    },
    clearScreen: function(){
        return this.state.words.splice(0)
    },
    backspace: function(){
        var position = this.state.words.length
        return this.state.words.splice(position - 1, 1)
    }
}
Vue.component('Screen', {
    template: '#screen',
    data: function() {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Arabic Keyboard"
Bootstrap 4.1.1 Snippet by harunpehlivan

Related: See More

Questions / Comments:

"Arabic Keyboard" Bootstrap 4.1.1 Snippet by harunpehlivan

Related: See More

Questions / Comments:

"Arabic Keyboard"
Bootstrap 4.1.1 Snippet by harunpehlivan