Contacts App Update

3 min read



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.

CC BY-SA 4.0 Contacts App Update by Tiffany White is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.