Record And Play Back Mouse Click – Click Recorder

Click Recorder is a mouse click recorder that allows you to record and playback mouse click sequences and positions on a page.

Recording mouse clicks make it extremely convenient to create screencasts, write tutorials or teach others about certain tools and applications.

How to use it:

1. Create the HTML for the click recorder.

<div class="controlContainer">
  <!-- buttons -->
  <div class="buttonsContainer">
    <div id="recordButton" class="button">
      <div class="recordIcon icon"></div>
      <div class="stopRecordIcon icon d-none"></div>
    </div>
    <div id="playButton" class="button">
      <img class="playIcon icon" src="source/svg/play.svg" alt="play-icon" >
      <img class="stopPlayIcon icon d-none" src="source/svg/pause.svg" alt="stop-icon" >
    </div>
  </div>
  <!-- time -->
  <div class="recordTime d-none">
    <span class="minute">00</span> 
    :
    <span class="second">00</span>
    :
    <span class="millisecond">00</span>
  </div>
</div>

2. Create the HTML for the record alert.

<div class="recordAlert d-none">
  <div class="circle"></div>
  <span class="title">Click Rec</span>
</div>

3. Import the necessary JavaScript files.

<script src="source/scripts/data.js"></script>
<script src="source/scripts/main.js" type="module"></script>

4. Load the main stylesheet to style the click recorder.

<link rel="stylesheet" href="source/styles/main.css">