HTML/CSS - Rain drop measurement Online Editor and JavaScript Compiler

html

<!DOCTYPE html>
<html>
    <head>
        <title>Rain drop measurement</title>
        <meta name="description" content="Rain drop measurement">
        <meta name="keywords" content="Raindrop, measurement">
        <meta name="author" content="Calvin - https://www.sololearn.com/Profile/4354920">
        <meta name="copyright" content="Calvin">
        <meta name="date" content="2017-08-11" scheme="YYYY-MM-DD">
        <meta name="revised" content="2017-08-11" scheme="YYYY-MM-DD">
        
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
    <h3 id="title">Rain Drop Measurement</h3>
    <div id="container">
        <div id="r1"></div>
        <div id="r2"></div>
    </div>
    
    <div id="results">
        <div>Results</div>
        <div class="data">Total rain drops: <span id="drops">0</span></div><br/>
       <div class="data">Box1 area = 70x50 </div> 
       <div class="data">Total rain drops in Box1: <span id="drops1">0</span></div><br/>
       <div class="data">Box2 area = 70x100 </div> 
       <div class="data">Total rain drops in Box2: <span id="drops2">0</span></div>
    </div>

css

/**
 * @title   Rain drop measurement
 * @version   0.1
 * @package   xhtml-css
 * @author    Calvin
 * @copyright 2017 by the author
 * @cssdoc    version 1.0-pre
 * @license   GPL v3
*/
body {
    margin: 0;
    padding: 0;
}
#title {
    margin: 5px;
}
#container {
    margin: 5px;
    width: 340px;
    height: 150px;
    background-color: #eee;
    border: 1px solid #888;
    position: relative;
}

/**
 * @title Rain drop measurement
 * @author Calvin (https://www.sololearn.com/Profile/4354920)
 * @version 0.1
 * @copyright 2017 by the author
 * @license GPL v3
 * @see {@link http://usejsdoc.org/}
 */
var dropsNum = dropsNum1 = dropsNum2 = 0;
function addRain(width, height) {
    var container = document.getElementById("container");
    var cx = Math.floor(Math.random() * width);
    var cy = Math.floor(Math.random() * height);
    
    var r1 = document.getElementById("r1");
    var r2 = document.getElementById("r2");
    
    var drops = document.getElementById("drops");
    var drops1 = document.getElementById("drops1");
    var drops2 = document.getElementById("drops2");
    
    r1Style = window.getComputedStyle(r1, null);
    r2Style = window.getComputedStyle(r2, null);
    
    dropsNum++;

BROWSER

Console