JSFiddle - React, Tailwind, and code Playground
by Michael Prosser
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>
<div class="keyboard">
<input type="text" class="keyboard-input" placeholder="Search.." />
<div class="key-row">
<span data-normal="`" data-shift="~"></span>
<span data-normal="1" data-shift="!"></span>
<span data-normal="2" data-shift="@"></span>
<span data-normal="3" data-shift="#"></span>
<span data-normal="4" data-shift="$"></span>
<span data-normal="5" data-shift="%"></span>
<span data-normal="6" data-shift="^"></span>
<span data-normal="7" data-shift="&"></span>
<span data-normal="8" data-shift="*"></span>
<span data-normal="9" data-shift="("></span>
<span data-normal="0" data-shift=")"></span>
<span data-normal="-" data-shift="_"></span>
<span data-normal="=" data-shift="+"></span>
<span data-normal="delete" data-shift="delete"></span>
</div>
<div class="key-row">
<span data-normal="" data-shift="" class="key-empty"></span>
<span data-normal="q" data-shift="Q"></span>
<span data-normal="w" data-shift="W"></span>
<span data-normal="e" data-shift="E"></span>
<span data-normal="r" data-shift="R"></span>
<span data-normal="t" data-shift="T"></span>
<span data-normal="y" data-shift="Y"></span>
<span data-normal="u" data-shift="U"></span>
<span data-normal="i" data-shift="I"></span>
<span data-normal="o" data-shift="O"></span>
<span data-normal="p" data-shift="P"></span>
<span data-normal="[" data-shift="{"></span>
<span data-normal="]" data-shift="}"></span>
<span data-normal="\" data-shift="|"></span>
</div>
<div class="key-row">
<span data-normal="" data-shift="" class="key-empty"></span>
<span data-normal="a" data-shift="A"></span>
<span data-normal="s" data-shift="S"></span>
<span data-normal="d" data-shift="D"></span>
<span data-normal="f" data-shift="F"></span>
...
CSS
html{
height:100%
}
body{
perspective:500px;
height:100%;
margin:0px;
background-color:#000;
}
.keyboard{
position:absolute;
top:50%;
left:50%;
font-family:Helvetica;
font-size:17px;
width:500px;
display:table;
margin-left:-250px;
border-spacing: 4px;
border-collapse: separate;
border:solid 1px #fff;
color:#fff;
background-color:rgba(0,0,0,0.7);
transform-style:preserve-3d;
backface-visibility:hidden;
padding:10px;
transform:rotateX(15deg);
transform-origin:50% 0%;
}
.keyboard .keyboard-input{
position: absolute;
left: -1px;
top: -45px;
color:#fff;
padding: 10px;
font-size: 21px;
background-color: rgba(2, 176, 243, 0.7);
display: block;
width: 100%;
padding-left: 0px;
padding-right: 0px;
border: solid 1px #fff;;
text-align: center;
transform: rotateX(-15deg);
transform-origin:50% 100%;
}
.keyboard .keyboard-input::placeholder{
color:#fff;
}
.keyboard>.key-row{
display:table-row;
width:auto;
}
.keyboard>.key-row>span{
display:table-cell;
padding:5px;
border:solid 1px #fff;
text-align:center;
background-color:rgba(0,0,0,0.5);
transition:all .3s;
cursor:pointer;
}
.keyboard>.key-row>span.key-empty{
border:none;
pointer-events:none;
background-color:transparent;
}
.keyboard>.key-row>span:hover{
transform:translateZ(15px);
background-color:rgba(0,0,200,0.3);
}
.keyboard.shift-on>.key-row>span{
transform:translateZ(20px);
}
.keyboard.shift-on>.key-row>span[data-normal="shift"]{
transform:translateZ(15px);
background-color:rgba(0,0,200,0.3);
}
JavaScript
var keys = {
value: '',
shift_on: false,
shift_toggle: function(){
$('.keyboard').toggleClass('shift-on');
if(this.shift_on){
this.shift_on = false;
$('.keyboard>.key-row>span').each(function(){
$(this).text($(this).attr('data-normal'));
});
} else {
this.shift_on = true;
$('.keyboard>.key-row>span').each(function(){
$(this).text($(this).attr('data-shift'));
});
}
},
callback: function(){
alert("You need to set the callback function for the keys class. The callback is the only parameter passed to the keys.init method.");
},
init: function(callback){
if(callback){
this.callback = callback;
}
$('.keyboard>.key-row>span').each(function(){
$(this).text($(this).attr('data-normal'));
if($(this).attr('data-normal') == 'shift'){
$(this).click(function(){
keys.shift_toggle();
})
} else if($(this).attr('data-normal') == 'return'){
$(this).click(function(){
keys.callback();
})
} else if($(this).attr('data-normal') == 'delete'){
$(this).click(function(){
var c = $('.keyboard>.keyboard-input').val();
$('.keyboard>.keyboard-input').val(c.substr(0,c.length-1));
keys.value = $('.keyboard>.keyboard-input').val();
})
} else {
$(this).click(function(){
$('.keyboard>.keyboard-input').val($('.keyboard>.keyboard-input').val() + $(this).text());
keys.value = $('.keyboard>.keyboard-input').val();
});
}
});
}
}
function searchByKeyword(query) {
var request = gapi.client.youtube.search.list({
q: query,
part: 'snippet'
});
}
keys.init(function(){
searchByKeyword(keys.value);
});