calc

<html>
    <script src="http://code.jquery.com/jquery-1.12.0.js"></script>
    <style>
        button {
            width: 300px;
            height: 100px;
            font-size:3em;
            color:green;
        }
        div {
            height: 200px;
            background-color:beige;
            font-size:2em;
        }

    </style>
    <audio id="audio" src="http://www.soundjay.com/button/beep-07.wav" autostart="false" ></audio>
    <script>
        function clr(){
            var div1 = document.getElementById('div1');
            var div2 = document.getElementById('div2');
            div1.innerHTML ="";
            div2.innerHTML ="";
        }
        function add(obj){
            var div1 = document.getElementById('div1');
            var div2 = document.getElementById('div2');
            div1.innerHTML +=obj.id + " + ";
            var x =  Number(div2.innerHTML) +  Number(obj.id);
            div2.innerHTML=x.toString();
            var sound = document.getElementById("audio");
          sound.play();
        }
    </script>
    <div id="div1"></div><br>
    <div id="div2"></div><br>
    <br>
    <button id="0.25" onclick=add(this)>0.25</button>
    <button id="0.5" onclick=add(this)>0.5</button>
    <button id="0.75" onclick=add(this)>0.75</button>
    <button id="1" onclick=add(this)>1</button>
    <button id="1" onclick=clr()>clear</button>