Tiffany R. White Blog

Just my little corner of the internet.

Contacts App Update

2016-05-20 Tiffany WhiteDaily Updates

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>
    <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>
      </button>
   <a class="navbar-brand" href="#">Contacts App</a>
</div>
<!-- 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>
</ul>
<!-- 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>
</nav>

Not sure what is happening but it looks like this:

contacts_app

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
  • © 2019 Tiffany R. White Blog
  • Made with GatsbyJS & ☕️
  • hosted on Netlify | v7.0