Contacts App Update



I haven’t written an article in a week or so. I have lost time or something because I don’t remember what I did while I was away. I did work some Free Code Camp, ran some errands, had a doctor’s appointment and went out with a friend from back home.

So these past two days I have been working on the contacts app I have been working on for forever. I did some of the logic a week or so ago but in the meantime, I wanted to go from pill navigation to navbar navigation. The problem I had was responsive/collapsable navbar. I am trying to follow the Bootstrap docs but I am not having much success.

Navbar Code

My navbar code is as follows:

<!-- Navbar content collapse -->

 <nav class="navbar navbar-dark bg-primary navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
   <a class="navbar-brand" href="#">Contacts App</a>
<!-- Navbar content -->
<ul class="nav navbar-nav">
    <li class=""><a class="nav-link" href="index.html">My Contacts <span class="sr-only">(current)</span></a></li>
    <li class="nav-item"><a class="nav-link" href="addContacts.html">Add Contacts</a></li>
    <li class="nav-iten"><a class="nav-link" href="Phone.html">Phone</a></li>
    <li class="nav-item"><a class="nav-link" href="Email.html">Email</a></li>
<!-- Search bar content -->

<form class="form-inline pull-xs-right"><input class="form-control" type="text" placeholder="Search" />
<button class="btn btn-success-outline" type="submit">Search</button></form></div>

Not sure what is happening but it looks like this:


The Logic

My js is pretty basic right now. I want to have a better framework for the logic and I have a TaskPaper list to sort of flesh this stuff out.

Here is the logic I have currently:

// Empty arrays to push contacts onto.

var names = {



var emails = {



var telenums = {



// Need to write a function to gather first names and last names through input

function getInput() {

  var userName = document.getElementById(\'inputName\');

  var userEmail = document.getElementById(\'inputEmail\');

  var userTeleNum = document.getElementById(\'inputPhoneNumber\');


$(\'#form\').on(\'submit\', function () {

   //your awesome code here

   alert(\'Got it!\');


// Need to write a function gather phone numbers through input

// Need to write a function to gather emails through input.

Now this isn’t passing Travis CI tests, obviously. I don’t think it will pass until I figure it out better and the basic logic here is sound.

Updated Docs

You can find my updated docs here

On the Grind

Some video fun.

Finishing OOP JavaScript at Treehouse


We learned a bit about constructors and prototypal inheritance in OOP JavaScript in this final section. We also went over prototype chaining which I found interesting.

Inheritance of Properties Through the Prototype Chain

Every JavaScript object has a Prototype object and inherit from Object.prototype. You cannot inherit from classes in JavaScript as there is no “class” per se. You only inherit from other objects.

In order to spread functionality throughout different functions and scopes, we can chain different objects together using the inherent nature of Object.prototype. We can do this a couple of ways but in the Treehouse example, we use Object.create() to chain together two objects.

Take for example this code:

function Media() {

  this.title = title;

  this.duration = duration;

  this.isPlaying = false;

} = function() {

  this.isPlaying = true;


Media.prototype.stop = function() {

  this.isPlaying = false;


This is an example of a constructor with some functionality. What if I have another constructor that I want to inherit properties from this constructor? You could do this:

function Movie() {, title, duration);

  this.year = year;


Movie.prototype = Object.create(Media.prototype);

Movie.prototype.stop = function() {

  this.isPlaying = false;


The Movie() constructor is inheriting properties from the Media() constructor.

The call() Method

You can also use call() to chain constructors for an object. In the example above, we’ve used:

function Movie() {, title, duration);

  this.year = year;


The call() method always takes two or more arguments, with this always being the first, which refers to the current object, or the calling object.

The Final Project for OOP JavaScript at Treehouse

I was lost. I honestly don’t know how I was supposed to come up with the answers provided. I didn’t know where to start, which was honestly my fault. I didn’t take very good notes while going through the course at the end. But I wasn’t the only one stumped by this challenge. I don’t feel I was prepared enough for it, regardless of how many notes I took. You can find the gist of the solution down below.

See what I mean? We didn’t learn half this stuff. I love Treehouse and this was a hard course for Andrew to teach. But I felt it sorely lacking in practice.