"url shortener"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html lang='en' class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/DavidJWall/pen/MmOvQE" /> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'><link rel='stylesheet prefetch' href='https://cdn.bootcss.com/AniJS/0.9.3/anijs-min.js'><link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Libre+Franklin'><link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Julius+Sans+One'> <style class="cp-pen-styles">body { padding-top: 10%; background-color: #6376d8; } hr { border-top: 1px solid #ffffff !important; padding-bottom: 10px; } p, p span, .secondaryTitle, hr, .blinking-cursor, label, .instructions { font-family: 'Julius Sans One', sans-serif !important; color:#ffffff !important; } .outerContainer { -webkit-box-align:center; -webkit-box-pack:center; display:-webkit-box; } .group { position:relative; margin-left: auto; margin-right: auto; } input { font-family: 'Libre Franklin', sans-serif; font-size:28px; padding:7px 150px 7px 20px; display:block; width:490px; border:none; /*border:2px solid #5264AE;*/ border-radius: 50px; color: #5264AE; } input:focus { outline:none; } label { background-color: #6376d8; font-size:20px; font-weight:normal; position:absolute; pointer-events:none; left:3px; top:3px; border-radius: 50px; padding: 10px; max-height: 86px; transition:1s ease all; -moz-transition:1s ease all; -webkit-transition:1s ease all; } .instructions { font-size: 12px; padding-bottom:45px; padding-top:5px; visibility: hidden; } #shortenedAddress { font-family: 'Julius Sans One', sans-serif; color: #5264AE; position: absolute; left: 257px; top: 8px; font-size: 29px; visibility: hidden; } #shortenedAddress:hover { text-decoration: none; } /* active state */ input:focus ~ label, input:valid ~ label { left:344px; } /* active state */ input:focus ~ .bar:before, input:focus ~ .bar:after { width:50%; } .description { font-size: 16px; text-shadow: none; } .mainTitle { font-size: 20px; } </style></head><body> <body> <div class="container"> <div class="col-sm-8 col-sm-offset-2 quoteContainer rounded"> <p class="description mainTitle text-center"><i class="fa fa-free-code-camp" aria-hidden="true"></i> URL Shortener Microservice</p> <hr> <div class="outerContainer"> <form> <div class="group text-center" > <input type="text" id="animatedInput" required> <label id="animatedInputLabel">ENTER URL: </label> <span><a href="#" target="_blank" id="shortenedAddress" data-anijs="if: click, on: #animatedInputLabel, do: flipInY animated"></a></span> </div> </form> </div> <div class="text-center"> <p class="instructions">* Click on the link or right-click and copy the link for the full URL.</p> </div> <div class="text-center"> <p class="description"><i class="fa fa-globe" aria-hidden="true"></i></i> Created using: NPM, Express.js, MongoDB, Heroku, and jQuery.</p> <p class="description"><i class="fa fa-globe" aria-hidden="true"></i></i> This is a full-stack application where the user can pass a URL as a URL and then receive a shortened URL which can acts as a redirecting link for the original address.</p> <p class="description"><i class="fa fa-globe" aria-hidden="true"></i></i> The new shortened address is saved in an online database for future use.</p> </div> </div> </div> </body> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script><script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/AniJS/0.9.3/anijs-min.js'></script> <script >/** * Created by david on 5/2/17. */ $(document).ready(function () { $('#animatedInput').on("keypress", function(e) { if (e.keyCode == 13) { event.preventDefault(); var url = "https://url-shortener-davidjwall.herokuapp.com/new/" + $('#animatedInput').val(); $.ajax({ type: "GET", url: url, success: function(data) { // remove input val and exit text input box $("#animatedInput").val('').blur(); // change label for obtained URL $("#animatedInputLabel").empty().append("SHORT URL:"); // output new shortened URL $("#shortenedAddress") .text(data.shortenedUrl) .attr("href", "https://url-shortener-davidjwall.herokuapp.com/" + data.shortenedUrl); setTimeout(function(){ $("#shortenedAddress, .instructions").css("visibility","visible"); $("#animatedInputLabel").trigger( "click" ); }, 700); console.log(data); } }); } }); $( "#animatedInput" ).focus(function() { $("#shortenedAddress").empty(); $("#animatedInputLabel").empty(); $("#animatedInputLabel").append("SUBMIT URL"); }); $( "#animatedInput" ).focusout(function() { $('#animatedInput').val(''); $("#animatedInputLabel").empty(); $("#animatedInputLabel").append("ENTER URL:"); }); }); //# sourceURL=pen.js </script> </body></html>

Related: See More

Material Dashboard Pro React

Questions / Comments: