Contacts App Update | Tiffany R. White Blog

Contacts App Update

Reading time: 4 mins

working_on_contacts_app

 

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>
      </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

On the Grind

Some video fun.

working_on_contacts_app

 

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>
      </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

On the Grind

Some video fun.

https://www.instagram.com/p/BFm9gRoPHd9/?taken-by=twhitedev412&hl=en


Share

No Ads. No Sponsored Content. Ever.

I've decided that I no longer want to have sponsored posts on this blog. I also, though as tempting as it may sound, don't want ads; even if I got big enough for Carbon ads I don't want them. I want to post free, engaging content for beginning/junior devs. This means that I won't have Setapp posts or affiliates on this blog, though I will keep them on the Uses page. If you enjoy the content, buy me a coffee. Just click the button below.


Coffee Buy me a coffeeBuy me a coffee


Webmentions 0

No webmentions were found.

Newsletter