Vamos por partes:

 1. Si te fijas, tu variable `teclas` tiene un [listado de nodos][1] con los botones de la calculadora. Si muestras por consola `teclas.value` verás que es `undefined` porque no estás accediendo a ningún botón en concreto:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    var teclas = document.querySelectorAll('.key');

    console.log(teclas);

<!-- language: lang-html -->

    <div id="calculator">
            <div class="calc_keys"> 
              <input class="input" id="input0" value="5"; type="text" name="fname">
              <button class="operator suma">+</button>
              <button class="operator resta">-</button>
              <button class="operator mult">*</button>
              <button class="operator div">/</button>
              <button value="7" class="key">7</button>
              <button  value="8" class="key">8</button>
              <button  value="9" class="key">9</button>
              <button  value="4" class="key">4</button>
              <button  value="5" class="key">5</button>
              <button  value="6" class="key">6</button>
              <button  value="1" class="key">1</button>
              <button  value="2" class="key">2</button>
              <button  value="3" class="key">3</button>
              <button  value="0" class="cero">0</button>
              <button class="punto">.</button>
              <button id="borrar" class="borrar">Borrar</button>
              <button class="igual">=</button>
            </div>
          </div>

<!-- end snippet -->

 2. El hecho de declarar `teclas` como una variable global hace que sea accesible dentro de la función `add` pero esto es una muy mala práctica ya que puede haber conflictos con otras variables o métodos ([aquí][2] más info sobre `var`, `let` y `const`)

 3. Ya que estás llamando a la función `add` dentro del `for` en el que ya estás recorriendo `teclas` lo ideal es que le pases el valor del botón pulsado a la función `add`. Para ello simplemente pásale el valor de `this.value` ya que `this` en ese contexto hace referencia al `teclas[i]` correspondiente. Además, ten en cuenta que o bien puedes pasarle **la referencia** a la función encapsulando la llamada con `function(){...}` (te pongo este ejemplo):

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    /* VAR RESULTADO */
    var input0 = document.getElementById("input0");

    var teclas = document.querySelectorAll('.key');

    function add(val){
        input0.value = val;
      }

    for (var i = 0 ; i < teclas.length; i++) {
        teclas[i].addEventListener('click' , function(){add(this.value)}) ; 
     }

<!-- language: lang-html -->

    <div id="calculator">
            <div class="calc_keys"> 
              <input class="input" id="input0" value="5"; type="text" name="fname">
              <button class="operator suma">+</button>
              <button class="operator resta">-</button>
              <button class="operator mult">*</button>
              <button class="operator div">/</button>
              <button value="7" class="key">7</button>
              <button  value="8" class="key">8</button>
              <button  value="9" class="key">9</button>
              <button  value="4" class="key">4</button>
              <button  value="5" class="key">5</button>
              <button  value="6" class="key">6</button>
              <button  value="1" class="key">1</button>
              <button  value="2" class="key">2</button>
              <button  value="3" class="key">3</button>
              <button  value="0" class="cero">0</button>
              <button class="punto">.</button>
              <button id="borrar" class="borrar">Borrar</button>
              <button class="igual">=</button>
            </div>
          </div>

<!-- end snippet -->

O bien jugar con el evento (como en este ejemplo. [Aquí][3] más info):

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    /* VAR RESULTADO */
    var input0 = document.getElementById("input0");

    var teclas = document.querySelectorAll('.key');

    function add(event){  
        input0.value = event.target.value;
      }

    for (var i = 0 ; i < teclas.length; i++) {
        teclas[i].addEventListener('click' , add) ; 
     }

<!-- language: lang-html -->

    <div id="calculator">
            <div class="calc_keys"> 
              <input class="input" id="input0" value="5"; type="text" name="fname">
              <button class="operator suma">+</button>
              <button class="operator resta">-</button>
              <button class="operator mult">*</button>
              <button class="operator div">/</button>
              <button value="7" class="key">7</button>
              <button  value="8" class="key">8</button>
              <button  value="9" class="key">9</button>
              <button  value="4" class="key">4</button>
              <button  value="5" class="key">5</button>
              <button  value="6" class="key">6</button>
              <button  value="1" class="key">1</button>
              <button  value="2" class="key">2</button>
              <button  value="3" class="key">3</button>
              <button  value="0" class="cero">0</button>
              <button class="punto">.</button>
              <button id="borrar" class="borrar">Borrar</button>
              <button class="igual">=</button>
            </div>
          </div>

<!-- end snippet -->


Personalmente me gusta más la primera opción pero para gustos los colores :)


  [1]: https://developer.mozilla.org/es/docs/Web/API/Document/querySelectorAll
  [2]: https://es.stackoverflow.com/questions/106042/var-let-const-o-nada-en-javascript/106067#106067
  [3]: https://es.stackoverflow.com/questions/31738/como-puedo-mandar-el-id-junto-con-un-evento-en-js