Need a little help with api

[PDC]

Okay, to start off I'm very new to api. So new that this is my first time actually seeking any help on it but i've read into it, just don't understand how to implement it.

 

Here is what I have. I have a html5 theme that has a login button that once pressed opens a popup .

http://prntscr.com/fr858r

http://prntscr.com/fr85ni

 

I want user to be able to login or register using this form. So here is the code for the form.

<div class="sign-in">

<div>

<button class="md-trigger btn-medium-round" data-modal="modal-3">

<i class="fa fa-user"></i>Sign In

</button>

 

 

<!-- Start Client Area Modal -->

<div class="md-modal md-effect-3" id="modal-3">

<div class="md-content">

<div>

<div class="tabs">

<input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked">

<label for="tab-1" class="tab-label-1">Sign in</label>

<input id="tab-2" type="radio" name="radio-set" class="tab-selector-2">

<label for="tab-2" class="tab-label-2">New accounts</label>

<div class="clear-shadow"></div>

<div class="content">

<div class="content-1">

<form>

<fieldset>

<div class="clt-area-form">

<div>

<i class="fa fa-envelope"></i>

<input type="text" placeholder="Email">

</div>

<div>

<i class="fa fa-lock"></i>

<input type="text" placeholder="Password">

</div>

</div>

<div class="clt-area-form">

<label>

<input type="checkbox">Remember me

</label>

</div>

<a href="get#http://mywebsite.com/shop/templates/six/js/scripts.min.js?v=3cd46c" class="btn">Login</a>(This is what I tried to do & obviously it did not work)

<div class="modal-caption">

<a href="#">Forgot Password?</a>

</div>

</fieldset>

</form>

</div>

<div class="content-2">

<form>

<fieldset>

<div class="clt-area-form">

<div>

<i class="fa fa-user-plus"></i>

<input type="text" placeholder="Username">

</div>

<div>

<i class="fa fa-envelope"></i>

<input type="text" placeholder="Email">

</div>

<div>

<i class="fa fa-lock"></i>

<input type="text" placeholder="Password">

</div>

</div>

<div class="clt-area-form">

<label>

<input type="checkbox">I agree to the <a href="">Terms</a>

</label>

</div>

<a href="#" class="btn">Create account</a>

</fieldset>

</form>

</div>

</div>

</div>

</div>

<button class="md-close btn-clr">Close me!</button>

</div>

</div>

<!-- End Client Area Modal -->

 

I really want to learn to make calls using api. Just having trouble understanding how to implement it. I grasp how it works just need a real life example. If someone could help me actually do this one call, I think I'd understand how to do it from there.

 

I know it sounds stupid but, I'm guessing I have to make a file with the api in it with credentials somewhere in it, and reference this file like I do my css files, is this right?

 

Sorry to bother you guys, just want to learn it b/c i have a lot of ideas that i would like to implement.

 

- - - Updated - - -

 

Sorry, I know I jumbled all that code up, wasn't sure how it'd look once it posted. I'll post it a little cleaner as well.

 

<!-- Start Client Area Modal -->

<div class="md-modal md-effect-3" id="modal-3">

<div class="md-content">

<div>

<div class="tabs">

<input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked">

<label for="tab-1" class="tab-label-1">Sign in</label>

<input id="tab-2" type="radio" name="radio-set" class="tab-selector-2">

<label for="tab-2" class="tab-label-2">New accounts</label>

<div class="clear-shadow"></div>

 

<div class="content">

<div class="content-1">

<form>

<fieldset>

<div class="clt-area-form">

<div>

<i class="fa fa-envelope"></i>

<input type="text" placeholder="Email">

</div>

<div>

<i class="fa fa-lock"></i>

<input type="text" placeholder="Password">

</div>

</div>

<div class="clt-area-form">

<label>

<input type="checkbox">Remember me

</label>

</div>

<a href="get#http://octadot.com/shop/templates/six/js/scripts.min.js?v=3cd46c" class="btn">Login</a>

<div class="modal-caption">

<a href="#">Forgot Password?</a>

</div>

</fieldset>

</form>

</div>

<div class="content-2">

<form>

<fieldset>

<div class="clt-area-form">

<div>

<i class="fa fa-user-plus"></i>

<input type="text" placeholder="Username">

</div>

<div>

<i class="fa fa-envelope"></i>

<input type="text" placeholder="Email">

</div>

<div>

<i class="fa fa-lock"></i>

<input type="text" placeholder="Password">

</div>

</div>

<div class="clt-area-form">

<label>

<input type="checkbox">I agree to the <a href="">Terms</a>

</label>

</div>

<a href="#" class="btn">Create account</a>

</fieldset>

</form>

</div>

</div>

 

</div>

</div>

<button class="md-close btn-clr">Close me!</button>

</div>

</div>

<!-- End Client Area Modal -->

 

- - - Updated - - -

 

or not, it formats that way automatically. I apologize for the duplicate post