JSFiddle - React, Tailwind, and code Playground

by Alesei Narkevitch

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <!-- Input Field -->
    <!-- Button -->
    <!-- List Of Previously used links -->
    
    <div id="shorten-link-input-wrapper">
      <input id="shorten-link-text-input" type="text" />   
      <button id="shorten-link-submit-button">
        Shorten Url
      </button>
    </div>
    <div id="shorten-links-history-list">
      <ul>
        <li><a herf="#past-link-url">Past Link Text</a></li>
      </ul>
    </div>

SCSS

body {
  margin: 0;
}

#shorten-link-input-wrapper {
  width: 40%;
  margin: 5em auto 0;
  background-color: #98cdb5;
  padding: 3em 10em;
  
  button {
    background-color: #fecb65;
  }
}

#shorten-links-history-list {
  background-color: #feedb0;
  width: 40%;
  margin: 1em auto;
  
  ul, li {
    list-style: none;
    margin: 0;
    padding: 0;
  }
}

JavaScript

//http://bit.ly/

// input url (https://www.google.com/search?q=color+palette&safe=off&tbm=isch&source=iu&ictx=1&fir=ZBchz45ilndczM%253A%252CgqDTUQvd_2akSM%252C_&usg=AFrqEzfkomOMsAFjkZGFnogy5wZRRH2ZFA&sa=X&ved=2ahUKEwiHmKCixLjdAhUn9YMKHctIBPoQ9QEwA3oECAIQBg#imgrc=fw-T4uI2ZgRp3M:) -> output shorten url, sl.io/q4asdfa


/*

[
 {
 	timestamp: new Date() -> epoch unix,
  linkText: 'google.com OR custom name',
  linkUrl: 'https://www.google.com/search?q=color+palette&safe=off&tbm=isch&source=iu&ictx=1&fir=ZBchz45ilndczM%253A%252CgqDTUQvd_2akSM%252C_&usg=AFrqEzfkomOMsAFjkZGFnogy5wZRRH2ZFA&sa=X&ved=2ahUKEwiHmKCixLjdAhUn9YMKHctIBPoQ9QEwA3oECAIQBg#imgrc=fw-T4uI2ZgRp3M:) -> output shorten url, sl.io/q4asdfa'
  shortenUrl: some sort of hash
 }
]


*/


// click shorten url will populate data storage with new link and will force update of list of history of links


$(function () {	
	var LINKS_HISTORY = [];
  
  var input = $('#shorten-link-text-input');
  var button = $('#shorten-link-submit-butto');
  var historyList = $('#shorten-links-history-list ul');
  
  
  function displayHistory () {
    
    var formattedList = LINKS_HISTORY.map(function (link) {
    	return '<li>new link</li>';
    });

  	historyList.html(formattedList.join(''))
  }
  
  function shortenUrl (urlToShorten) {

		var newLink = {
    	createdAt: '',
      linkDisplayText: '',
      originalLinkUrl: '',
      shortenedUrl: ''
    };

		// populate newLink


		LINKS_HISTORY.push(newLink);
    
    displayHistory();
  }

  
  button.click(function (event) {
  
	 shortenUrl(input[0].value);

  })

});