index.html

<script src="https://codad5.github.io/keybinder/lib/keybinder.js"></script>
<script src="lib/keybinder.beta.js"></script>
<h1>Key Binder</h1>
<div id="bcdiv"><strong>Press B+G: </strong></div>
<div id="scdiv"><strong>Press Shift+C: </strong></div>
<div id="spacediv"><strong>Press the SpaceBar: </strong></div>
<button type="button" class="stopStart">Stop</button>
<p>
    <h2>To know your key Name Press the key and see combination below!</h2>
    <ol id="keystrokehistory">

    </ol>
</p>    
<!-- <script type="module" src="./out/keybinder.js" rel="preload"></script> -->
<!-- <script src="./cdn/keybinder@1.0.0.js"></script> -->
<script defer>
    var stopped = false
    const keyController = new KeyBinder({
    default_listener: 'keyup',
    element: window,
    // case_sensitive:true
    }),
    ksh = document.querySelector('#keystrokehistory')

    // const ListenToKey = (key, data) => keyController.ListenToKey(key, data)
    document.querySelector('.stopStart').addEventListener('click', (e) => {
        !stopped ? keyController.stopListening() : keyController.continue(true)
        stopped = !stopped
        if(stopped) return e.target.innerHTML = 'start'
        e.target.innerHTML = 'stop'
    })
    const ListenToKey = (key, ...data) => keyController.ListenToKey(key, ...data)
    
    ListenToKey('B+G', () => console.log("bye"), () => {
        console.log('%cThanks for using this by https://github.com/codad5 && https://github.com/ptbysr', 'background:blue;color:white;width:100%;height:50px;font-size:20px;')
        document.querySelector('#bcdiv').innerHTML += 'Your Called me ?'
    })
    ListenToKey('shift+c',  () => {
        console.log('%cThanks for using this by https://github.com/codad5 && https://github.com/ptbysr', 'background:blue;color:white;width:100%;height:50px;font-size:20px;')
        document.querySelector('#scdiv').innerHTML += 'Do you mean Ctrl+c? try Ctrl+c'
    })
    ListenToKey('shift+z',  () => {
        console.log('ending the controller listening')
        keyController.stopListening()
        stopped = !stopped
        document.querySelector('#scdiv').innerHTML += 'No more Listening!'
        if(stopped) return document.querySelector('.stopStart').innerHTML = 'start'
        document.querySelector('.stopStart').innerHTML = 'stop'
    })
    ListenToKey('shift+enter','j+j', 'shift+v', (data) => {
        console.log('%cThanks for using this by https://github.com/codad5 && https://github.com/ptbysr', 'background:blue;color:white;width:100%;height:50px;font-size:20px;')
        console.table({...data, element: 'Window'})
        confirm('Do you need more information?')
    })
    ListenToKey('shift+space', 'space', (data) => {
        // console.log('%cThanks for using this by https://github.com/codad5 && https://github.com/ptbysr', 'background:blue;color:white;width:100%;height:50px;font-size:20px;')
        document.querySelector('#spacediv').innerHTML += 'la'
        document.querySelector('#keystrokehistory').innerHTML += `<li>Your  combination is ${data.combination} </li>`
    })
    ListenToKey('shift+s', (data) => {
        console.log('%cThanks for using this by https://github.com/codad5 && https://github.com/ptbysr', 'background:blue;color:white;width:100%;height:50px;font-size:20px;')
    })
    ListenToKey('shift+meta', (data) => {
        // console.log('%cThanks for using this by https://github.com/codad5 && https://github.com/ptbysr', 'background:blue;color:white;width:100%;height:50px;font-size:20px;')
        if(alert('Dont press the windows key again')) return
    })
    ListenToKey('ctrl+b', (data) => {
        // console.log('%cThanks for using this by https://github.com/codad5 && https://github.com/ptbysr', 'background:blue;color:white;width:100%;height:50px;font-size:20px;')
        confirm('bold combination')
    })
    ListenToKey('arrowup', (data) => {
        // console.log('%cThanks for using this by https://github.com/codad5 && https://github.com/ptbysr', 'background:blue;color:white;width:100%;height:50px;font-size:20px;')
        document.querySelector('#keystrokehistory').innerHTML += `<li>Your  combination is ${data.combination} </li>`
        if(confirm('arrowup combination')) window.clientInformation.wakeLock.request()
    })
    
    ListenToKey('***', (data) => {
        // console.log('%cThanks for using this by https://github.com/codad5 && https://github.com/ptbysr', 'background:blue;color:white;width:100%;height:50px;font-size:20px;')
        ksh.innerHTML += `<li>Your  combination is ${data.combination} </li>`
        console.table({...data, element:'Window'})
    })
    ListenToKey('alt+c', (data) => {
    console.log('%cThanks for using this by https://github.com/codad5 && https://github.com/ptbysr',
    'background:blue;color:white;width:100%;height:50px;font-size:20px;')
    document.querySelector('#keystrokehistory').innerHTML = ``
    console.table({...data, element:'Window'})
    })

    
</script>


<script>

</script>