Untitled

<!DOCTYPE html>
<html>

<style>
  html, body { font-size: 16px; }
  .frogPond { background-color: #0071b9; margin: 1em; padding: 1em; border: 0.125em solid aqua; border-radius: 0.5em; }
  .frogPond h1 { text-align: center; }
  .frogPond .actions { margin: 1em 0 0 0; padding: 0; }
  .frogPond .actions button { display: inline-block; margin: 0 0.75em 0 0; background-color: aqua; border: 0.125em solid darkblue; padding: 0.25em; border-radius: 0.25em; font-size: 0.75em; cursor: pointer; }
  .frogPond .frogs { border: 0.25em solid aqua; border-radius: 0.5em; margin: 0; padding: 0; }
  .frogPond .frogs li { margin: 1em; padding: 0.25em; list-style: none; font-weight: bold; font-size: 1em; border-radius: 0.25em; }
  .frogPond .m { color: darkblue; background-color: #1182ca; }
  .frogPond .f { color: hotpink; background-color: #ffcccc; }
</style>

<body>
<script>
var performActions = function(e) { // Helper function for clicking buttons
        switch(e.target.className) {
          case 'add':
            console.log('you hit add');
            frogPond.add(new Frog({ name: "Jack Sparrow", gender: "m" }));
            break;

          case 'kill':
            console.log('you hit kill');
            frogPond.killFrog();
            break;

          case 'breed':
            console.log('you hit breed');
            break;
        }
      },

    Pond = function() { this.create(); };
    Pond.prototype = function() {
      var _body,
          _frogs,
          _actions, /* DOM element holders */

          _pond,    /* reference to self */
          Frogs,    /* Frogs in Pond */

          create = function() {
            /* Set up DOM */
            _body = document.createElement('div');
            _body.className = 'frogPond';
            _body.innerHTML = '<ul class="frogs"></ul><div class="actions"><button class="add">Add a Frog</button><button class="kill">Kill a frog</button><button class="breed">Encourage breeding</button></div>';
            document.body.appendChild(_body);
            _frogs = _body.getElementsByClassName('frogs')[0];
            _actions = _body.getElementsByClassName('actions')[0];
            /* End DOM Setup */

            this.Frogs = [];
            _pond = this;

            _actions.addEventListener('click', function(e) { performActions.call(_pond, e); }, false);
            /* perform an action on this pond only */
          },

          add = function(frogs) { /* accepts array of frogs or single frog */
            if(frogs) {
              if(!frogs.propertyIsEnumerable(length) && typeof frogs.splice !== "function") {
                frogs = [frogs];
              }
            }

            var i = 0,
                l = frogs.length;

            for(; i < l; i++) {
              this.addFrog(frogs[i]);
            }
          },

          killFrog = function(){
              console.log('////////////Selected Frog to Die///////////////');
              var _randomFrog = this.Frogs[Math.floor(Math.random()*this.Frogs.length)];
              console.log(_randomFrog);
              var indexOfFrog = this.Frogs.indexOf(_randomFrog);
              this.Frogs.splice(indexOfFrog,1); //Remove frog from array
              console.log(_frogs.childNodes);
              console.log("ID of FROG to be deleted" + _randomFrog.getId());
              for (var i = 0; i < _frogs.childNodes.length; i++) {
                 if (_randomFrog.getId() == _frogs.childNodes[i].getAttribute("data-frogid")){
                    console.log("ID : " + _randomFrog.getId() +  " Data attribute : " + _frogs.childNodes[i].getAttribute("data-frogid") + " NAME: " + _randomFrog.name + " DOM eleement name : " + _frogs.childNodes[i].innerHTML + " To be removed");
                    // _frogs.removeChild(_frogs.childNodes[i]);
                    _frogs.childNodes[i].parentNode.removeChild(_frogs.childNodes[i]);
                 }
              };
              console.log(this.Frogs.length + "Frogs left in the array");
          },

          addFrog = function(frog) {
            /* only frogs allowed in this pond, this is a speciesist pond */
            if(frog instanceof Frog) {
              frog.setId(this.Frogs[this.Frogs.length - 1] ? this.Frogs[this.Frogs.length - 1].getId() + 1 : 1);
              this.Frogs.push(frog);

              var _el = document.createElement('li');
              _el.innerText = frog.name;
              _el.className = frog.gender;
              _el.setAttribute('data-frogid', frog.getId());
              _frogs.appendChild(_el);
            }
          };

      return { create: create, add: add, addFrog: addFrog, killFrog : killFrog };
    }(),

    Frog = function(data) { this.birth(data); };
    Frog.prototype = function() {
      var _id,
          name,
          gender,

          birth = function(frogData) {
            this.name = frogData.name;
            this.gender = frogData.gender;
          },

          setId = function(id) {
            _id = parseInt(id);
          },

          getId = function() {
            return _id;
          };

      return {birth: birth, setId: setId, getId: getId };
    }();

var frogPond = new Pond();
frogPond.add([
  new Frog({ name: "Frank", gender: "m" }),
  new Frog({ name: "Georgia", gender: "f" })
]);
</script>

</body>
</html>