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:
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.
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:
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
