JSFiddle - React, Tailwind, and code Playground

by thvinic

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">    
    <script src='https://code.jquery.com/jquery-1.11.3.min.js'></script>
        <script src='https://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>


        <ul class="list-group ">
        </ul>
<label for="toggle-1">ver</label>
<input id="toggle-1" type="checkbox">
<div>
        <div class="form-group">
          <input id="main-input" type="text" class="form-control" value="Adicionar item"> 
        </div>

        <button type="button" class="btn btn-success" id="main-button">Inserir</button>
        </div>
      <div class="modal fade" id="editModal" role="dialog">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title">Edit</h4>
            </div>

            <div class="modal-body">
            <textarea type="text" class="form-control" id="edit-input"></textarea>
            
            <b>Tipo de serviço: </b>
<input value="&#13;&#10;" type="text" name="fname" id="i1"><br>
<b>Valor total:</b>
<input type="text" name="lname" id="i2"><br>
<b>Estado:</b>
<input type="text" name="fname" id="i3"><br>
<b>Meu Bairro:</b>
<input type="text" name="company" id="i4">

            <div class="modal-footer">
              <button type="button" class="btn btn-primary" id="edit-button" data-dismiss="modal">Save changes</button>
            </div>

CSS

[id^=toggle],
[id^=toggle] + *{
  display:none;
}
[id^=toggle]:checked + *{
  display:block;
}

JavaScript

$(document).ready(function(){

	var items = getFromLocal('memos');
	var index;
	loadList(items);
	// if input is empty disable button
	$('button').prop('disabled', false);
	$('span').keyup(function(){
		if($(this).val().length !== 0) {
			$('button').prop('disabled', false);
		} else {
			$('button').prop('disabled', false);
		}
	});
	// bind input enter with button submit
	$('#main-input').keypress(function(e){
		if(e.which === 13) {
			if ($('#main-input').val().length !== 0)
				$('#main-button').click();
		}
	});
	$('#main-button').click(function(){
		var value = $('#main-input').val();
		items.push(value);
		//console.log(items[0]);
		$('#main-input').val('');
		loadList(items);
		storeToLocal('memos', items);
		// set button to 
		$('button').prop('disabled', false);
	});
	// delete one item
	$('ul').delegate("span", "click", function(event){
		event.stopPropagation();
		index = $('span').index(this);
		$('li').eq(index).remove();
		items.splice(index, 1);
		storeToLocal('memos', items);
		
	});

	// edit panel
	$('ul').delegate('li', 'click', function(){
		index = $('li').index(this);
		var content = items[index];
		console.log(content);
		$('#edit-input').val(content );
	});

	$('#edit-button').click(function(){
		items[index] = $('#edit-input').val();
		loadList(items);
		storeToLocal("memos", items);
	});

	// loadList
	function loadList(items){
		$('li').remove();
		if(items.length > 0) {
			for(var i = 0; i < items.length; i++) {
				$('ul').append('<li style="width:500px;height:auto;white-space: pre-wrap;" class= "list-group-item" data-toggle="modal" data-target="#editModal" style="width:auto;height:auto;">' + items[i] + '<span class="glyphicon glyphicon-chevron-right"></span</li>');
			}
		}
	};

	function storeToLocal(key, items){
		localStorage[key] = JSON.stringify(items);
	}

	function getFromLocal(key){
		if(localStorage[key])
			return JSON.parse(localStorage[key]);
		else 
			return [];
	}

});
jQuery.fn.extend({
  autoHeight: function () {
 ...