Morse Code Trainer

index.html

<div id="bleep"></div>
<div id="text"></div>
<div id="code"></div>
<div id="beep"></div>

morse-code-trainer.markdown

Morse Code Trainer

A Pen by MartinHarding on CodePen.

License.

script.js

var sound = new Audio('http://www.soundjay.com/misc/censor-beep-10.mp3');

var timer;
var stop;
var beep = 0;
var speed = 25;
$('#bleep').on('mousedown', function(){
  sound.play();
  $(this).addClass('active');
  timer = setInterval(function(){
    beep++;
    if (beep < speed || beep > speed*3*2) { 
			$('#beep').text('X '+beep);
    }
    if (beep > speed && beep < speed*3) { 
			$('#beep').text('DOT '+beep);
    }
    if (beep > speed*3 && beep < speed*3*2) { 
			$('#beep').text('DASH '+beep);
    }
  },1);
});

$(window).on('mouseup',function(){
    sound.pause();
    sound.currentTime = 0;
  	$('#bleep').removeClass('active');
    if (beep > speed && beep < speed*3) { 
			$('#code').append('.');
    }
    if (beep > speed*3 && beep < speed*3*2) { 
			$('#code').append('-');
    }
    beep = 0;
  	clearInterval(timer);
  	stop = setTimeout(function(){
      
    },10);
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

body {
  background:#aaa;
}

#bleep {
  position: absolute;
  width: 200px;
  height: 200px;
  text-align: center;
  border-radius: 100px;
  left: calc(50% - 102px);
  top: calc(50% - 100px);
  background: rgb(200,0,0);
  box-shadow: 0 4px 0 rgb(100,0,0);
}

#bleep.active {
  left: calc(50% - 98px);
  top: calc(50% - 100px);
  box-shadow: 0 -4px 0 rgb(100,0,0);
}