/full-stack-url-shortener.markdown

## full-stack-url-shortener.markdown

      
    Raw
  

              full-stack-url-shortener.markdown
            
          
    Full stack URL shortener

This is a url shortener connected to the URL shortener back-end project on freeCodeCamp
A Pen by Kyle w pilkinton  on CodePen.
License.

  
## index.html
<body>
  <!-- Modal Structure -->
  <div id="modal1" class="modal">
    <div class="modal-content">
      <h4 id="modalhead">How To Use</h4>
      <p id="modalbody">Insert web address in the search bar and press enter. <br>The short URL is returned with the long URL that was entered in the search bar.</p>
      <hr class="red-text">
      <br>
      <i class="red-text lighten-1">this is a proof of concept.<br> The shortened URL is usually longer then the entered url because of free domain limitations.</i>
      <br>
    </div>
    <div class="modal-footer">
      <a href="#modal1" class=" modal-action modal-close waves-effect waves-green btn-flat">OK</a>
    </div>
  </div>
  <button data-target="modal1" class='btn white btn-large modal-trigger' href="#modal1"><i class='fa fa-question'></i></button>
  <br>
  <h1 class="center-align">Little URL</h1>
  <br>
  <div id="bla">
    <form id="urlinput" class="blue lighten-2 center-align">
      <div class="input-field">
        <input id="search" type="search" />
        <label id="searchlabel" for="search"></label>
      </div>
    </form>
  </div>
  <br><br><br>
  <div class="center-align">
    <div id="long_url"></div>
    <br>
    <div id="short_url"></div>
  </div>
</body>

## script.js
 $(document).ready(function() {
   // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
   $('.modal-trigger').leanModal();

   $(document).keypress(function(e) {
     if (e.which == 13) {
       event.preventDefault();
       var searchstring = $('#search').val();
       console.log(searchstring);
       $.getJSON("http://crossorigin.me/http://tadake-littleurl.heroku.com/create/" + searchstring, function(data) {

          $("#long_url").empty();
          $("#short_url").empty();

         console.log(data.little_url);
         $("#long_url").append("<h5>Long Url  :  " + data.original_url + "</h5>");
         console.log(data.original_url);
         $("#short_url").append("<h5>Short Url :  <a href=" + data.little_url + " target='_blank'>" + data.little_url + "</a></h5>");
       });
     }
   });

 });

## scripts
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>

## style.css
body {
  background-color: #2979ff;
  color: white;
}

.btn {
  position: absolute;
  top: 0;
  right: 0;
  background-color: white;
  color: #2979ff;
}

#modalhead {
  color: #2979ff;
}

#modalbody {
  color: #000;
}

#urlinput {
  color: white;
  background color: white;
  width: 60%;
  float: none;
  margin: 0 auto;
  border: none !important;
}

#searchlabel {
  color:white;
}
a{
  color:white;
}

## styles
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css" rel="stylesheet" />
	<body>
	<!-- Modal Structure -->
	<div id="modal1" class="modal">
	<div class="modal-content">
	<h4 id="modalhead">How To Use</h4>
	<p id="modalbody">Insert web address in the search bar and press enter. <br>The short URL is returned with the long URL that was entered in the search bar.</p>
	<hr class="red-text">
	<br>
	<i class="red-text lighten-1">this is a proof of concept.<br> The shortened URL is usually longer then the entered url because of free domain limitations.</i>
	<br>
	</div>
	<div class="modal-footer">
	<a href="#modal1" class=" modal-action modal-close waves-effect waves-green btn-flat">OK</a>
	</div>
	</div>
	<button data-target="modal1" class='btn white btn-large modal-trigger' href="#modal1"><i class='fa fa-question'></i></button>
	<br>
	<h1 class="center-align">Little URL</h1>
	<br>
	<div id="bla">
	<form id="urlinput" class="blue lighten-2 center-align">
	<div class="input-field">
	<input id="search" type="search" />
	<label id="searchlabel" for="search"></label>
	</div>
	</form>
	</div>
	<br><br><br>
	<div class="center-align">
	<div id="long_url"></div>
	<br>
	<div id="short_url"></div>
	</div>
	</body>
	$(document).ready(function() {
	// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
	$('.modal-trigger').leanModal();

	$(document).keypress(function(e) {
	if (e.which == 13) {
	event.preventDefault();
	var searchstring = $('#search').val();
	console.log(searchstring);
	$.getJSON("http://crossorigin.me/http://tadake-littleurl.heroku.com/create/" + searchstring, function(data) {

	$("#long_url").empty();
	$("#short_url").empty();

	console.log(data.little_url);
	$("#long_url").append("<h5>Long Url : " + data.original_url + "</h5>");
	console.log(data.original_url);
	$("#short_url").append("<h5>Short Url : <a href=" + data.little_url + " target='_blank'>" + data.little_url + "</a></h5>");
	});
	}
	});

	});
	<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
	body {
	background-color: #2979ff;
	color: white;
	}

	.btn {
	position: absolute;
	top: 0;
	right: 0;
	background-color: white;
	color: #2979ff;
	}

	#modalhead {
	color: #2979ff;
	}

	#modalbody {
	color: #000;
	}

	#urlinput {
	color: white;
	background color: white;
	width: 60%;
	float: none;
	margin: 0 auto;
	border: none !important;
	}

	#searchlabel {
	color:white;
	}
	a{
	color:white;
	}
	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
	<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css" rel="stylesheet" />