gabrielem/simpleVanillaTODO

## simpleVanillaTODO
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>My TODO List</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">


    <style media="screen">
      body {
        font-family: 'Roboto', sans-serif;
        background: #afafaf;
      }
      #todo {
        border: 5px solid #efefef;
        padding: 10px;
        margin: 9px;
        max-width:550px;
        margin:20px auto;
        border-radius: 9px !important;
        background: #ffffff;

      }
      .noitem{
        background: #efefef !important;
        text-align:center !important;
        font-size:15px !important;
        border: 1px solid #efefef !important;
        border-radius: 9px !important;
        margin-top:10px !important;
        padding:10px !important;
      }
      #todo .alert{
        position: relative;
      }
      button.del{
        position: absolute;
        top:3px; right:5px;
        color:red;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <div class="" id="todo">
      <div class="form-group">
        <input type="text" name="item" value="" id="textbox" class="form-control">
        <button type="button" name="button" onclick="addItem()" id="addbtn" class="btn btn-lg btn-success form-control">
          ADD
        </button>
      </div>
      <div class="list-group list-group-flush" id="list">
        <div class="noitem">Non ci sono ancora note!</div>
      </div>
    </div>

    <script type="text/javascript">

      // Store data
      //var someData = 'The data that I want to store for later.';
      //localStorage.setItem('myDataKey', someData);

      // Get data
      let todoItem = []
      var data = localStorage.getItem('todoItem');
      if(data){
        todoItem = data.split(',')
        renderLoop(todoItem)
      }

      console.log("___todoItem", todoItem);


      const removeByIndex = function(array, index){
          return array.filter(function(elem, _index){
              return index != _index;
          });
      }
      function _removeByIndex(array, index) {
          delete array[index];
          return array
      }
      const delItem = function(indexToRemove) {
        const confirmMsg = confirm('Confermare operazione di cancellazoione, irreversibile!');
        if(confirmMsg){
          console.log('todoItem', todoItem);
          todoItem = removeByIndex(todoItem, indexToRemove)
          console.log('todoItem', todoItem);
          renderLoop(todoItem, indexToRemove)
        }
      }

      const addItem = function() {
        const textValue = document.getElementById('textbox').value
        if(textValue==null || textValue==''){
          alert('Errore! Devi inserire almeno un testo!');
          return;
        }
        todoItem.push(textValue)
        renderLoop(todoItem)
        document.getElementById('textbox').value = ''
        document.getElementById("textbox").focus();

      }

      function renderLoop(todoItem, indexToRemove) {
        var myNode = document.getElementById("list").innerHTML = '';
        if(todoItem && todoItem.length != 0) {
          localStorage.setItem('todoItem', todoItem.toString());

          for(let i=0; i<todoItem.length; i++) {
            const item = document.createElement('div');
            item.setAttribute("class", "alert alert-primary");
            item.innerHTML = i + ') ' + todoItem[i] + ' <button class="btn btn-danger del" onclick="delItem(\'' + i + '\')">X</button>';
            document.getElementById("list").appendChild(item)
          }
        } else {
          document.getElementById("list").innerHTML = '<div class="noitem">Non ci sono ancora note!</div>';
        }
      }
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en" dir="ltr">
	<head>
	<meta charset="utf-8">
	<title>My TODO List</title>
	<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
	<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">


	<style media="screen">
	body {
	font-family: 'Roboto', sans-serif;
	background: #afafaf;
	}
	#todo {
	border: 5px solid #efefef;
	padding: 10px;
	margin: 9px;
	max-width:550px;
	margin:20px auto;
	border-radius: 9px !important;
	background: #ffffff;

	}
	.noitem{
	background: #efefef !important;
	text-align:center !important;
	font-size:15px !important;
	border: 1px solid #efefef !important;
	border-radius: 9px !important;
	margin-top:10px !important;
	padding:10px !important;
	}
	#todo .alert{
	position: relative;
	}
	button.del{
	position: absolute;
	top:3px; right:5px;
	color:red;
	text-decoration: none;
	}
	</style>
	</head>
	<body>
	<div class="" id="todo">
	<div class="form-group">
	<input type="text" name="item" value="" id="textbox" class="form-control">
	<button type="button" name="button" onclick="addItem()" id="addbtn" class="btn btn-lg btn-success form-control">
	ADD
	</button>
	</div>
	<div class="list-group list-group-flush" id="list">
	<div class="noitem">Non ci sono ancora note!</div>
	</div>
	</div>

	<script type="text/javascript">

	// Store data
	//var someData = 'The data that I want to store for later.';
	//localStorage.setItem('myDataKey', someData);

	// Get data
	let todoItem = []
	var data = localStorage.getItem('todoItem');
	if(data){
	todoItem = data.split(',')
	renderLoop(todoItem)
	}

	console.log("___todoItem", todoItem);




	const removeByIndex = function(array, index){
	return array.filter(function(elem, _index){
	return index != _index;
	});
	}
	function _removeByIndex(array, index) {
	delete array[index];
	return array
	}
	const delItem = function(indexToRemove) {
	const confirmMsg = confirm('Confermare operazione di cancellazoione, irreversibile!');
	if(confirmMsg){
	console.log('todoItem', todoItem);
	todoItem = removeByIndex(todoItem, indexToRemove)
	console.log('todoItem', todoItem);
	renderLoop(todoItem, indexToRemove)
	}
	}

	const addItem = function() {
	const textValue = document.getElementById('textbox').value
	if(textValue==null \|\| textValue==''){
	alert('Errore! Devi inserire almeno un testo!');
	return;
	}
	todoItem.push(textValue)
	renderLoop(todoItem)
	document.getElementById('textbox').value = ''
	document.getElementById("textbox").focus();

	}

	function renderLoop(todoItem, indexToRemove) {
	var myNode = document.getElementById("list").innerHTML = '';
	if(todoItem && todoItem.length != 0) {
	localStorage.setItem('todoItem', todoItem.toString());

	for(let i=0; i<todoItem.length; i++) {
	const item = document.createElement('div');
	item.setAttribute("class", "alert alert-primary");
	item.innerHTML = i + ') ' + todoItem[i] + ' <button class="btn btn-danger del" onclick="delItem(\'' + i + '\')">X</button>';
	document.getElementById("list").appendChild(item)
	}
	} else {
	document.getElementById("list").innerHTML = '<div class="noitem">Non ci sono ancora note!</div>';
	}
	}
	</script>
	</body>
	</html>